高阶组件可以看作 `React` 对装饰模式的一种实现，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。高阶组件（ `HOC` ）是 `React` 中的高级技术，用来重用组件逻辑。但高阶组件本身并不是 `ReactAPI` 。它只是一种模式，这种模式是由 `React` 自身的组合性质必然产生的。

我们可以通过以下两种方式实现高阶组件：

### 属性代理

函数返回一个我们自己定义的组件，然后在 `render` 中返回要包裹的组件，这样我们就可以代理所有传入的 `props` ，并且决定如何渲染，实际上 ，这种方式生成的高阶组件就是原组件的父组件，上面的函数 `visible` 就是一个 `HOC` 属性代理的实现方式。

```text
const loading = info => Wrapcomponent => {
  return class loadings extends Component {
    render() {
      const state = {
        loading_show: () => {
          let loadmodal = document.createElement('div');
          loadmodal.innerHTML = `<p id="loading" style="position:fixed;top:100px;z-index:10;background-color:black">${info}</p>`;
          document.getElementsByTagName('body')[0].appendChild(loadmodal);
        },
        remove_loading: () => {
          document.getElementById('loading').remove();
        }
      };
      return (<div>
        <Wrapcomponent {...this.props} {...state} />
      </div>);
    }
  };
};
export default loading;
```

### 反向继承

返回一个组件，继承原组件，在 `render` 中调用原组件的 `render` 。由于继承了原组件，能通过this访问到原组件的 `生命周期、props、state、render` 等，相比属性代理它能操作更多的属性。

```text
const message = Wrapcomponent => {
  return class HOC extends Wrapcomponent {
    componentDidMount() {
      let messagess = document.createElement('div');
      messagess.innerHTML = '<p style="position:fixed;top:100px;z-index:10;background-color:black">消息类高阶组件！</p>';
      document.getElementsByTagName('body')[0].appendChild(messagess);
      super.componentDidMount();  // componentDidMount方法劫持，不覆盖
    }

    render() {
      return super.render();  // super -> Wrapcomponent
    }
  };
};
export default message;
```

`HOC` 可以实现的功能：

- 组合渲染
- 条件渲染
- 操作 `props`
- 获取 `refs`
- 状态管理
- 操作 `state`
- 渲染劫持

`HOC` 在业务中的实际应用场景：

- 日志打点
- 权限控制
- 双向绑定
- 表单校验

更多关于web培训的问题，欢迎咨询千锋教育在线名师。千锋教育拥有多年IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。