⚡ 30 秒速记

• 核心判断：生命周期是框架围绕创建、挂载、更新和卸载安排用户副作用的时序契约
• 原理主线：围绕 「拆解 React 生命周期：从 Reac」、「Mounting 阶段：组件的初始化渲染」、「Updating 阶段：组件的更新」 建立输入、状态变化与输出之间的因果关系
• 文章范围：解析了React 16对生命周期方法的变更原因，结合React 15与React 16的生命周期对比，帮助开发者理解新旧生命周期的区别、变更动机及对实际开发的影响，适合希望深入掌握React原理的前端工程师阅读。
• 边界与代价：父子组件顺序、异步调度和 React 并发渲染会让“调用过函数”不等于“已经提交到界面”
• 工程落地：副作用必须放在语义匹配的阶段，并在重跑、卸载或依赖变化时正确清理

React 16 调整生命周期，是为了让组件逻辑适应渲染阶段与提交阶段分离，并减少旧式预更新钩子带来的时序误解。 render 只负责计算内容，不应操作真实 DOM；挂载或更新后的 DOM 操作应放在 componentDidMount、componentDidUpdate 等提交后阶段。旧的 componentWillReceiveProps 也不是只在属性值变化时触发，父组件更新就可能调用它。工程上应把历史生命周期用于理解演进，当前入口和兼容策略则按实际 React 版本处理。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文若分析 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 普及后已经不常见，这里不再详细展开