高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑,HOC本质上不是React API的一部分。他是从React的组合性质中显露出来的模式
具体来说,一个高阶组件就是一个获取一个组件并返回一个组件的函数
注意:一个HOC不会修改传入的参数组件,也不会使用继承来复制它的行为。不如说,一个HOC通过将原始组件包裹到一个容器组件里来混合。一个HOC是一个没有副作用的纯函数。
不要改变原始组件,使用组合
在HOC里要打消修改组件原型的想法。

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
}

任我行
19 声望2 粉丝