⚡ 30 秒速记

• 类生命周期先按挂载、更新、卸载理解
• 再区分渲染计算与提交后的工作
• 属性相关旧钩子不等于值真的变了
• 副作用放到可靠的提交边界
• 历史方法与当前接口按版本区分

生命周期调整的重点，是把可能重复的界面计算和真正发生的外部操作分开。 类组件的构造、渲染与挂载完成不是同一阶段，更新时也不能看见某个钩子被调用就断言属性值已经变化。请求、订阅和节点操作应放在明确的提交后边界，并配好清理。学习旧生命周期有助于理解演进，实际维护时仍要检查所用版本的支持与行为。

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

拆解 React 生命周期：从 React 15 说起

在 React 15 中，大家需要关注以下几个生命周期方法：

constructor()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillMount()
componentWillUpdate()
componentDidUpdate()
componentDidMount()
render()
componentWillUnmount()

如果你接触 React 足够早，或许会记得还有 getDefaultProps 和 getInitState 这两个方法，它们都是 React.createClass() 模式下初始化数据的方法。由于这种写法在 ES6 普及后已经不常见，这里不再详细展开

这些生命周期方法是如何彼此串联、相互依存的呢？这里我为你总结了一张大图：

接下来，我就围绕这张大图，分阶段讨论组件生命周期的运作规律。在学习的过程中，下面这个 Demo 可以帮助你具体地验证每个阶段的工作流程：