Hoc、Render Props、React-Hooks

HOC

• 优势

  • HOC的外层组件通过Props影响内层的状态，而不是直接改变State，不存在冲突和相互干扰，降低了耦合度

• 缺陷

  1. 扩展性限制：无法从外部访问子组件的State，因此无法通过shouldComponentUpdate过滤掉不必要的更新
  2. Ref传递问题：Ref被隔断
  3. Wrapper Hell：可能出现多层包裹组件，多层抽象增加了复杂度和理解成本
  4. 命名冲突：如果高阶组件多次嵌套，没有使用命名空间的话会产生冲突，覆盖老属性
  5. 不可见性：HOC相当于在原有组件外层再包装一个组件，不能知道外层包装的是什么

Render Props

• 优势

  • 可以解决HOC上述缺点

• 缺陷

  1. 使用繁琐：
  2. 嵌套过深：虽然摆脱了组件多层嵌套，但是转化为了函数回调的嵌套

React Hooks

• 优势

  • 简洁：React Hooks解决了HOC和Render Props的嵌套问题，更加简洁
  • 解耦：React Hooks可以更方便地把UI和状态分离，做到更彻底的解耦
  • 组合：Hooks中可以引用另外的hooks
  • 函数友好：React Hooks为函数而生，从而解决了组件几大问题
    • this指向容易错误
    • 分割在不同生命周期中的逻辑使得代码难以理解和维护
    • 代码复用成本高（高阶组件容易使代码量剧增）

• 缺陷

  1. 额外学习成本：
  2. 写法上有限制，不能出现在条件、循环中
  3. 破坏了PureComponent、React.memo前比较性能优化效果（为了取最新的props和state，每次render() 都要重新创建事件处理函数）
  4. 在闭包场景可能会引用到旧的 state、 props值
  5. 内部实现上不直观
  6. React.emeo并不能完全替代shouldComponentUpdate（因为拿不到 state change，只针对props change）