高阶组件

高阶组件这个概念就更好理解了，说白了就是一个函数接受一个组件作为参数，经过一系列加工后，最后返回一个新的组件。看下面的代码示例，withUser函数就是一个高阶组件，它返回了一个新的组件，这个组件具有了它提供的获取用户信息的功能。

const withUser = WrappedComponent => {
const user = sessionStorage.getItem("user");
return props => <WrappedComponent user={user} {...props} />;
};

const UserPage = props => (
<div class="user-container">
  <p>My name is {props.user}!</p>
</div>
);

export default withUser(UserPage);

以上这两种模式看上去都挺不错的，很多库也运用了这种模式，比如我们常用的React Router。但我们仔细看这两种模式，会发现它们会增加我们代码的层级关系。最直观的体现，打开devtool看看你的组件层级嵌套是不是很夸张吧。这时候再回过头看我们上一节给出的hooks例子，是不是简洁多了，没有多余的层级嵌套。把各种想要的功能写成一个一个可复用的自定义hook，当你的组件想用什么功能时，直接在组件里调用这个hook即可。

react高阶组件

React高阶组件（Higher Order Components，HOC）是一种用于重用组件逻辑的高级技巧。HOC不是React API的一部分，而是一种基于React的组合模式。

HOC是一个函数，接受一个组件并返回一个新组件。HOC本身不是组件，而是一个将现有组件包装在容器组件中的函数。这个容器组件会提供一些额外的功能，例如数据获取、状态管理等等。

使用HOC可以实现许多React中常见的功能，例如代码复用、逻辑的抽象和减少样板代码。常见的HOC库包括recompose和redux中的connect方法。

以下是一个简单的例子，演示如何使用HOC来添加计数器功能：

    function withCounter(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: 0 };
      this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
      this.setState(prevState => ({
        count: prevState.count + 1
      }));
    }

    render() {
      return (
        <WrappedComponent
          count={this.state.count}
          handleClick={this.handleClick}
          {...this.props}
        />
      );
    }
  };
}

class MyComponent extends React.Component {
  render() {
    const { count, handleClick } = this.props;
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={handleClick}>Increment</button>
      </div>
    );
  }
}

const CounterComponent = withCounter(MyComponent);

// 在应用程序中使用 CounterComponent 渲染 MyComponent
ReactDOM.render(<CounterComponent />, document.getElementById('root'));

这个例子中，withCounter是一个高阶组件，接受一个组件作为参数，并返回一个新的组件。这个新的组件包含一个计数器状态和一个处理点击事件的方法，然后将这些属性传递给原始组件。通过这种方式，我们可以重用计数器逻辑，并将其添加到任何组件中。