高阶组件可以看作 `React` 对装饰模式的一种实现，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。高阶组件（ `HOC` ）是 `React` 中的高级技术，用来重用组件逻辑。但高阶组件本身并不是 `ReactAPI` 。它只是一种模式，这种模式是由 `React` 自身的组合性质必然产生的。
我们可以通过以下两种方式实现高阶组件：
### 属性代理 web前端学习教程
http://www.mobiletrain.org/study/html5/
函数返回一个我们自己定义的组件，然后在 `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` 在业务中的实际应用场景：
- 日志打点
- 权限控制
- 双向绑定
- 表单校验