React渲染周期与React组件生命周期有什么关联？

核心结论 #

React渲染周期和组件生命周期不是完全独立的概念，组件生命周期本质上是React渲染周期在组件层面暴露给开发者的可介入回调钩子。

二者的具体关联 #

React渲染周期是框架底层运行的全局通用流程，每次状态更新触发的全流程固定分为三个阶段：

• 渲染阶段：递归计算所有受更新影响的组件的最新虚拟DOM输出
• 协调阶段：对新旧虚拟DOM树做Diff对比，标记出所有需要更新、新增、删除的DOM节点
• 提交阶段：把协调阶段标记的所有修改一次性同步到真实DOM上，完成视图更新

而我们常用的组件生命周期钩子，就是渲染周期执行到不同节点时主动触发的回调：

• 组件首次挂载的提交阶段完成后，会触发componentDidMount
• 组件更新流程的渲染阶段执行前，会触发shouldComponentUpdate供开发者判断是否要跳过当前组件的重渲染；提交阶段完成后会触发componentDidUpdate
• 组件被移除的提交阶段执行前，会触发componentWillUnmount供开发者做定时器、事件监听的清理操作

开发者需要关心React渲染周期吗？ #

完全不需要关心的说法是错误的，分场景判断即可：

• 普通业务逻辑开发只需要用到组件生命周期（或函数组件对应的Hooks）就能完成需求，不需要深入了解渲染周期的底层实现细节
• 但如果遇到页面卡顿、异常重复渲染、状态不同步等问题，渲染周期的知识是排查问题的基础：比如为什么修改一个状态会触发无关组件重渲染、为什么useEffect中拿到的状态是旧值，这类问题只靠生命周期的表层知识很难定位根因
• 即使不需要深挖源码，掌握基础的渲染周期逻辑，也能帮你写出性能更高、Bug更少的React代码。

内容的提问来源于stack exchange，提问作者Sean