React之Class类组件的生命周期

生命周期的简单说法

react在render阶段会深度遍历react fiber 树，目的就是发现不同（diff），不同的地方就是接下来需要更新的地方，对于变化的组件，就会执行render函数，在一次render过程中结束后，就回到commit阶段，commit阶段会创建修改真实的DOM节点。

生命周期执行过程

1. 初始化阶段

• constructor 执行

在mount阶段，首先执行的是constructClassInstance函数，用来实例化React组件，在组件章节已经介绍了这个函数，组件中constructor就是在这里执行的。

在组件实例化之后，它会调用mountClassInstance组件初始化

• getDerivedStateFormProps执行

在初始化阶段，getDerivedStateFromProps是第二个执行的生命周期，值得注意的是它是从ctor类上直接绑定的静态方法，传入props，State。返回值将之前的state合并，作为新的state，传递给组件实例使用.

• componentWillMount 执行

• render 函数执行

• componentDidMount 执行

从这一步之前react其实一直在render阶段进行执行。一旦react，调和完所有的fiber节点，就会到commit阶段，在组件初始化commit阶段，会调用componentDidMount生命周期。

react 开始的执行顺序为：constructor -> getDerivedStateFromProps / componentWillMount -> rednder -> componentDidMount

更新阶段

• 执行生命周期componentWillReceiveProps

受限判断getDerivedStateFromProps 生命周期是否存在，如果不存在就窒息感componentWillReceiveProps生命周期，传入该生命周期有两个参数，分别为newProps和nextContext。

• 执行 getDerivedStateFromProps

上述下来执行它，返回的值用于合并state，生成新的state。

• 执行shouldComponentUpdate

下来执行它，传入新的props，新的state，和新的context，返回值决定是否继续执行render函数，tiao'he 子节点。

• 执行componentWillUpdate

updateClassInstance方法到此结束。

• 执行render

执行render，得到最新的react element 元素，然后继续调和子节点。

• 执行getSnapshotBeforeUpdate

getSnapshotBeforeUpdate 的执行也是在 commit 阶段，commit 阶段细分为 before Mutation( DOM 修改前)，Mutation ( DOM 修改)，Layout( DOM 修改后) 三个阶段，getSnapshotBeforeUpdate 发生在before Mutation 阶段，生命周期的返回值，将作为第三个参数 __reactInternalSnapshotBeforeUpdate 传递给 componentDidUpdate 。

• 执行componentDIdUpdate

这里dom已经修改完成，可以操作修改之后的dom。

各个生命周期的能力

• constructor

constructor 在类组件创建实例时调用，而且初始化的时候执行一次，所以可以在 constructor 做一些初始化的工作。

• componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot){
    const style = getComputedStyle(this.node)
    const newPosition = { /* 获取元素最新位置信息 */
        cx:style.cx,
        cy:style.cy
    }
}

三个参数：

• prevProps 更新之前的 props ；

• prevState 更新之前的 state ；

• snapshot 为 getSnapshotBeforeUpdate 返回的快照，可以是更新前的 DOM 信息。

作用

• componentDidUpdate 生命周期执行，此时 DOM 已经更新，可以直接获取 DOM 最新状态。这个函数里面如果想要使用 setState ，一定要加以限制，否则会引起无限循环。

• 接受 getSnapshotBeforeUpdate 保存的快照信息。

• componentDidMount

componentDidMount 生命周期执行时机和 componentDidUpdate 一样，一个是在初始化，一个是组件更新。此时 DOM 已经创建完，既然 DOM 已经创建挂载，就可以做一些基于 DOM 操作，DOM 事件监听器。

async componentDidMount(){
    this.node.addEventListener('click',()=>{
        /* 事件监听 */
    }) 
    const data = await this.getData() /* 数据请求 */
}

• componentWillUnmount

组件销毁。清除计时器，或者做一些组件销毁时的任务。