⚡ 30 秒速记

• 可重试渲染要求预提交逻辑保持纯净
• 派生状态是计算，不能顺手发请求
• getSnapshotBeforeUpdate 读取提交前信息
• componentDidUpdate 消费快照并处理后续工作
• 能直接从属性计算的，别再复制进状态

新的生命周期划分让每类工作有更明确的位置：纯计算留在渲染，外部操作围绕提交。 渲染阶段可能被重新执行，旧的预更新钩子里发请求或修改页面就容易重复。派生状态方法只负责计算，快照方法在页面更新前读取必要信息，再交给更新完成后的逻辑处理。不是每次收到属性都要复制成状态，很多展示值直接计算更简单可靠。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

进化的生命周期方法：React 16 生命周期工作流详解

来源于：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram

在React 16.4之后，React 生命周期在之前版本的基础上又经历了一次微调，其实就调在了更新过程的getDerivedStateFromProps 这个生命周期上

这里我先提供一个 Demo，它将辅助你理解新的生命周期。Demo 代码如下