React中的高阶组件

高阶组件（HOC, High-Order Component）是React中用于重组组件逻辑的高级技术，是一种编程模式而不是React的api。

直观来讲，高阶组件是以某一组件作为参数返回一个新组件的函数。

高阶函数

要了解高阶组件，首先我们要了解下什么是高阶函数！

  特征：

  1. 函数可以作为参数传递；

  2. 函数可以作为返回值被输出；

高阶组件目的与意义：减少重复

重复是优秀系统设计的大敌 --Robert C.Martin

在React中使用高阶组件的方法：

  1. HOComponent(WrappedComponent, [args])

  2. @HOComponent // 装饰器模式

高阶组件的应用：

  1. 代理方式

   操作prop/抽取状态/访问ref/包装组件

    示例： 

export default () => WrappedComponent => class A extends React.Component {
  render() {
    return <WrappedComponent {...this.props} />
  }
}

  2. 继承方式

    操作prop/操作生命周期函数

    示例：

export default () => WrappedComponent => class A extends WrappedComponent {
  render() {
    return super.render()
  }
}

 注：优先考虑组合，其次考虑继承