持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情
React的生命周期
-
React中将生命周期分为三个状态：
-
Mounting(挂载)：已插入真实DOM
-
Updating(更新)：正在被重新渲染
-
Unmounting(卸载)：已移出真实DOM
挂载 挂载发生在组件实例被创建并插入DOM中时，它的调用顺序分别是：
constructor():在React组件挂载前，会调用它的构造函数 （最先被执行，通常使用是用来初始化state对象或给自定义方法绑定this）
getDerivedStateFromProps():在调用render方法之前调用，并且在初始挂载和后续更新时都会被调用。 (static getDerivedStateFromProps(nextProps,prevState)，为一个静态方法，当接收到新属性想去修改state，可以使用)
render():render()方法是class组件中唯一必须实现的方法。
componentDidMount():在组件挂载后（插入DOM树中）立即调用。 (常用于对canvas,svg的操作，服务器请求，订阅)
tips:render()方法是class组件中唯一必须实现的方法
更新
更新发生在组件的state或props发生变化时，组件就会更新，执行顺序依次是：
getDerivedStateFromProps():在调用render方法之前调用，并且在初始挂载及后续更新时会被调用。根据shouldComponentUpdate()返回值，判断React组件的输出是否受到当前state或props更改影响。
shouldComponentUpdate():当props或state发生变化时，shouldComponentUpdate()会在渲染执行之前被调用。 （shouldComponentUpdate(nextProps,nextState),有两个参，表示新的属性和变化之后的state，返回一个布尔值。true表示触发重新渲染，false表示不会触发重新渲染，默认值是true，常用于性能优化）
render():render()方法是class组件中唯一必须实现的方法。
getSnapshotBeforeUpdate():在最近一次渲染输出（提交到DOM节点）之前调用。
（getSnapshotBeforeUpdate(prevProps, prevState)，这个方法在render之后，componentDidUpdate之前调用，有两个参数prevProps和prevState，表示之前的属性和之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate，如果你不想要返回值，可以返回null，此生命周期必须与componentDidUpdate搭配使用）
componentDidUpdate():在更新后会被立即调用。
（componentDidUpdate(prevProps, prevState, snapshot)，该方法在getSnapshotBeforeUpdate方法之后被调用，有三个参数prevProps，prevState，snapshot，表示之前的props，之前的state，和snapshot。第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要用到 DOM 元素的状态，则将对比或计算的过程迁移至getSnapshotBeforeUpdate，然后在 componentDidUpdate中统一触发回调或更新状态。）
卸载
卸载发生在组件从DOM中移除时会被调用： componentWillUnmount():在组件卸载及销毁之前直接调用。
注意 React16之后有三个生命周期被废弃： componentWillMount componentWillReceiveProps componentWillUpdate 原因是这些生命周期方法经常被错误的使用。
