HOC - High Order Component 高阶组件

• 高阶函数

简而言之，可以接收函数作为参数的函数就是一个高阶函数。

 var hoc = function(func){
       ...
       return func();
 }

上面的hoc函数就是一个高阶函数。

• 高阶组件

高阶组件是React中的一个概念，类似于高阶函数。
Concretely, a higher-order component is a function that takes a component and returns a new component. (高阶组件是一个函数，该函数接收一个组件作为参数，并且返回一个封装之后的组件)

const EnhancedComponent = higherOrderComponent(WrappedComponent);

上面的higherOrderComponent 接收组件WrappedComponent作为参数，并且返回一个新的封装之后的组件，这样的组件就称之为高阶组件。

class WrappedComponent extends React.Component {
  render() {
    return (
      <div>
        WrappedComponent
      </div>
    );
  }
}

const HighOerderComponent = (WrappedComponent) => {
  class HOComponent extends React.Component {
    render() {
      return (
        <div>
          <WrappedComponent {...this.props} />
        </div>
      );
    }
  }
  return HOComponent;
}

• 注意事项：

• 不要在render方法中使用HOC
  因为React使用dif算法来判断是否重新渲染组件，如果在render中生成HOC，那么这个HOC每次都会生成一个新的，在performance上会造成一定的影响，HOC的创建操作应该放在组件的生命周期函数或者构造函数中去。
• copy组件的静态方法到HOC中
  有时候使用一些静态方法有助于更方便的去构造一个组件，但是如果使用了HOC，那么就需要将组件的静态方法copy到HOC中去，推荐使用React提供的 hoistNonReactStatic 去copy组件的静态方法。
• 不要使用refs去操作html元素
  refs 可以用来引用一个原生的html元素，得到html元素之后，就可以按照传统的操作html元素的方式对该组件进行操作，但是在React中应该尽量避免使用这种方式去操作Dom元素。