简单来说，高阶组件就是一种封装行为，我们将功能相同的代码封装为一个公用函数或对象，而高阶组件就是以组件为参并返回组件的函数。用更直观的话来说就是对目标组件进行“包裹”，添加逻辑。
下面来写一个简例
高阶组件
被包裹组件
也可使用ES7 的@ 来优雅写法。从react组件树上能看到Wrapper组件被HOC组件包裹起来。
但如果HOC被多次调用，则不容易区分HOC所包裹的是哪个组件，因此可使用官方文档所提供的方法来设置组件的displayName。
还有一种方法是可以对组件进行传参，如下所示
这种用法名为柯里化（传入函数的一部分参数来调用它，用返回的函数来处理剩下的参数，由此在react中可通过传入不同的参数来获得不同的高阶组件）。
高阶组件通常有属性代理和反向继承两种用法。
一、属性代理 ：以上将HOC接收到的props传递给目标组件，称为属性代理，通过属性代理我们可以进行三种操作
属性代理是最常见的高阶组件的使用方式，上述描述的高阶组件就是这种方式。它通过做一些操作，将被包裹组件的props和新生成的props一起传递给此组件，这称之为属性代理。
①添加props
不多说
②通过ref获取实例
当 WrappedComponent 被渲染后，ref 上的回调函数 proc 将会执行，此时就有了这个 WrappedComponent 的实例的引用。但我们应尽量不去使用ref
ref获取实例
③提取state
以下用法我们将input的value以及操作value的方法提取出来，以此我们很容易进行理解。
二、反向继承
这种方式返回的React组件继承了被传入的组件，所以它能够访问到的区域、权限更多，相比属性代理方式，它更像打入组织内部，对其进行修改。
反向继承
通过代码看到HOC组件通过extends对传入的组件Com进行集成，而且，HOC可以拿到state和props进行修改，从而改变组件的行为即"渲染劫持"。
结果
之所以输出的是4AND8,因为HOC通过super调用了父类的render方法，this指向HOC的实例。同理，控制台只输出1因为子类继承自父类，因此执行完component方法后，不再去执行和父类相同的方法。
如果我们要是用多个高阶组件的话可以如下
也可
同父组件的区别：高阶组件更加注重逻辑层的代码，而父组件则大多包括了UI层面。
总结
高阶组件可以抽离公共逻辑，以后我们在优化代码和抽离组件时可以尝试运用高阶组件。
网友评论