react hoc

一、概念

高阶组件的概念应该是来源于JavaScript的高阶函数:高阶函数就是接受函数作为输入或者输出的函数

高阶组件仅仅只是是一个接受组件作输入并返回组件的函数，通常情况下，实现高阶组件的方式有以下两种:

二、作用

1、属性代理(Props Proxy)

操作props ，抽象 state， 获得refs的引用，用其他元素包裹组件

2、反向继承(Inheritance Inversion)

渲染劫持

三、传参，柯里化

constHOCFactoryFactory =(...params) =>{

   return (WrappedComponent) =>{

         return class HOCextendsComponent { render() {return null } } 

 }

}

HOCFactoryFactory(params)(WrappedComponent)

四、名字

// https://github.com/mridgway/hoist-non-react-statics

import hoistNonReactStatics from 'hoist-non-react-statics'

getDisplayName = (WrappedComponent)=> {

  return WrappedComponent.displayName || WrappedComponent.name || 'Component'

}

createHoc = (name, hoc) => {

  return function wrap (WrappedComponent) {

    const Component = hoc(WrappedComponent)

  // 去除 WrappedComponent 中额外的静态变量

    hoistNonReactStatics(Component, WrappedComponent)

 //  修改 Component 的展示名字

    Component.displayName = `${name}(${getDisplayName(WrappedComponent)})`

    return Component

  }

}

参考：

https://juejin.im/post/5914fb4a0ce4630069d1f3f6