一、概念
高阶组件的概念应该是来源于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
