React: 高阶组件 (HOC)

React：高阶组件（HOC）

概念

• 高阶组件（HOC，Higher-Order Components）不是组件，而是一个函数，它会接收一个组件作为参数并返回一个经过改造的新组件：

const EnhancedComponent = HOC(WrappedComponent);

• 需要区分的是，组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件;
• 高阶组件是 React 中用于复用组件逻辑的一种高级技巧;

实现方式

属性代理

属性代理是最常见的实现方式，它本质上是使用组合的方式，通过将组件包装在容器组件中实现功能。
属性代理方式实现的高阶组件和原组件的生命周期关系完全是React父子组件的生命周期关系，所以该方式实现的高阶组件会影响原组件某些生命周期等方法。

优点：

1. 正常属性代理可以和业务组件低耦合，零耦合，对于条件渲染和props属性增强,只负责控制子组件渲染和传递额外的props就可以，所以无须知道，业务组件做了些什么。所以正向属性代理，更适合做一些开源项目的hoc，目前开源的HOC基本都是通过这个模式实现的。

2. 同样适用于class声明组件，和function声明的组件。

3. 可以完全隔离业务组件的渲染,相比反向继承，属性代理这种模式。可以完全控制业务组件渲染与否，可以避免反向继承带来一些副作用，比如生命周期的执行。

4. 可以嵌套使用，多个hoc是可以嵌套使用的，而且一般不会限制包装HOC的先后顺序。

缺点：

1. 一般无法直接获取业务组件的状态，如果想要获取，需要ref获取组件实例。

2. 无法直接继承静态属性。如果需要继承需要手动处理，或者引入第三方库。

反向继承

反向继承指的是使用一个函数接受一个组件作为参数传入，并返回一个继承了该传入组件的类组件，且在返回组件的 render() 方法中返回 super.render() 方法

-> 1，装饰组件直接传入

-> 2，super.render( ) 调用

优点：

1. 方便获取组件内部状态，比如state，props ,生命周期,绑定的事件函数等

2. es6继承可以良好继承静态属性。我们无须对静态属性和方法进行额外的处理。

缺点：

1. 无状态组件无法使用。

2. 和被包装的组件强耦合，需要知道被包装的组件的内部状态，具体是做什么？

3. 如果多个反向继承hoc嵌套在一起，当前状态会覆盖上一个状态。这样带来的隐患是非常大的，比如说有多个componentDidMount，当前componentDidMount会覆盖上一个componentDidMount。这样副作用串联起来，影响很大。