React - 生命周期概述

[jtwang7]

• 官方文档:组件的生命周期
• 生命周期图谱

概念

生命周期概念：react 组件从创建到销毁的过程。
生命周期函数：react 组件到达生命周期的某些特定阶段所执行的方法。

阶段

挂载/更新/销毁

挂载阶段：组件实例初始创建并插入到 DOM 中

1. constructor(): 组件挂载前最先执行 (初始化内部 state; 为事件处理函数绑定实例)。
2. static getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它基于props返回一个对象来更新 state，如果返回 null 则不更新任何内容。简单理解就是在 render 前根据 props 预处理 state。
3. render(): 类组件唯一必须实现的方法，将组件渲染到真实DOM上。
4. componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用 (依赖DOM节点的初始化操作；网络请求；添加订阅)。

更新阶段：当组件的 props 或 state 发生变化时触发组件重渲染。

1. static getDerivedStateFromProps()
2. shouldComponentUpdate(): 组件重渲染的默认行为是 state 或 props 每次发生变化组件都会重新渲染，而 shouldComponentUpdate() 可以通过返回 Boolean 值来人为控制组件是否重渲染。
3. render()
4. getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。
5. componentDidUpdate(): 在更新后会被立即调用。

卸载阶段：

1. componentWillUnmount(): 在组件卸载及销毁之前直接调用，执行一些清理操作(例如清除计时器，取消网络请求，清除订阅等)。

错误处理：

1. static getDerivedStateFromError()
2. componentDidCatch()

Render阶段/Pre-commit阶段/Commit阶段

Render阶段：生成真实DOM的阶段，纯净且不包含副作用。可能会被 React 暂停，中止或重新启动。

• constructor()
• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()

Pre-commit阶段：提交真实DOM之前的阶段，可以读取 DOM。

• getSnapshotBeforeUpdate()

Commit阶段：React接收并更新新的 DOM 和 refs 的阶段，可以使用 DOM，运行副作用，安排更新。

• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()