React生命周期的各个阶段是什么？

要点： constructor、componentDidMount、componentDidUpdate、componentWillUnmount、getDerivedStateFromProps、shouldComponentUpdate、getSnapshotBeforeUpdate、componentWillUpdate

答：

React的生命周期中常用的有:
constructor，负责数据初始化
render，将jsx转换成真实的dom节点
componentDidMount，组件第一次渲染完成时触发
componentDidUpdate，组件更新完成时触发
componentWillUnmount，组件销毁和卸载时触发

不常用的有：
getDerivedStateFromProps，更新state和处理回调
shouldComponentUpdate，用于性能优化
getSnapshotBeforeUpdate，替代了componentWillUpdate

React的生命周期中有常用的和不常用的 :
常用的有：

• 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()中的一致