React commitRoot

commitRoot

1. 全局变量 workInProgressRoot、workInProgress、workInProgressRootRenderLanes 设为 默认值

2. 获取 workInProgress 上的 firstEffect（completeUnitOfWork 生成的）

   if (finishedWork.flags > PerformedWork) {
     if (finishedWork.lastEffect !== null) {
       finishedWork.lastEffect.nextEffect = finishedWork;
       firstEffect = finishedWork.firstEffect;
     } else {
       firstEffect = finishedWork;
     }
   }

commitBeforeMutationEffects

1. before mutation: 对不同组件进行操作

   • class 组件: 获取 snapshot
   • 其他组件: 不处理

commitMutationEffects

1. 将组件加入到真实的 dom 节点下 —— div#root.appendChild(child)
2. HostComponent: commitUpdate 进行事件注册

commitLayoutEffects

功能

1. ref 挂载: commitAttachRef: ref.current = current.stateNode

2. commitLifeCycles

   1. 函数组件: commitHookEffectListMount —— 取出 finishedWork.updateQueue，执行里面的 hooks

   2. class 组件:

      • 执行生命周期方法, componentDidUpdate(props, state, snapshot)
      • commitUpdateQueue

代码

1. commitUpdateQueue: 执行 updateQueue 中的方法

   function commitUpdateQueue(finishedWork, finishedQueue, instance) {
     var effects = finishedQueue.effects;
     finishedQueue.effects = null;
   
     if (effects !== null) {
       for (var i = 0; i < effects.length; i++) {
         var effect = effects[i];
         var callback = effect.callback;
   
         if (callback !== null) {
           effect.callback = null;
           callCallback(callback, instance);
         }
       }
     }
   }