https://juejin.cn/post/6940422320427106335 高阶组件产生初衷

组件是把prop渲染成UI,而高阶组件是将组件转换成另外一个组件，我们更应该注意的是，经过包装后的组件，获得了那些强化,节省多少逻辑，或是解决了原有组件的那些缺陷，这就是高阶组件的意义。我们先来思考一下高阶组件究竟解决了什么问题🤔🤔🤔？

① 复用逻辑：高阶组件更像是一个加工react组件的工厂，批量对原有组件进行加工，包装处理。我们可以根据业务需求定制化专属的HOC,这样可以解决复用逻辑。

② 强化props：这个是HOC最常用的用法之一，高阶组件返回的组件，可以劫持上一层传过来的props,然后混入新的props,来增强组件的功能。代表作react-router中的withRouter。

③ 赋能组件：HOC有一项独特的特性，就是可以给被HOC包裹的业务组件，提供一些拓展功能，比如说额外的生命周期，额外的事件，但是这种HOC，可能需要和业务组件紧密结合。典型案例react-keepalive-router中的 keepaliveLifeCycle就是通过HOC方式，给业务组件增加了额外的生命周期。

④ 控制渲染：劫持渲染是hoc一个特性，在wrapComponent包装组件中，可以对原来的组件，进行条件渲染，节流渲染，懒加载等功能，后面会详细讲解，典型代表做react-redux中connect和 dva中 dynamic 组件懒加载。

优点

① 正常属性代理可以和业务组件低耦合，零耦合，对于条件渲染和props属性增强,只负责控制子组件渲染和传递额外的props就可以，所以无须知道，业务组件做了些什么。所以正向属性代理，更适合做一些开源项目的hoc，目前开源的HOC基本都是通过这个模式实现的。 ② 同样适用于class声明组件，和function声明的组件。 ③ 可以完全隔离业务组件的渲染,相比反向继承，属性代理这种模式。可以完全控制业务组件渲染与否，可以避免反向继承带来一些副作用，比如生命周期的执行。 ④ 可以嵌套使用，多个hoc是可以嵌套使用的，而且一般不会限制包装HOC的先后顺序。

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

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

高阶组件的作用： ① 混入props 这个是高阶组件最常用的功能，承接上层的props,在混入自己的props，来强化组件。

② 抽离state控制更新 高阶组件可以将HOC的state的配合起来，控制业务组件的更新。这种用法在react-redux中connect高阶组件中用到过，用于处理来自redux中state更改，带来的订阅更新作用。

控制渲染