react-高阶组件-Hoc

Posted 2021-09-15 木子喵

1. 在class组件盛行之后，我们可以通过继承的方式进一步的强化我们的组件。这种模式的好处在于，可以封装基础功能组件，然后根据需要去extends我们的基础组件，按需强化组件，但是值得注意的是，必须要对基础组件有足够的掌握，否则会造成一些列意想不到的情况发生。

class Base extends React.Component{}

2. 高阶组件是参数为组件，返回值为新组件的函数。

参考文献
1.一文吃透React高阶组件

缺点

• ① 一般无法直接获取业务组件的状态，如果想要获取，需要ref获取组件实例。
• ② 无法直接继承静态属性。如果需要继承需要手动处理，或者引入第三方库。

对于属性代理HOC，我们可以：

• 强化props & 抽离state。
• 条件渲染，控制渲染，分片渲染，懒加载。
• 劫持事件和生命周期
• ref控制组件实例
• 添加事件监听器，日志

对于反向代理的HOC,我们可以：

• 劫持渲染，操纵渲染树
• 控制/替换生命周期，直接获取组件状态，绑定事件。

每个应用场景，我都举了例子