一、生命周期阶段
官方文档：https://zh-hans.legacy.reactjs.org/docs/react-component.html
React组件生命周期可分为三个阶段：挂载、更新、卸载
-
挂载：当组件实例被创建并插入 DOM 中时。其生命周期调用顺序如下：
constructor()- static getDerivedStateFromProps()
render()componentDidMount()
-
更新：当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
- static getDerivedStateFromProps()
- shouldComponentUpdate()
render()- getSnapshotBeforeUpdate()
componentDidUpdate()
-
卸载：当组件从 DOM 中移除时
componentWillUnmount()
组件生命周期图谱：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
- 常用生命周期图谱：
- 完整生命周期图谱：
二、常用生命周期方法
| 方法 | 触发时机 | 作用 | 说明 |
|---|---|---|---|
| constructor() | 组件挂载之前，会调用它的构造函数 | 1、初始化state 2、为事件处理程序绑定实例 | 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数 |
| render() | 每次组件渲染都会触发 | 渲染UI | 1、render() 方法是 class 组件中唯一必须实现的方法 2、render()方法必须有返回值 |
| componentDidMount() | 组件挂载后（插入 DOM 树中）立即调用 | 1、发送网络请求 2、DOM操作 | 这个方法是比较适合添加订阅的地方 |
| componentDidUpdate() | 更新后会被立即调用 | 1、发送网络请求 2、DOM操作 | 1、如果这里要调用 setState()，必须放在一个如 if 的条件语句中，否则会导致死循环 2、语法：componentDidUpdate(prevProps, prevState, snapshot) |
| componentWillUnmount() | 组件卸载及销毁之前直接调用 | 执行清理工作（如：移除监听、清理定时器、取消订阅等） |
三、不常用生命周期方法
| 方法 | 触发时机 | 作用 | 说明 |
|---|---|---|---|
| shouldComponentUpdate() | 当 props 或 state 发生变化时，在 render() 执行之前被调用 | 判断 React 组件的输出是否受当前 state 或 props 更改的影响 | 1、返回布尔值，默认 true 2、语法：shouldComponentUpdate(nextProps, nextState) 3、此方法仅作为性能优化的方式而存在 |
| getDerivedStateFromProps() | 在调用 render() 之前调用，并且在初始挂载及后续更新时都会被调用 | 此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props | 1、返回一个对象来更新 state，如果返回 null 则不更新任何内容 2、语法：static getDerivedStateFromProps(props, state) 3、此方法无权访问组件实例 |
| getSnapshotBeforeUpdate() | 在最近一次渲染输出（提交到 DOM 节点）之前调用 | 它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置） | 1、返回 snapshot 的值（或 null） 2、语法：getSnapshotBeforeUpdate(prevProps, prevState) |
此外，涉及错误边界的两个方法getDerivedStateFromError()和componentDidCatch()请参考官方文档