主要变化概览

变化可概括为的观点是。废弃 个 will 钩子，新增 个钩子，保留主要流程不变。

变更类型	旧版钩子	新版替代	说明
废弃	componentWillMount		挂载前可能执行多次不安全。
	componentWillReceiveProps		用静态方法替代，避免副作用。
	componentWillUpdate		更新前 DOM 快照捕获。

---

新增静态方法，根据 props 派生 state。

获取更新前 DOM 状态，返回值传给

---

保留 constructor constructor 初始化状态。

  

  

         

旧版生命周期

MOUNT 阶段

constructor> componentWillMount> render> componentDidMount
}

MIDDLE 更新阶段

setState. props 变化时 . forceUpdate.

触发方式

``

`

/div

javascript

---

至于使用者痛点一。多次执行导致副作用难以追踪

在旧版中，componentWillMountcomponentWillReceiveProps 和 componentWillUpdate 在 Fiber 中可能被调用多次从而产生重复请求、重复渲染等副作用。至于例如，

javascript // ❌ 错误示例：会被重复触发 class MyComp extends React.Component { componentWillMount { fetch.n);} }

至于使用者痛点二。维护成本升高

每当升级到 React 17/18 时都需要逐个检查并重构这些生命周期方法，否则会导致运行时警告或意外行为。

说到使用者痛点三。学习曲线陡峭

新手很难把握 Render Phase 与 Commit Phase 的区别，导致不恰当地把副作用写进 Render 阶段。

---

MIDDLE 更新阶段——原始顺序示例：

| | 设置 |

ID='order2'>触发方式 ) | shouldComponentUpdate | componentWillUpdate | render | componentDidUpdate

 对象
|
参数
|

---

---

LIFECYCLE 新版：迁移后的完整顺序图示：

constructor
→ getDerivedStateFromProps
→ render
→ componentDidMount
--- update ---
getDerivedStateFromProps
→ shouldComponentUpdate
→ render
→ getSnapshotBeforeUpdate
→ componentDidUpdate
--- unmount ---
componentWillUnmount
\end{lstlisting}

新旧生命周期对比总表



生命周期名称
状态 
旧版行为说明 / 推荐位置 / 常见坑洞 *
新版行为说明 / 推荐位置 / 常见坑洞 *

---