高阶组件
由此可以看出，高阶组件的主要功能是封装并抽离组件的通用逻辑，让此部分逻辑在组件间更好地被复用。
基于属性代理的方式
属性代理是最常见的高阶组件的使用方式，上述描述的高阶组件就是这种方式。它通过做一些操作，将被包裹组件的props和新生成的props一起传递给此组件，这称之为属性代理。
export default function withHeader(WrappedComponent) {
return class HOC extends Component {
render() {
const newProps = {
test:'hoc'
}
// 透传props，并且传递新的newProps
return
<WrappedComponent {...this.props} {...newProps}/>
}
}
}
基于反向继承的方式
这种方式返回的React组件继承了被传入的组件，所以它能够访问到的区域、权限更多，相比属性代理方式，它更像打入组织内部，对其进行修改。具体的可以参考附录里提供的链接进行深入学习。
export default function (WrappedComponent) {
return class Inheritance extends WrappedComponent {
componentDidMount() {
// 可以方便地得到state，做一些更深入的修改。
console.log(this.state);
}
render() {
return super.render();
}
}
}
与父组件区别
高阶组件作为一个函数，它可以更加纯粹地关注业务逻辑层面的代码，比如数据处理，数据校验，发送请求等，可以改善目前代码里业务逻辑和UI逻辑混杂在一起的现状。父组件则是UI层的东西，我们先前经常把一些业务逻辑处理放在父组件里，这样会造成父组件混乱的情况。为了代码进一步解耦，可以考虑使用高阶组件这种模式。
总结
高阶组件是Decorator模式在React的一种实现，它可以抽离公共逻辑，像洋葱一样层层叠加给组件，每一层职能分明，可以方便地抽离与增添。在优化代码或解耦组件时，可以考虑使用高阶组件模式。
ES6支持使用import/export的方式拆分代码功能和模块，避免一份文件里面出现"成坨"的代码。
1.属性代理 2.反向继承
第一种方法属性代理是最常见的实现方式，将被处理组件的props和新的props一起传递给新组件，代码如下：
第二种方法反向继承就有意思了代码看完我们可能还有点懵，那我们先来剖析关键词"继承"。何谓继承？新生成的HOC组件通过extends关键字，获得了传入组件OriginComponent所有的属性和方法，是谓"继承"。也就是说继承之后，HOC组件能够实现OriginComponent组件的全部功能，而且，HOC可以拿到state和props进行修改，从而改变组件的行为，也就是所谓的"渲染劫持"。可以说，通过反向继承方法实现的高阶组件相比于属性代理实现的高阶组件，功能更强大，个性化程度更高，适应更多的场景。
一句话总结，为了避免在调试时，因为高阶组件的存在而导致满屏的HOC(以上述代码为例)，可以设置类的displayName属性修改组件的名称。
总结一下，高阶组件其实就是处理组件的函数，他有两种实现方式： 一是属性代理，类似于一元一次方程的y = x + b，输入x是原组件，参数b是你要添加或删除的属性/方法，y是最终输出的组件。 二是反向继承，类似于一元一次方程的y = kx + b，可以拿到state和props进行渲染劫持(k)，改变组件的行为。
