React：生命周期

React 生命周期分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）

挂载阶段（Mounting）

一般会在这个阶段做一些数据获取、事件监听、向服务端发送请求、事件绑定等操作

constructor()
初始化状态（state）和绑定方法。通常在构造函数中完成初始数据的设置。

static getDerivedStateFromProps(props, state)
静态方法
时机：在 render 前调用，用于根据props更新state。必须返回一个对象或null。

render()
返回JSX结构，负责组件的渲染逻辑。必须为纯函数，不直接修改状态或与浏览器交互。

componentDidMount()
组件挂载完成后触发。适合执行DOM操作、网络请求或订阅事件等副作用。

---

更新阶段（Updating）

static getDerivedStateFromProps(props, state)
与挂载阶段相同，在每次更新前调用。

shouldComponentUpdate(nextProps, nextState)
通过返回true或false决定是否重新渲染。用于性能优化。

render()
重新渲染组件。

getSnapshotBeforeUpdate(prevProps, prevState)
时机：在 render 之后执行
目的：获取组件更新前的信息
在DOM更新前捕获信息（如滚动位置）。返回值传给componentDidUpdate。

componentDidUpdate(prevProps, prevState, snapshot)
时机：组件更新完成后执行，可操作DOM或发起网络请求。

---

卸载阶段（Unmounting）

componentWillUnmount()
时机：组件卸载前调用，用于清理定时器、取消网络请求或移除事件监听。

---

废弃的生命周期方法

部分方法（如componentWillMount、componentWillReceiveProps）已被标记为废弃，推荐使用替代方案（如getDerivedStateFromProps）。

函数组件的替代方案

通过useEffect Hook模拟生命周期行为：

• useEffect(() => {}, []) 替代componentDidMount（依赖项为空数组）。
• useEffect(() => { return () => {} }) 替代componentWillUnmount（返回清理函数）。
• useEffect(() => {}, [deps]) 替代componentDidUpdate（依赖项变化时触发）。