当前位置：首页 > React

react实现继承

2026-01-26 11:41:51React

在React中实现组件间的继承关系可以通过多种方式完成，但需要注意的是，React官方推荐组合（Composition）而非继承（Inheritance）来实现代码复用。以下是几种常见方法：

使用高阶组件（HOC）

高阶组件是React中复用组件逻辑的一种高级技巧，通过接受一个组件并返回一个新组件的方式实现逻辑复用。

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component is mounted');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

class MyComponent extends React.Component {
  render() {
    return <div>My Component</div>;
  }
}

export default withLogging(MyComponent);

使用Render Props

Render Props是一种通过prop传递渲染逻辑的技术，允许组件共享代码。

class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  };

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <MouseTracker render={({ x, y }) => (
        <h1>The mouse position is ({x}, {y})</h1>
      )} />
    );
  }
}

使用自定义Hooks

自定义Hooks是React 16.8引入的特性，允许在不编写组件的情况下复用状态逻辑。

function useWindowWidth() {
  const [width, setWidth] = React.useState(window.innerWidth);

  React.useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

function MyComponent() {
  const width = useWindowWidth();
  return <div>Window width: {width}</div>;
}

使用类继承（不推荐）

虽然可以使用ES6类继承，但React官方不推荐这种方式。

class BaseComponent extends React.Component {
  logMessage(message) {
    console.log(message);
  }
}

class MyComponent extends BaseComponent {
  render() {
    this.logMessage('Rendering MyComponent');
    return <div>My Component</div>;
  }
}

组合优于继承

React官方文档明确指出组合优于继承，建议通过props和组件组合来实现代码复用。

react实现继承

function Button(props) {
  return <button className="btn">{props.children}</button>;
}

function DangerButton(props) {
  return <Button className="btn-danger">{props.children}</Button>;
}

每种方法都有其适用场景，高阶组件和Render Props适用于复杂逻辑复用，自定义Hooks适用于状态逻辑复用，而组合是最简单直接的代码复用方式。

标签: react