react 生命周期
挂载阶段
React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。
constructor: 所有关于组件自身的状态的初始化工作都会放在这里面去做static getDerivedStateFromProps(nextProps, prevState): 一个静态方法，所以不能在这个函数里面使用 this，这个函数有两个参数 props 和 state，分别指接收到的新参数和当前的 state 对象，这个函数会返回一个对象用来更新当前的 state 对象，如果不需要更新可以返回 null。该函数会在挂载时，接收到新的 props，调用了 setState 和 forceUpdate 时被调用
UNSAFE_componentWillMount：组件挂载开始之前，也就是在组件调用render方法之前调用。进行组件的启动工作，例如 Ajax 数据拉取、定时器的启动。render:React 中最核心的方法，一个组件中必须要有这个方法返回的类型有以下几种：
- 原生的 DOM，如 div
- React 组件
- Fragment（片段）
- Portals（插槽）
- 字符串和数字，被渲染成 text 节点
- Boolean 和 null，不会渲染任何东西
render 函数是纯函数，里面只做一件事，就是返回需要渲染的东西，不应该包含其它的业务逻辑，如数据请求，对于这些业务逻辑请移到 componentDidMount 和 componentDid Update 中
componentDidMount：组件挂载完成以后，也就是 DOM 元素已经插入页面后调用。
更新阶段
除了挂载阶段，还有一种“更新阶段”就是 setState 导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程，这是一个组件的变化过程。
-
UNSAFE_componentWillReceiveProps(nextProps)：组件从父组件接收到新的props之前调用。 -
static getDerivedStateFromProps -
shouldComponentUpdate(nextProps, nextState)：你可以通过这个方法控制组件是否重新渲染。如果返回false组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。 -
UNSAFE_componentWillUpdate()：组件开始重新渲染之前调用。 -
render() -
getSnapshotBeforeUpdate(prevProps, prevState):这个方法在 render 之后，componentDidUpdate 之前调用，有两个参数 prevProps 和 prevState，表示之前的属性和之前的 state，这个函数有一个返回值，会作为第三个参数传给 componentDidUpdate，如果你不想要返回值，请返回 null，不写的话控制台会有警告。 -
componentDidUpdate()：组件重新渲染并且把更改变更到真实的 DOM 以后调用。
卸载阶段
componentWillUnmount：组件对应的 DOM 元素从页面中删除之前调用。组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在这里面去做。
参考：