React是单向数据流

组件初始化(initialization)阶段：

constructor // 构造器 设置组件的初始化状态

组件的挂载(Mounting)阶段

componentWillMount // 即将载入dom
组件即将被渲染到页面之前触发，此时可以进行开启定时器、向服务器发送请求等操作

render
组件渲染

componentDidMount // 已经载入dom 重要！！！！
组件已经被渲染到页面中后触发：此时页面中有了真正的DOM的元素，可以进行DOM相关的操作

组件的更新(update)阶段：

componentWillReceiveProps // 即将接受参数
组件接收到属性时触发

shouldComponentUpdate // 判断是否允许组件更新 true允许组件更新，false阻止组件更新
当组件接收到新属性，或者组件的状态发生改变时触发。组件首次渲染时并不会触发
一般我们通过该函数来优化性能

componentWillUpdate // 即将更新
组件即将被更新时触发

render
组件渲染

componentDidUpdate // 已经更新
组件被更新完成后触发。页面中产生了新的DOM的元素，可以进行DOM操作

销毁阶段：

componentWillUnmount // 即将被销毁
组件被销毁时触发。这里我们可以进行一些清理操作，例如清理定时器，取消Redux的订阅事件 和 清除componentDidMount中手动创建的DOM元素等等。

---

React v16.4 的生命周期

React V16中 推出了Fiber，如果开启 异步render，那么 React Fliber 将在两个阶段：
第一个阶段Reconciliation Phase和第二阶段Commit Phase.

在第一阶段Reconciliation Phase，React Fiber会找出需要更新哪些DOM，这个阶段是可以被打断的；但是到了第二阶段Commit Phase，那就一鼓作气把DOM更新完，绝不会被打断。

与此相关的，就牵扯到了 生命周期函数。所以在render前，可能会多次调用生命周期函数。具体如下：

第一阶段可能会调用下面这些生命周期函数，说是“可能会调用”是因为不同生命周期调用的函数不同。

componentWillMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate

下面这些生命周期函数则会在第二阶段调用。

componentDidMount
componentDidUpdate
componentWillUnmount

React Fiber与生命周期函数

新的生命周期

getDerivedStateFromProps和getSnapshotBeforeUpdate

getDerivedStateFromProps

static getDerivedStateFromProps(props, state) 在组件创建时和更新时的render方法之前调用，它应该返回一个对象来更新状态，或者返回null来不更新任何内容。

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate() 被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。