面试题：react生命周期

一：挂载卸载

1、constructor：

react数据的初始化，他接收2个参数，props和context。如果要使用这两个参数，就要使用super(),否则会造成this指向错误。

2、componentWillMount

用在服务端渲染时使用。组件已经经历了constructor初始化数据，但还未渲染DOM.

3、componentDidMount

组件第一次渲染完成，dom节点已生成。可以在这里请求ajax，返回数据setState后，组件会重新渲染。

4、componentWillUnMount

在此次完成组件的卸载和数据的销毁。
可以移除 setTimeout 、setInterval、组件的监听等。

二：更新

1、componentWillReceiveProps(nextProps)

在接收父组件改变后的props，需要重新渲染组件时使用。
接收参数nextProps
对比this.props 和 nextProps 将nextProps的state改为当前的state，页面可以重新渲染。

2、shouldComponentUpdate(nextProps,nextState)

主要用于性能优化。
唯一控制组件重新渲染的声明周期。由于setState之后，页面会重新渲染，但是这里如果返回false，则会阻止渲染更新。
原因：react父组件的重新渲染会导致所有子组件也重新渲染。这时不需要子组件全部跟着重新渲染的，可以在子组件的这个声明周期中进行判断是否需要渲染。

3、componentWillUpdate(nextProps,nextState)

shouldComponentUpdate，返回true后，组件进入重新渲染的进程。
此时进入componentWillUpdate中，也可以同样拿到nextProps和nextState

4、componentDidUpdate(prevProps, prevState)

组件更新完毕后，react只会在第一次初始化成功会进入componentDidMount，之后每次重新渲染都会进入到componentDidUpdate中，在这里可以拿到prevProps和prevState，也就是更新前的props和state　

三：render()

render函数会插入jsx生成dom结构，react会生成一个虚拟dom树，在每一次组件更新的时候，react会通过diff算法比较更新前后的dom树，比较dom后找到最小差异的dom节点，并重新渲染

　　

新增加的声明周期：

1、getDerivedStateFromProps(nextProps,nextState)

代替 componentWillReceiveProps

componentWillReceiveProps：
判断前后两个props是否相同，如果不同，将新的的props更新到对应的state上去。
这样处理会 破坏 state数据的单一数据源，导致组件状态变得不可预测，也会增加重绘次数。

getDerivedStateFromProps：

在新版本中的更新 state 与触发回调重新分配到，getDerivedStateFromProps中触发条件，在componentDidUpdate中进行数据的更新。使数据结构更加清晰。而且在getDerivedStateFromProps中禁止使用this.props ,强制比较nextProps和prevState的值，以确保在根据当前的props来更新state的值。

2、getSnapshotBeforeUpdate(prevProps, prevState)

代替componentWillUpdate

componentWillUpdate：
在组件更新前，读取某个dom元素的状态，并在componentDidUpdate中更新。

区别：
1、在react开始渲染模式后，在render阶段读取到的dom元素状态并不总是和commit阶段相同，这就导致componentDidUpdate中使用componentWillUpdate中读取到的元素已失效。
2、getSnapShotBeforeUpdate会在最终的render之前被调用，也就是getSnapShotBeforeUpdate中读取到的dom状态可以保证和componentDidUpdate一至。
此生命周期返回的任何值，都作为参数传递给componentDidUpdate中。