react 生命周期 图解

React 的生命周期图解是一个描述组件从创建、更新到卸载整个生命周期过程的概念图，它可以帮助开发者理解何时执行哪些操作。主要分为以下几个阶段：

1. **挂载前 (Mounting)**:
- `constructor()`: 初始化函数，可以设置状态（state）和绑定事件处理函数。
- `static getDerivedStateFromProps(props, state)`: 首次接收 props 更新时运行，用于基于新的props计算新状态。
- `shouldComponentUpdate(nextProps, nextState)`: 在渲染之前检查是否需要更新，默认会一直更新，除非返回 false。

2. **挂载 (Mounting) 和更新 (Updating)**:
- `render()`: 组件的核心部分，返回虚拟DOM。
- `getSnapshotBeforeUpdate(prevProps, prevState)`: 渲染前获取节点快照（如滚动位置），通常不做实际渲染。
- `componentDidMount()`: 成功渲染后立即执行，常用于初始化数据请求或DOM交互。

3. **更新 (Updating)**:
- `getDerivedStateFromProps()`: 每次接收到新的props时都会运行，用于修改状态。
- `shouldComponentUpdate()`: 决定是否再次调用 render()，如果返回 true，则继续。
- `render()`: 根据最新的状态和 props 生成新的虚拟 DOM。
- `getSnapshotBeforeUpdate()`: 同上，更新前获取快照。
- `componentDidUpdate(prevProps, prevState, snapshot)`: 更新完成后执行，可用于更新DOM或发送网络请求。

4. **卸载 (Unmounting)**:
- `componentWillUnmount()`: 组件即将卸载前执行，常用于清理资源（如清除定时器或取消订阅）。