react 渲染周期分析

React渲染周期是指组件从创建、更新到卸载过程中经历的一系列阶段。这个过程可以分为以下几个关键步骤：

1. **挂载阶段** (Mounting)：
- **构造函数（Constructor）**：组件实例化时创建，并在此初始化状态和其他属性。
- **生命周期方法 `getDerivedStateFromProps` (新版本)**：首次渲染前执行，用于基于新的props计算状态的更改。
- **渲染方法 `render`**：第一次生成DOM元素，返回虚拟DOM。
- **`mountComponent`**: 调用实际的DOM操作将虚拟DOM转换成真实DOM。
- **`componentDidMount`**：DOM已挂载完毕，可用于执行副作用操作（如数据获取、订阅事件等）。

2. **更新阶段** (Updating)：
- **接收新props和state**：当props或state改变时，组件会触发更新。
- **`getDerivedStateFromProps`**（同上，更新时可能执行）。
- **比较旧虚拟DOM与新虚拟DOM**：如果它们不同，React会计算差异并创建一个新的虚拟DOM树。
- **`shouldComponentUpdate`**：可选优化步骤，判断是否需要真正地更新组件，避免不必要的渲染。
- **`render`**：如果需要更新，再次执行渲染方法。
- **`getSnapshotBeforeUpdate`**：在DOM更新之前，执行最后一次读取DOM的状态。
- **` componentDidUpdate`**: DOM更新完成后的回调，可以在这个时候做依赖更新的工作（如更新DOM、清除定时器等）。

3. **卸载阶段** (Unmounting)：
- **` componentWillUnmount`**: 组件即将卸载前执行，清理资源（如取消订阅、清除定时器等）。
- **`unmountComponent`**: React移除组件对应的DOM节点。

理解这些阶段有助于优化性能，减少不必要的渲染，并处理好组件间的通信和状态管理。