> For the complete documentation index, see [llms.txt](https://onenesss-organization.gitbook.io/jj-xiaoce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://onenesss-organization.gitbook.io/jj-xiaoce/react-jin-jie-shi-jian-zhi-nan/10.-ji-chu-pian-gao-jie-zu-jian.md).
# 10. 基础篇-高阶组件
### 一前言
本节是 React 进阶系列基础篇的最后一节，主要给大家讲解 React 高阶组件- HOC。最近调研了很多同学对高阶组件的使用与理解，大部分同学给我的回复是，知道高阶组件，也会用一些优秀的开源库中的高阶组件，但是自己遇到业务场景的时候，**想不到用高阶组件解决问题**或者**不知道怎么编写高阶组件**？
从小伙伴们的回答中，我找到了本章节重点的讨论方向，就是 **HOC 解决什么问题，什么时候用到 HOC，以及如何编写 HOC ?**
### 二高阶组件基本介绍-能解决什么问题？
#### 1 高阶组件能解决什么问题
高级组件到底能够解决什么问题？举一个特别简单的例子，话说小明负责开发一个 web 应用，应用的结构如下所示，而且这个功能小明已经开发完了。
但是，有一天老板突然提出了一个权限隔离的需求，就是部分模块组件受到权限控制，后台的数据交互的结果权限控制着模块展示与否，而且没有权限会默认展示无权限提示页面。（如下图，黄色部分是受到权限控制的组件模块）
那么小明面临的问题是，如何给需要权限隔离的模块，绑定权限呢？那第一种思路是把所有的需要权限隔离的模块重新绑定权限，通过权限来判断组件是否展示。
这样无疑会给小明带来很多的工作量，而且后续项目可能还有受权限控制的页面或者组件，都需要手动绑定权限。那么如何解决这个问题呢，思考一下，既然是判断权限，那么可以把逻辑都写在一个容器里，然后将每个需要权限的组件通过容器包装一层，这样不就不需要逐一手动绑定权限了吗？所以 HOC 可以合理的解决这个问题，通过 HOC 模式结构如下图所示：
综上所述，HOC的产生根本作用就是解决大量的代码复用，逻辑复用问题。既然说到了逻辑复用，那么具体复用了哪些逻辑呢？
* 首先第一种就是像上述的拦截问题，本质上是对渲染的控制，对渲染的控制可不仅仅指是否渲染组件，还可以像 dva 中 dynamic 那样懒加载/动态加载组件。
* 还有一种场景，比如项目中想让一个非 Route 组件，也能通过 props 获取路由实现跳转，但是不想通过父级路由组件层层绑定 props ，这个时候就需要一个 HOC 把改变路由的 history 对象混入 props 中，于是 withRoute 诞生了。所以 HOC 还有一个重要的作用就是让 props 中混入一些你需要的东西。
* 还有一种情况，如果不想改变组件，只是监控组件的内部状态，对组件做一些赋能，HOC 也是一个不错的选择，比如对组件内的点击事件做一些监控，或者加一次额外的生命周期，我之前写过一个开源项目 `react-keepalive-router`，可以缓存页面，项目中的 keepaliveLifeCycle 就是通过 HOC 方式，给业务组件增加了额外的生命周期。
#### 高阶组件基础概念
高阶组件真的很好理解，都知道高阶函数就是一个将函数作为参数并且返回值也是函数的函数。高阶组件是以组件作为参数，返回组件的函数。返回的组件把传进去的组件进行功能强化。
#### 两种不同的高阶组件
常用的高阶组件有**属性代理**和**反向继承**两种，两者之间有一些共性和区别。接下来分别介绍一下两种模式下的高阶组件。
**属性代理**
属性代理，就是用组件包裹一层代理组件，在代理组件上，可以做一些，对源组件的强化操作。这里注意属性代理返回的是一个新组件，被包裹的原始组件，将在新的组件里被挂载。
```js
function HOC(WrapComponent){
return class Advance extends React.Component{
state={
name:'alien'
}
render(){
return
}
}
}
```
优点：
* ① 属性代理可以和业务组件低耦合，零耦合，对于条件渲染和 props 属性增强，只负责控制子组件渲染和传递额外的 props 就可以了，所以无须知道，业务组件做了些什么。所以正向属性代理，更适合做一些开源项目的 HOC ，目前开源的 HOC 基本都是通过这个模式实现的。
* ② 同样适用于类组件和函数组件。
* ③ 可以完全隔离业务组件的渲染，因为属性代理说白了是一个新的组件，相比反向继承，可以完全控制业务组件是否渲染。
* ④ 可以嵌套使用，多个 HOC 是可以嵌套使用的，而且一般不会限制包装 HOC 的先后顺序。
缺点：
* ① 一般无法直接获取原始组件的状态，如果想要获取，需要 ref 获取组件实例。
* ② 无法直接继承静态属性。如果需要继承需要手动处理，或者引入第三方库。
* ③ 因为本质上是产生了一个新组件，所以需要配合 forwardRef 来转发 ref。
**反向继承**
反向继承和属性代理有一定的区别，在于包装后的组件继承了原始组件本身，所以此时无须再去挂载业务组件。
```js
class Index extends React.Component{
render(){
return
hello,world
}
}
function HOC(Component){
return class wrapComponent extends Component{ /* 直接继承需要包装的组件 */
}
}
export default HOC(Index)
```
优点：
* ① 方便获取组件内部状态，比如 state ，props ，生命周期，绑定的事件函数等。
* ② es6继承可以良好继承静态属性。所以无须对静态属性和方法进行额外的处理。
缺点：
* ① 函数组件无法使用。
* ② 和被包装的组件耦合度高，需要知道被包装的原始组件的内部状态，具体做了些什么？
* ③ 如果多个反向继承 HOC 嵌套在一起，当前状态会覆盖上一个状态。这样带来的隐患是非常大的，比如说有多个 componentDidMount ，当前 componentDidMount 会覆盖上一个 componentDidMount 。这样副作用串联起来，影响很大。
### 三 高阶组件功能说明-如何编写高阶组件？
#### 1 强化props
强化 props 就是在原始组件的 props 基础上，加入一些其他的 props ，强化原始组件功能。举个例子，为了让组件也可以获取到路由对象，进行路由跳转等操作，所以 React Router 提供了类似 withRouter 的 HOC 。
```js
function withRouter(Component) {
const displayName = `withRouter(${Component.displayName || Component.name})`;
const C = props => {
/* 获取 */
const { wrappedComponentRef, ...remainingProps } = props;
return (
{context => {
return (
);
}}
);
};
C.displayName = displayName;
C.WrappedComponent = Component;
/* 继承静态属性 */
return hoistStatics(C, Component);
}
export default withRouter
```
流程分析：
* 分离出 props 中 wrappedComponentRef 和 remainingProps ， remainingProps 是原始组件真正的 props， wrappedComponentRef 用于转发 ref。
* 用 Context.Consumer 上下文模式获取保存的路由信息。（ React Router 中路由状态是通过 context 上下文保存传递的）
* 将路由对象和原始 props 传递给原始组件，所以可以在原始组件中获取 history ，location 等信息。
#### 2 控制渲染
**渲染劫持**
HOC 反向继承模式，可以通过 super.render() 得到 render 之后的内容，利用这一点，可以做渲染劫持 ，更有甚者可以修改 render 之后的 React element 对象。
```js
const HOC = (WrapComponent) =>
class Index extends WrapComponent {
render() {
if (this.props.visible) {
return super.render()
} else {
return
暂无数据
}
}
}
```
**修改渲染树**
```js
class Index extends React.Component{
render(){
return