1. 在class
组件盛行之后,我们可以通过继承的方式进一步的强化我们的组件。这种模式的好处在于,可以封装基础功能组件,然后根据需要去extends
我们的基础组件,按需强化组件,但是值得注意的是,必须要对基础组件有足够的掌握,否则会造成一些列意想不到的情况发生。
class Base extends React.Component{}
2. 高阶组件是参数为组件,返回值为新组件的函数。
参考文献
1.一文吃透React高阶组件
缺点
- ① 一般无法直接获取业务组件的状态,如果想要获取,需要
ref
获取组件实例。 - ② 无法直接继承静态属性。如果需要继承需要手动处理,或者引入第三方库。
对于属性代理HOC,我们可以:
- 强化props & 抽离state。
- 条件渲染,控制渲染,分片渲染,懒加载。
- 劫持事件和生命周期
- ref控制组件实例
- 添加事件监听器,日志
对于反向代理的HOC,我们可以:
- 劫持渲染,操纵渲染树
- 控制/替换生命周期,直接获取组件状态,绑定事件。
每个应用场景,我都举了例子🌰🌰,大家可以结合例子深入了解一下其原理和用途。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。