React生命周期

React的生命周期中常用的有：

constructor，负责数据初始化。

render，将jsx转换成真实的dom节点。

componentDidMount，组件第一次渲染完成时触发。

componentDidUpdate，组件更新完成时触发。

componentWillUnmount，组件销毁和卸载时触发。

不常用的有：

getDerivedStateFromProps，更新state和处理回调。

shouldComponentUpdate，用于性能优化。

getSnapshotBeforeUpdate，替代了componentWillUpdate。

补充

constructor()： 完成了数据的初始化。注意：只要使用了constructor()就必须写super()，否则this指向会出错。

render()： render()函数会将jsx生成的dom插入到目标节点中。在每次组件更新时，react通过diff算法比较更新前和更新之后的dom节点，找到最小的有差异的dom位置并更新，花费最小的开销。

componentDidMount()： 组件第一次渲染完成，此时dom节点已经生成，在这里调用接口请求，返回数据后使用setState()更新数据后重新渲染。

componentDidUpdate(prevProps,prevState)： 组件更新完成。每次react重新渲染之后都会进入这个生命周期，可以拿到更新之前的props和state。

componentWillUnmount()： 在这个生命周期完成组件的数据销毁和卸载，移除所有的定时器和监听。

getDerivedStateFromProps(nextProps,prevState)： 代替老版的componentWillReceiveProps()。官方将更新state与触发回调重新分配到了componentWillReceiveProps()中，让组件整体的更新逻辑更加清晰，并且在当前生命周期中，禁止使用this.props，强制让开发者们通过比较nextProps和PrevState去保证数据的正确行为。

shouldComponentUpdate()： return true可以渲染，return false不重新渲染。

为什么会出现这个SCU生命周期？主要用于性能优化。也是唯一可以控制组件渲染的生命周期，在setState之后state发生改变组件会重新渲染，在当前生命周期内return false会阻止组件的更新。因为react中父组件重新渲染导致子组件也重新渲染，这时在子组件的当前生命周期内做判断是否真的需要重新渲染。

getSnapshotBeforeUpdate(prevProps,prevState)： 代替componentWillUpdate()，核心区别在于getSnapshotBeforeUpdate()中读取到的dom元素状态是可以保证和componentDidUpdate()中的一致。