React 高阶 API

在React中，高阶组件（Higher-Order Components，HOC）是一种用于复用组件逻辑的高级技术。HOC自身不是React API的一部分，它是一个基于React组件组合的技术。

一个简单的HOC可以定义为一个接收一个组件并返回另一个新组件的函数。

下面是一个简单的HOC示例，它为一个组件添加日志功能：

function withLogging(WrappedComponent) {
  class HOC extends React.Component {
    componentDidMount() {
      console.log('组件挂载', this);
    }
 
    componentDidUpdate() {
      console.log('组件更新', this);
    }
 
    componentWillUnmount() {
      console.log('组件卸载', this);
    }
 
    render() {
      // 通过props将WrappedComponent传递给HOC
      return <WrappedComponent {...this.props} />;
    }
  }
 
  return HOC;
}
 
// 使用HOC
class MyComponent extends React.Component {
  render() {
    return <div>My Component</div>;
  }
}
 
export default withLogging(MyComponent);

在这个例子中，withLogging是一个高阶函数，它接收一个组件WrappedComponent作为参数，并返回一个新的组件，在这个新组件中，我们添加了生命周期钩子来记录日志。使用时，我们只需要将我们的组件传递给withLogging，然后导入返回的组件即可。