react生命周期

组件执行过程中的钩子函数

生命周期图

生命周期都可以用来修改props和state

只执行一次的生命周期

constructor

componentWillMount

componentDidMount

componentWillUnmount

初始化

constructor

如果你不初始化状态，也不绑定方法，那么你就不需要为React组件实现构造函数。

mounting(存在期)

componentWillMount

在render之前执行，在这个方法中setState不会发生重新渲染

服务端渲染中唯一调用的钩子

只会触发一次

即将废弃

render

渲染

组件实例化时，componentWillMount执行后执行

props和state改变时候触发

获取refs

componentDidMount

在render()方法之后

只会触发一次

render()之后立即执行；

可以对DOM进行操作;

可以加载服务器数据(ajax等)

可以使用setState()方法触发重新渲染

真实的DOM渲染被渲染出来后调用

可以访问真实的DOM

在服务端中，不会被调用

异步请求为何放在componenDidMount中

对于componentWillMount中异步获取数据有一个常见的误解就是认为：使用这种方式获取数据可以避免第一次渲染时的状态为空。

实际上，React总是在componentWillMount执行后就立即执行render函数。

如果在componentWillMount中无法立刻获取到返回的数据（显然异步获取数据是不可能立刻得到返回结果的），第一次的渲染依旧会是加载状态，而不是你想要获取到的数据来进行初始化。这也就是为什么，我们应当把数据获取的工作放在componentDidMount中。

updation

componentWillReceiveProps(nextProps)

在已经挂在的组件(mounted component)接收到新props时触发,

简单的说是在除了(componentWillMount -> render -> componentDidMount)之后的生命周期中出发;

即将废弃

shouldComponentUpdate(nextProps, nextState)

在接收到新props或state时触发

接收新的props或state时确定是否发生重新渲染，默认情况返回true，表示会发生重新渲染
组件的props和state发生变化不需要重新渲染

componentWillUpdate()

在props或state发生改变，且shouldComponentUpdate返回true

千万不要在这个函数中调用this.setState()方法

即将废弃

componentDidUpdate

更新完成之后

使用这个方法可以对组件中的DOM进行操作;

componentWillUnmount

组件卸载或销毁之前

可以清除定时器，监听事件等

只执行一次

新生命周期

static getDerivedStateFromProps

这一生命周期方法是静态的，它在组件实例化或接收到新的 props 时被触发

若它的返回值是对象，则将被用于更新 state ；

若是 null ，则不触发 state 的更新

getSnapshotBeforeUpdate

触发时机是 React 进行修改前（通常是更新 DOM）的“瞬间” ，这样一来在此获取到的 DOM 信息甚至比 componentWillUpdate更加可靠。

此外，它的返回值会作为第三个参数传入 componentDidUpdate，这样做的好处很明显——可以不必将为了协调渲染前后状态而产生的数据保存在组件实例上，用完即可销毁。