前言

生命周期指 React 组件从装载至卸载的全过程，这个过程内置多个函数供开发者在组件的不同阶段执行需要的逻辑。

其实目前一般很少会关注到 React 生命周期，虽然类组件和生命周期目前依然可以使用，但自从 React 16.8 推出 Hooks 之后，函数组件和 Hooks 成为了主流推荐的方式。

并且 React 16.3 版本已经明确了将在 17 版本中废弃componentWillMount、componentWillUpdate和componentWillReceiveProps这三个生命周期函数，并引入两个新的生命周期（static getDerivedStateFromProps、getSnapshotBeforeUpdate）来取代。

React 一次完整的状态更新，一共分为 2 个阶段、 4 个生命周期。

  • 2 个阶段：

    • render 阶段：包括 Diff 算法，计算出状态变化
    • commit 渲染阶段：ReactDOM 渲染器，将状态变化渲染在视图中

  • 4 个生命周期：

    • Mount（第一次挂载）
    • Update（更新）
    • Unmount（卸载）
    • Error（子项发生错误）

生命周期

更清晰了解生命周期的阶段图表 React Lifecycle Methods Diagram

生命周期

状态组件

其中状态组件主要通过 3 个生命周期阶段来管理，分别是 挂载阶段（MOUNT），更新阶段（UPDAT）和卸载阶段（UNMOUNT）。

过程 生命周期 含义
挂载阶段
Mount
 constructor 在 React 组件挂载之前，会调用它的构造函数。
static getDerivedStateFromProps 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
render render 方法是 class 组件中唯一必须实现的方法，返回 JSX DOM 元素
componentDidMount 在组件挂载后（插入 DOM 树中）立即调用。
更新阶段
Update
 static getDerivedStateFromProps 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 `React` 组件的输出是否受当前 state 或 props 更改的影响。
shouldComponentUpdate(nextProps, nextState) 当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。可以返回 true（需要更新），false（不更新）
render render 方法是 class 组件中唯一必须实现的方法，返回 JSX DOM 元素
getSnapshotBeforeUpdate 在最近一次渲染输出（提交到 DOM 节点）之前调用。在 DOM 更新之前调用，可以监听一些信息，并且返回值当作 componentDidUpdate 的第三个参数。
componentDidUpdate(prevProps, prevState, snapshot) 在更新后会被立即调用。
销毁阶段
Unmount
 componentWillUnmount 组件销毁前调用。

捕获异常

在渲染过程中发生错误时会被触发。

过程 生命周期 含义
捕获异常
Error Handle
 static getDerivedStateFromError 在 React 组件挂载之前，会调用它的构造函数。
componentDidCatch 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。