高阶组件

如果一个函数操作其他函数，即将其他函数作为参数或将函数作为返回值，将其称为高阶函数。

高阶组件(high-order component)类似于高阶函数，接收 React 组件作为输入，输出一个新的 React 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。可以对 render 方法作劫持，也可以控制 props 与 state。

更通俗地描述为，高阶组件通过包裹（wrapped）被传入的React组件，经过一系列处理，最终返回一个相对增强（enhanced）的React组件，供其他组件调用。

实现一个高阶组件

React 中的高阶组件运用了什么设计模式？

使用了装饰模式：

export default function HOC(WrappedComponent) {
    return (
        <div>
            <h1 className="demo-header">
              我是标题
            </h1>
            <WrappedComponent {...this.props}/>
        </div>
    );
}

在其他组件里，我们引用这个高阶组件，用来强化它。

export default function Basic{
  render() {
    return (
      <div>
        我是一个基础组件
      </div>
    );
  }
}