React 高阶组件

高阶组件（HOC）是React中用于复用组件逻辑的高级技巧。
输入是组件，输出新的组件的过程就是高阶组件。
巴拉巴拉 搞了好几天终于封装好了
感人哭了 好了 言归正传 接下来开始我的表演
分割线走起来

• 属性代理

  
  属性代理.png
  

  关于属性代理，被修饰的组件需要区分好两种状态
  ①内部状态
  ②外部状态

  
  image.png
  比如这个被高阶组件修饰的组件【StudentInfoList】，内部需要维护内部state【isPayed】，当下拉框状态改变了之后，发送请求的时候可以使用抽象过的方法fetchData。

• 抽象state
  WrappedComponent 代码：

  
  抽象state-1.png
  

  高阶组件中代码：

  
  image.png
  在上面的例子中，我们将WrappedComponent 中表格的onChange 抽象到了高阶组件中，这样有效的抽象了同样的state操作
  我们可以通过WrappedComponent提供props和回调函数抽象state。就像我们开始的例子，我们可以把原组件抽象为展示型组件，分离内部状态，搞成无状态组件（慎重点，对于逻辑复杂的组件不建议做成无状态组件）。

• 备注
  何为高阶组件(higher order component)
  高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC。

参考文章

• React系列之高阶组件HOC实际应用指南

练习
写一个反转其输入的 HOC
写一个从 API 提供数据给传入的组件的 HOC(完美解决)
写一个实现 shouldComponentUpdate 来避免 reconciliation 的 HOC(将要进行)
写一个通过 React.Children.toArray 对传入组件的子组件进行排序的 HOC