react commit阶段

commit阶段

commitRootImpl方法有三个while循环，代表commit的三个子阶段
before mutation 阶段（执行 DOM 操作前）
mutation 阶段（执行 DOM 操作）
layout 阶段（执行 DOM 操作后）

1. 在workLoopSync方法调用完成之后代表所有的react元素都构建完成Fiber对象
   然后进行到commit阶段了，调用了finishSyncRender方法
   finishSyncRender方法小孩Fiber树，进入commit，
   commitRoot方法获取优先级，并修改为最高优先级，因为commit阶段不可被中断

2. 在commitRootImpl方法进入commit
   并且含有三个while循环，代表三个子阶段，执行前，执行，执行后
   获取到Fiber对象，先判断有没有任务要执行
   重置默认值，root下的finishedWork，callbackNode等属性
   获取到对应的执行DOM副作用操作对象
   如果firstEffect不为空，进行第一个子阶段
   如果nextEffect不为空，进行第二个子阶段
   如果nextEffect不为空，进行第三个子阶段

3. 第一个子阶段，调用类组件的getSnapshotBeforeUpdate生命周期
   循环effect链，先获取到effectTag
   如果fiber对象中有Snapshot就不执行
   最主要是调用commitBeforeMutationEffectOnFiber方法，如果是类组件，获取组件的实例对象，返回自定义的值或bull，调用getSnapshotBeforeUpdate周期

4. 第二子阶段，提交 HostComponent，也就是DOM节点的操作
   主要就是根据Fiber类型作出DOM操作
   开启while循环调用effect链
   下方对primaryEffectTag进行匹配，是插入操作，删除操作，服务端渲染，更新dom，对不同操作进行分别处理
   查看当前节点是否有下一个兄弟节点，有执行insertBefore，没有执行appendChild

5. 第三子阶段，在类组件调用生命周期函数，和函数组件的钩子函数
   调用的方法是commitLayoutEffects方法
   DOM操作已经完成，获取effectTag的值
   调用条件是调用了生命周期函数或是函数组件调用了useEffect方法
   初始阶段调用类组件的生命周期函数
   获取任务队列，如果存在调用commitUpdateQuque处理任务队列，主要调用render的callback
   处理函数组件的钩子函数，实际处理的useEffect函数的第三个函数，在函数commitHookEffectLIstMount方法中