React高阶组件

React高阶组件

高阶函数： 接收函数做为输入，或者输出另外一个函数的一类函数； 高阶组件： 接收React组件做为输入，输出一个新的React组件的组件。

高阶组件经过包裹一个新传入的React组件，通过一些逻辑处理，最终返回一个enchanted的React组件，是其余组件调用.

一些前提了解知识点

• ReactComponent： 定义调用时的组件name

function getDisplayName(component) {
        return component.displayName || component.name || 'Component';    
        
    }

    export default function WithHOC(WrapComponent) {
        // 此处未定义名称
        return class extends React.Component {
            // 定义displayName;
            static displayName = `withHOC(${getDisplayName(WrapComponent)})`;
            render() {
                console.log('inside HOC');
                return (
                    return <WrapComponent {...this.props} />
                )
            }
        }
    }
    App = WithHOC(App);

若是未定义displayName，那么进行调试的时候，就会显示以下：

// react自动定义名称
    |---_class2
      |---App
        ...

定义displayName后，显示以下：

|---withHOC(App)
      |---App
        ...

函数柯里化

深刻理解javascript函数进阶系列第二篇——函数柯里化
koa框架实践与中间件原理解析
react事件传参

• 柯里化 Curry

只传递函数的一部分参数来调用它，让它返回一个函数去处理剩下的参数

• 函数乔明 func(params)(otherParams);

在react里，经过函数柯里化,咱们能够经过传入不一样的参数来获得不一样的高阶组件

基于属性代理的方式

属性代理最多见的高阶组件的使用方式，上述描述的高阶组件就是这种方式。它经过作一些操做，将被包裹组件的props和新生成的props一块儿传递给此组件，这称之为属性代理。

import React from 'react';
export default function withHeader(WrapperComponent) {
  return class extends React.Component {
    render() {
      const newProps = {
        test: 'hoc'
      };
      // 透传props，而且传递新的newProps
      return (
        <div>
          <WrapperComponent {...this.props} {...newProps} />
        </div>
      )
    }
  }
}

基于反向继承的方式

这种方式返回的React组件继承了被传入的组件，因此它可以访问到的区域、权限更多，相比属性代理方式，它更像打入组织内部，对其进行修改。具体的能够参考附录里提供的连接进行深刻学习。

export default function (WrappedComponent) {
  return class Inheritance extends WrappedComponent {
    componentDidMount() {
      // 能够方便地获得state，作一些更深刻的修改。
      console.log(this.state);
    }
    render() {
      return super.render();
    }
  }
}

组合多个高阶组件

上述高阶组件为React组件加强了一个功能，若是须要同时增长多个功能须要怎么作？这种场景很是常见，例如我既须要增长一个组件标题，又须要在此组件未加载完成时显示Loading.

@withHeader
@withLoading
class Demo extends Component{

}

使用compose能够简化上述过程，也能体现函数式编程的思想。

const enhance = compose(withHeader,withLoading);
    @enhance
    class Demo extends Component{
    
    }

组合compose
compose能够帮助咱们组合任意个（包括0个）高阶函数，例如compose(a,b,c)回一个新的函数d，函数d依然接受一个函数做为入参，只不过在内部会依次调用c,b,a，从表现层对使用者保持透明。
基于这个特性，咱们即可以很是便捷地为某个组件加强或减弱其特征，只须要去变动compose函数里的参数个数即可。
compose函数实现方式有不少种，这里推荐其中一个recompact.compose，详情见下方参考类库。

recompact：包含了一系列实用的高阶组件库
React Sortable：React拖动库
深刻理解 React 高阶组件：其中详细介绍了属性代理和反向继承的区别。