首先，React生命周期分为三个阶段：挂载、渲染和卸载。由三种不同的形式组成：render渲染、props改变和state改变。由两种过程组成：挂载卸载过程、更新过程。
下面是React16.x版本之前的生命周期
旧生命周期
1.挂载卸载过程
1.1.constructor()
当组件被实例化之后，即使不手写构造函数，react会自动创建并执行构造函数，并且构造函数是最先执行的。如果手写了构造函数，就必须手动调用父类的构造函数来实例化子类，否则会导致this指向错误。手写构造函数的目的就是为了给父类也就是this添加属性，即使不添加任何属性，react也会自动创建state，只不过此时的state为null
1.2.componentWillMount()
此生命周期函数代表组件已经经历了constructor()初始化数据之后，但是组件未挂载，也就是还未渲染DOM 的时候。
1.3.componentDidMount()
此生命周期函数代表组件已经被挂载完成，DOM节点已经渲染完成，可以在此阶段请求数据接口，返回数据之后会重新将数据渲染到组件中
1.4.componentWillUnmount ()
此过程完成组件的卸载与数据的销毁
2.更新过程
2.1.componentWillReceiveProps (nextProps)
父组件中改变了props传值时触发的函数, 但是此函数触发有条件： 一、组件初次加载时不调用此函数 二、当组件接受了新的props时才调用此函数 三、当父组件进行更新以及父组件重新render（不管父组件的状态有没有改变）被调用后执行
2.2.shouldComponentUpdate(nextProps,nextState)
此函数表示组件接收到新的props或者state时调用，需要注意的是，初次渲染此函数不会执行。并且此函数返回bool值，返回值为true时，就会更新dom（使用diff算法更新）,当返回值为false时就会阻止更新
此生命周期函数可以起到性能优化的作用，因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断
2.3.componentWillUpdate (nextProps,nextState)
此函数表示组件加载时不调用，只有在组件将要更新时才调用，此时可以修改state
2.4.render()
react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
2.5.componentDidUpdate(prevProps,prevState)
此函数表示组件数据更新已经完成,但是组件加载时不调用，组件更新完成后调用，需要注意的是此函数在render后执行
新生命周期
React生命周期新引入了两个生命周期函数：
getDerivedStateFromProps、getSnapShotBeforeUpdate，代替在17.x版本中会废弃的生命周期方法：componentWillMount()、componentWillReceiveProps()、componentWillUpdate()。16.x中新增UNSAFE前缀为别名的三个函数UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()，并在17.x版本中会保留 UNSAFE前缀为别名的三个函数getDerivedStateFromProps()无论是Mounting还是Updating，也无论是因为什么引起的Updating，全部都会被调用getSnapshotBeforeUpdate()被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()
结合实例可以更直观的理解react新生命周期
import React, { Component } from 'react'
export default class NewReactComponent extends Component {
constructor(props) {
super(props)
// getDefaultProps：接收初始props
// getInitialState：初始化state
// 当组件被实例化之后，即使不手写构造函数，react会自动创建并执行构造函数，并且构造函数是最先执行的
// 如果手写了构造函数，就必须手动调用父类的构造函数来实例化子类，否则会导致this指向错误
// 手写构造函数的目的就是为了给父类也就是this添加属性，即使不添加任何属性，react也会自动创建state，只不过此时的state为null
}
state = {
age:18
}
static getDerivedStateFromProps=(props, state)=> {
// 组件挂载必须要经历的生命周期
// 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；
// 每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state
// 此函数是一个静态函数，所以函数体内不能访问this，输出完全由输入决定
console.log('static getDerivedStateFromProps(props, state)')
console.log(props)
console.log(state)
return state
}
componentDidCatch(error, info) {
// 获取到javascript错误
}
changeState=()=>{
this.setState({
age:22
})
}
render() {
const {age} = this.state
const {name} = this.props
return (
<>
<h4>新生命周期</h4>
<p>props值：name:{name},age:{age}</p>
<button onClick={this.changeState}>change state</button>
</>
)
}
componentDidMount() {
// 挂载后调用且只调用一次
console.log('componentDidMount')
}
shouldComponentUpdate(nextProps, nextState) {
// nextProps和nextProps的含义就是字面量的含义，代表更新之后的状态
// 组件Props或者state改变时触发，true：更新，false：不更新
console.log('shouldComponentUpdate')
console.log(nextProps)
console.log(nextState)
return true
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// 组件更新前触发
// 调用顺序与这个例子的顺序是一样的
console.log('getSnapshotBeforeUpdate')
return 'ok'
}
componentDidUpdate() {
// 组件更新后触发
console.log('componentDidUpdate')
}
componentWillUnmount() {
// 组件卸载时触发
}
}
挂载
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
更新
当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
卸载
当组件从 DOM 中移除时会调用如下方法：
错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：
参考资料：
https://react.docschina.org/docs/react-component.html#static-getderivedstatefromerror
https://segmentfault.com/a/1190000016617400?utm_source=tag-newest
