Question

组件生命周期有三个不同的生命周期阶段：

1. Mounting: 组件已准备好挂载到浏览器的 DOM 中. 此阶段包含来自 constructor() , getDerivedStateFromProps() , render() , 和 componentDidMount() 生命周期方法中的初始化过程。

2. Updating: 在此阶段，组件以两种方式更新，发送新的属性并使用 setState() 或 forceUpdate() 方法更新状态. 此阶段包含 getDerivedStateFromProps() , shouldComponentUpdate() , render() , getSnapshotBeforeUpdate() 和 componentDidUpdate() 生命周期方法。

3. Unmounting: 在这个最后阶段，不需要组件，它将从浏览器 DOM 中卸载。这个阶段包含 componentWillUnmount() 生命周期方法。

值得一提的是，在将更改应用到 DOM 时，React 内部也有阶段概念。它们按如下方式分隔开：

1. Render 组件将会进行无副作用渲染。这适用于纯组件（Pure Component），在此阶段，React 可以暂停，中止或重新渲染。

2. Pre-commit 在组件实际将更改应用于 DOM 之前，有一个时刻允许 React 通过 getSnapshotBeforeUpdate() 捕获一些 DOM 信息（例如滚动位置）。

3. Commit React 操作 DOM 并分别执行最后的生命周期： componentDidMount() 在 DOM 渲染完成后调用, componentDidUpdate() 在组件更新时调用, componentWillUnmount() 在组件卸载时调用。
   React 16.3+ 阶段 (也可以看 交互式版本 )

React 16.3 之前