React的生命周期

只有类组件才有生命周期，函数组件是没有生命周期的，在任何情况下都会重新渲染

函数组件可以使用React.memo优化，跳过渲染过程，复用最后一次的结果

按照以下的顺序分析：挂载->更新->卸载

1.挂载阶段(组件从初始化到完成加载的过程)

        1.constructor

                是类通用的构造函数，常用于初始化

                在React的新规范中去除了constructor的函数

class Com extends React.Component{
    //constructor(p){
        //super(p)
        //this.state={
            
        //}
    //}
    this.state={
            
    }
    render(){
        return null
    }
}

        2.getDerivedStateFromProps

                组件在props变化的时候更新state

                触发时机：props被传入时、state发生变化时、forceUpdate被调用时 

        3.render

                render函数是纯函数，只返回需要渲染的东西，不应该包含其它的业务逻辑,可以返回原

                生的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null等内容

        4.componentDidMount:

                组件加载完成之后调用，此时可以获取到DOM节点并操作，比如对canvas，svg的

                操作，服务器请求，订阅都可以写在这个里面，但是记得在componentWillUnmount中取

                消订阅。

2.更新阶段

        1.getDerivedStateFromProps

        2.shouldComponentUpdate

                shouldComponentUpdate(nextProps, nextState)，有两个参数nextProps和

      nextState，表示新的属性和变化之后的state，返回一个布尔值，true表示会触发

                重新渲染，false表示不会触发重新渲染，默认返回true,我们通常利用此生命周期来

                优化React程序性能

        3.render

        4.getSnapshotBeforeUpdate

                getSnapshotBeforeUpdate(prevProps, prevState)，这个方法在render之后，

      componentDidUpdate之前调用，有两个参数prevProps和prevState，表示之前的属性和

                之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate，

                如果你不想要返回值，可以返回null，此生命周期必须与componentDidUpdate搭配使用

        5.componentDidUpdate

                componentDidUpdate(prevProps, prevState, snapshot)，该方法在

      getSnapshotBeforeUpdate方法之后被调用，有三个参数prevProps，prevState，

      snapshot，表示之前的props，之前的state，和snapshot。第三个参数是

      getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要用到 DOM 元素的状

                态，则将对比或计算的过程迁移至getSnapshotBeforeUpdate，然后

                在 componentDidUpdate中统一触发回调或更新状态。

3.卸载阶段

        componentWillUnmount

                 当组件被卸载或者销毁了就会调用，我们可以在这个函数里去清除一些定时器，取消网

                络请求，清理无效的DOM元素等垃圾清理工作。

4.废弃的生命周期

        有三个生命周期被废弃：

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

5.错误边界

        componentDidCatch

                在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误

                若一个组件在渲染期间（render） 发生错误，会导致整个组件树全部被卸载

                无法捕获 以下四种场景中产生的错误：

                        1.事件处理函数（因为 Error Boundaries 实现的本质是触发更新，但是事件处理函

                        数不在render或者commit阶段，所以无法进行捕获，如果你需要在事件处理器内部

                        捕获错误，可以使用原生的 try / catch 语句）
                        2.异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
                        3.服务端渲染（因为触发更新只能在客户端进行，不能在serve端进行）
                        4.它自身抛出来的错误（因为错误抛出要向父节点冒泡寻找 Error Boundaries 处

                        理，无法处理自身产生的错误）