React之高阶组件
2020-02-02 本文已影响0人
南山码僧
概述：
高阶组件（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状态抽离操作（高阶组件之反向继承）
用例：↓↓↓↓↓
