组件状态

  • Mounting：已插入真实 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实 DOM

组件生命周期钩子

  • componentWillMount 在渲染前调用,在客户端也在服务端。

  • componentDidMount 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

  • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

  • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
    可以在你确认不需要更新组件时使用。

  • componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

  • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

  • componentWillUnmount 在组件从 DOM 中移除的时候立刻被调用。

异步数据请求应在哪些生命周期里调用

  • 通过网络请求获取数据或订阅数据更新 - componentDidMount()
    • 首次挂载时执行
    • 不会重复请求或订阅数据更新
    • 无需条件不容易触发重复渲染
  • 有条件地通过网络请求数据 - componentDidUpdate(prevProps, prevState, snapshot)
    • 可对比更新前后的 props 或 states
    • 可以设置条件当且仅当条件满足时，通过网络请求数据，避免触发重复渲染
  • 取消网络请求或者清除在 componentDidMount() 中创建的订阅 - componentWillUnmount()

为什么要用 React Hook 代替拥有生命周期的类组件

React Hook 是 React 16.8 的新增特性，开发者可以在不编写 Class 的情况下使用 State 以及其他的 React 特性，React Hook 使得相似功能的代码在物理上可以更接近方便代码理解，同时更利于代码复用。

类组件的弊端

  • 组件之间复用状态逻辑很难
    • React 没有提供将可复用性行为“附加”到组件的途径
    • 使用 render props 和 高阶组件
      • 需要重新组织组件结构，使得代码难以理解
      • 形成“嵌套地域”，难以调试和维护
  • 复杂组件变得难以理解
    • 组件被状态逻辑和副作用充斥
    • 不相关逻辑被放在同一生命周期，相关逻辑被分散在不同生命周期
      • componentDidMount/componentDidUpdate 获取数据
      • componentDidMount 可能还包含事件监听，需在 componentWillUnmount 清除
    • 大量的状态逻辑，许多人使用状态管理库，组件复用和调试都比较困难
  • 难以理解的类组件
    • 大量的 this 绑定，较高学习成本，区分函数组件和类组件的使用场景
    • 类组件会无意中鼓励开发者使用一些让 Prepack 等组件预编译优化措施无效的方案
    • 类组件不能被很好的压缩，热重载不稳定，实例化类组件有轻微额外性能消耗
  • 有限的是否渲染控制
    • 使用 PureComponent 执行一层浅比较 props 或 state，值变化时渲染
    • 使用 shouldComponentUpdate 函数
      • 手动比较前后 props 或 state，返回 true 渲染，false 不渲染
      • 若 state 为对象，使用不可变对象，简化并加速比较
    • 在 setState 前设置判断条件，满足条件后再 setState

React Hook 解决的问题

  • 提高组件复用
    • Hook 在无需修改组件结构的情况下，复用状态逻辑，共享 Hook 变得更便捷
  • 简化组件
    • Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）
    • 非按照生命周期划分，可以使用 Reducer 来管理组件内部状态，使其更加可预测
  • 函数组件代替类组件
    • Hook 在不使用类组件的情况下使用 State 以及其他的 React 特性
    • Hook 改造类组件为函数组件，容易理解 this 和学习，便于预编译等优化措施
    • Hook 拥抱函数式声明式编程，而无需学习复杂的函数式或响应式编程技术
  • 丰富的更细粒度的是否渲染控制
    • 使用 React.memo 比较 props 再渲染组件
      • 不使用第二参数时，一层浅比较 props，变化时渲染
      • 使用第二参数时，手动比较前后的 props，返回 false 渲染，true 不渲染
    • 使用 useMemo 指定依赖，细粒度渲染组件
      • 使用第二参数，传入依赖数组，当数组中的值发生变化时，更新返回值
      • 通常包裹函数式组件的返回值，指定依赖的 props 或 state 的具体值
      • 包裹任意需要复杂计算的函数，指定依赖的变量。能在同一组件中部分和多次使用
    • 使用 useCallback 避免函数重复创建引起渲染
      • 当函数式组件重新更新时，内部声明的函数可能会被重复创建
        • 将这些函数作为 props 传入的子组件会重复渲染
        • 使用 useCallback 包裹函数，传入空数组，总是返回相同函数来避免重复创建引起的渲染

useEffect useLayoutEffect 与生命周期的对应关系

  • useLayoutEffect
    • 执行时机是组件挂载或更新之后，浏览器执行绘制之前
      • 与 componentDidMount + componentDidUpdate 一致
    • 支持返回清除函数，函数执行时机是组件卸载之前
      • 与 componentWillUnmout 一致
  • useEffect
    • 执行时机是组件挂载或更新之后，浏览器完成布局和绘制之后，在一个延迟事件中被调用
      • 与 componentDidMount + componentDidUpdate 不同
    • 支持返回清除函数，函数执行时机是组件卸载之前
      • 与 componentWillUnmout 一致

两者都适用于在函数组件主体内，即 React 渲染阶段改变 DOM，添加订阅，设置定时器，记录日志以及执行其他包含副作用的操作。优先使用 useEffect 避免阻塞视觉更新，只在需要读取 DOM 布局，在浏览器绘制前，同步触发重渲染的场景使用 useLayoutEffect 。