生命周期的简单说法
react在render阶段会深度遍历react fiber 树，目的就是发现不同（diff），不同的地方就是接下来需要更新的地方，对于变化的组件，就会执行render函数，在一次render过程中结束后，就回到commit阶段，commit阶段会创建修改真实的DOM节点。
生命周期执行过程
- 初始化阶段
- 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
组件销毁。清除计时器，或者做一些组件销毁时的任务。
