理解HOC高阶组件：将React组件组合起来发挥更大作用

前端

2023-11-15 03:27:40

在React开发中，我们会遇到组件重复使用的情况，这通常发生在我们想要封装一些通用的逻辑或者行为，而这些逻辑或者行为需要在多个组件中使用。为了解决这个问题，我们可以使用高阶组件（HOC）。

什么是高阶组件（HOC）？

HOC是一种设计模式，它允许你将一个组件作为参数，并返回一个新组件。新组件将拥有原组件的所有功能，但也可以添加额外的功能或行为。

为什么要使用HOC？

使用HOC的主要原因是代码复用。通过将组件的通用逻辑封装成一个HOC，我们可以减少代码冗余，并在需要时轻松地将这些逻辑应用到其他组件中。

如何使用HOC？

可以使用函数或者类来创建HOC。函数式的HOC通常更简单，而基于类的HOC通常提供更强大的功能和灵活性。

函数式HOC

const withCounter = (WrappedComponent) => {
  const Counter = (props) => {
    const [count, setCount] = useState(0);

    return (
      <div>
        <WrappedComponent {...props} count={count} />
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
    );
  };

  return Counter;
};

这个HOC函数将一个组件作为参数，并返回一个新的组件，该组件包含了原组件的所有功能，还添加了一个计数器功能。

类式HOC

class withCounter extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <this.props.WrappedComponent {...this.props} count={this.state.count} />
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>+</button>
      </div>
    );
  }
}