为什么 React 要引入 Hooks

#react

目录

1. 总结

  • this 指向问题
  • 复杂的生命周期问题
    • 应该按照关注点而不是时间点来组织代码
  • 更好的逻辑复用和更好的组织代码
    • 方便重构与抽离
    • 相关的逻辑放在一起
  • 内聚性原则

2. 之前的问题

  • this 指向问题
  • 较多生命周期，且划分并不符合“内聚性”原则，
    • 例如 setInterval 和 clearInterval 这种具有强关联的逻辑被拆分在不同的生命周期方法中
  • 复用问题：
    • 数据共享或功能复用，从最早之前的 mixin / 高阶组件 、或者到 Render Props
  • 解决数据共享或功能复用
    • 从最早之前的 mixin / 高阶组件 、或者到 Render Props

3. 类组件的问题

  • 类组件中的 this 指向问题容易造成困扰
  • 生命周期方法导致相关逻辑被分散到不同方法中
  • 复杂组件变得难以理解和维护
  • 类组件难以压缩和优化

4. 更好的逻辑复用 和 更好的组织代码

  • 在 Hooks 之前，复用状态逻辑主要依赖 HOC（高阶组件）和 render props
    • 这些模式需要重构组件层级，导致代码难以理解
  • Hooks 允许在不改变组件层级的情况下复用状态逻辑
    • 可以把相关的逻辑抽取到自定义 Hook 中

5. 更容易理解的生命周期

  • useEffect 统一了生命周期的概念
  • 按照关注点而不是时间点来组织代码
  • 更直观地处理副作用