React之高阶组件

概述：

高阶组件（Higher Order Component,简称:HOC）是 React 中用于复用组件逻辑的一种高级技巧。它本身不属于React API的一部分，只是一种基于 React 的组合特性而形成的设计模式。

具体而言，高阶组件是参数为组件，返回值为新组件的函数。

HOC 在 React 的第三方库中很常见，如 Redux 的 connect 和 Relay的的createFragmentContainer。

作用：

❀ 组件间公用逻辑抽离，提高代码的复用率

❀ 劫持渲染（高阶组件之反向继承）

❀ state状态抽离操作（高阶组件之反向继承）

用法：

1：纯函数组件，无React.Component参与（可加入hook）

适用场景：

组件间公用逻辑抽离，提高代码的复用率

用例：↓↓↓↓↓

2：有React.Component参与，输出的新组建继承于React.Component

适用场景：

组件间公用逻辑抽离，提高代码的复用率

用例：↓↓↓↓↓

3：反向继承

概述：

所谓反向继承就是新输出的组件继承于被包裹组件。

因为是通过extends继承，所以被包裹组件必须是类，也就是说被包裹组件必须是继承于React.Component的类组件。

适用场景：

❀ 劫持渲染（高阶组件之反向继承）

❀ state状态抽离操作（高阶组件之反向继承）

用例：↓↓↓↓↓