初探REACT高阶组件

简单来说，高阶组件就是一种封装行为，我们将功能相同的代码封装为一个公用函数或对象，而高阶组件就是以组件为参并返回组件的函数。用更直观的话来说就是对目标组件进行“包裹”，添加逻辑。

下面来写一个简例

高阶组件

被包裹组件

也可使用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层面。

总结

高阶组件可以抽离公共逻辑，以后我们在优化代码和抽离组件时可以尝试运用高阶组件。