hooks的优缺点

• 跨组件复用: 其实 render props / HOC 也是为了复用，相比于它们，Hooks 作为官方的底层 API，最为轻量，而且改造成本小，不会影响原来的组件层次结构和传说中的嵌套地狱；
• 相比而言，类组件的实现更为复杂
  • 不同的生命周期会使逻辑变得分散且混乱，不易维护和管理；
  • 时刻需要关注this的指向问题；
  • 代码复用代价高，高阶组件的使用经常会使整个组件树变得臃肿；
• 状态与 UI 隔离: 正是由于 Hooks 的特性，状态逻辑会变成更小的粒度，并且极容易被抽象成一个自定义 Hooks，组件中的状态和 UI 变得更为清晰和隔离。

---

优点

• 简洁: React Hooks解决了HOC和Render Props的嵌套问题,更加简洁 – 状态共享
• 解耦: React Hooks可以更方便地把UI和状态分离,做到更彻底的解耦
• 组合: Hooks 中可以引用另外的 Hooks形成新的Hooks,组合变化万千
• 函数友好: React Hooks为函数组件而生,从而解决了类组件的几大问题:
  • this 指向容易错误
  • 分割在不同声明周期中的逻辑使得代码难以理解和维护
  • 代码复用成本高(高阶组件容易使代码量剧增)

缺陷

• 额外的学习成本(Functional Component 与 Class Component 之间的困惑)
• 写法上有限制(不能出现在条件、循环中)，并且写法限制增加了重构成本
• 破坏了PureComponent、React.memo浅比较的性能优化效果(为了取最新的props和state，每次render()都要重新 创建事件处函数)
• 在闭包场景可能会引用到旧的state、props值
• 内部实现上不直观(依赖一份可变的全局状态，不再那么“纯”)
• React.memo并不能完全替代shouldComponentUpdate(因为拿不到 state change，只针对 props change)