react生命周期详解

在 React 中，对于每一次由状态改变导致页面视图的改变，都会经历两个阶段：render 阶段、commit 阶段。

只有 class 组件才有生命周期，因为 class 组件会创建对应的实例，而函数组件不会。组件实例从被创建到被销毁的过程称为组件的生命周期。

由 class 组件创建的实例具有生命周期，它的 render 函数在 render 阶段执行，并在此阶段进行 DOM 节点的 diff（diff 算法就是在此阶段进行的），找出需要改变的 DOM 操作。然后在 commit 阶段将对应的 DOM 操作提交至视图中。

而 class 组件实例的所有生命周期函数，都会在 render 阶段和 commit 阶段执行。

注：红色为 React 17 已经废弃的生命周期钩子，绿色为新增的生命周期钩子

 在首次渲染页面时，会调用 Mount 相关生命周期钩子；在之后的页面渲染中，会调用 Update 相关生命周期钩子。所以与 Mount 相关的生命周期钩子只会被调用一次。

render 阶段会执行众多生命周期钩子，例如：在首次渲染时执行