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

class Base extends React.Component{}

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

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

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

对于属性代理HOC,我们可以:

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

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

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

每个应用场景,我都举了例子🌰🌰,大家可以结合例子深入了解一下其原理和用途。


木子喵
492 声望26 粉丝

too young, too naive