关于react.js:react源码解析10commit阶段

35次阅读

共计 11565 个字符，预计需要花费 29 分钟才能阅读完成。

react 源码解析 10.commit 阶段

视频解说（高效学习）：进入学习

往期文章：

1. 开篇介绍和面试题

2.react 的设计理念

3.react 源码架构

4. 源码目录构造和调试

5.jsx& 外围 api

6.legacy 和 concurrent 模式入口函数

7.Fiber 架构

8.render 阶段

9.diff 算法

10.commit 阶段

11. 生命周期

12. 状态更新流程

13.hooks 源码

14. 手写 hooks

15.scheduler&Lane

16.concurrent 模式

17.context

18 事件零碎

19. 手写迷你版 react

20. 总结 & 第一章的面试题解答

21.demo

在 render 阶段的开端会调用 commitRoot(root); 进入 commit 阶段，这里的 root 指的就是 fiberRoot，而后会遍历 render 阶段生成的 effectList，effectList 上的 Fiber 节点保留着对应的 props 变动。之后会遍历 effectList 进行对应的 dom 操作和生命周期、hooks 回调或销毁函数，各个函数做的事件如下

在 commitRoot 函数中其实是调度了 commitRootImpl 函数 

//ReactFiberWorkLoop.old.js
function commitRoot(root) {var renderPriorityLevel = getCurrentPriorityLevel();
  runWithPriority$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel));
  return null;
}

在 commitRootImpl 的函数中次要分三个局部：

  • commit 阶段前置工作

    1. 调用 flushPassiveEffects 执行完所有 effect 的工作
    2. 初始化相干变量

    3. 赋值 firstEffect 给前面遍历 effectList 用 

      //ReactFiberWorkLoop.old.js
do {
    // 调用 flushPassiveEffects 执行完所有 effect 的工作
    flushPassiveEffects();} while (rootWithPendingPassiveEffects !== null);

    //...

  // 重置变量 finishedWork 指 rooFiber
  root.finishedWork = null;
    // 重置优先级
  root.finishedLanes = NoLanes;

  // Scheduler 回调函数重置
  root.callbackNode = null;
  root.callbackId = NoLanes;

  // 重置全局变量
  if (root === workInProgressRoot) {
    workInProgressRoot = null;
    workInProgress = null;
    workInProgressRootRenderLanes = NoLanes;
  } else { }

     //rootFiber 可能会有新的副作用 将它也退出到 effectLis
  let firstEffect;
  if (finishedWork.effectTag > PerformedWork) {if (finishedWork.lastEffect !== null) {
      finishedWork.lastEffect.nextEffect = finishedWork;
      firstEffect = finishedWork.firstEffect;
    } else {firstEffect = finishedWork;}
  } else {firstEffect = finishedWork.firstEffect;}

  • mutation 阶段

    ​ 遍历 effectList 别离执行三个办法 commitBeforeMutationEffects、commitMutationEffects、commitLayoutEffects 执行对应的 dom 操作和生命周期

    ​ 在介绍双缓存 Fiber 树的时候，咱们在构建完 workInProgress Fiber 树之后会将 fiberRoot 的 current 指向 workInProgress Fiber，让 workInProgress Fiber 成为 current，这个步骤产生在 commitMutationEffects 函数执行之后，commitLayoutEffects 之前，因为 componentWillUnmount 产生在 commitMutationEffects 函数中，这时还能够获取之前的 Update，而 componentDidMount 和 componentDidUpdate 会在 commitLayoutEffects 中执行，这时曾经能够获取更新后的实在 dom 了 

    function commitRootImpl(root, renderPriorityLevel) {
    //...
    do {
      //...
      commitBeforeMutationEffects();} while (nextEffect !== null);
  
    do {
      //...
      commitMutationEffects(root, renderPriorityLevel);//commitMutationEffects
    } while (nextEffect !== null);
  
  root.current = finishedWork;// 切换 current Fiber 树
  
  do {
      //...
      commitLayoutEffects(root, lanes);//commitLayoutEffects
    } while (nextEffect !== null);
    //...
}

  • mutation 后

    1. 依据 rootDoesHavePassiveEffects 赋值相干变量

    2. 执行 flushSyncCallbackQueue 解决 componentDidMount 等生命周期或者 useLayoutEffect 等同步工作 

      const rootDidHavePassiveEffects = rootDoesHavePassiveEffects;

// 依据 rootDoesHavePassiveEffects 赋值相干变量
if (rootDoesHavePassiveEffects) {
  rootDoesHavePassiveEffects = false;
  rootWithPendingPassiveEffects = root;
  pendingPassiveEffectsLanes = lanes;
  pendingPassiveEffectsRenderPriority = renderPriorityLevel;
} else {}
//...

// 确保被调度
ensureRootIsScheduled(root, now());

// ...

// 执行 flushSyncCallbackQueue 解决 componentDidMount 等生命周期或者 useLayoutEffect 等同步工作
flushSyncCallbackQueue();

return null;

当初让咱们来看看 mutation 阶段的三个函数别离做了什么事件

  • commitBeforeMutationEffects
    该函数次要做了如下两件事

    1. 执行 getSnapshotBeforeUpdate

       在源码中 commitBeforeMutationEffectOnFiber 对应的函数是 commitBeforeMutationLifeCycles 在该函数中会调用 getSnapshotBeforeUpdate，当初咱们晓得了 getSnapshotBeforeUpdate 是在 mutation 阶段中的 commitBeforeMutationEffect 函数中执行的，而 commit 阶段是同步的，所以 getSnapshotBeforeUpdate 也同步执行

      function commitBeforeMutationLifeCycles(
  current: Fiber | null,
  finishedWork: Fiber,
): void {switch (finishedWork.tag) {
        //...
    case ClassComponent: {
      if const instance = finishedWork.stateNode;
          const snapshot = instance.getSnapshotBeforeUpdate(//getSnapshotBeforeUpdate
            finishedWork.elementType === finishedWork.type
              ? prevProps
              : resolveDefaultProps(finishedWork.type, prevProps),
            prevState,
          );
        }
}

  1. 调度 useEffect

    ​ 在 flushPassiveEffects 函数中调用 flushPassiveEffectsImpl 遍历 pendingPassiveHookEffectsUnmount 和 pendingPassiveHookEffectsMount，执行对应的 effect 回调和销毁函数，而这两个数组是在 commitLayoutEffects 函数中赋值的（待会就会讲到），mutation 后 effectList 赋值给 rootWithPendingPassiveEffects，而后 scheduleCallback 调度执行 flushPassiveEffects

    function flushPassiveEffectsImpl() {if (rootWithPendingPassiveEffects === null) {// 在 mutation 后变成了 root
    return false;
  }
  const unmountEffects = pendingPassiveHookEffectsUnmount;
  pendingPassiveHookEffectsUnmount = [];//useEffect 的回调函数
  for (let i = 0; i < unmountEffects.length; i += 2) {const effect = ((unmountEffects[i]: any): HookEffect);
    //...
    const destroy = effect.destroy;
    destroy();}

  const mountEffects = pendingPassiveHookEffectsMount;//useEffect 的销毁函数
  pendingPassiveHookEffectsMount = [];
  for (let i = 0; i < mountEffects.length; i += 2) {const effect = ((unmountEffects[i]: any): HookEffect);
    //...
    const create = effect.create;
    effect.destroy = create();}
}

 

 ​    componentDidUpdate 或 componentDidMount 会在 commit 阶段同步执行 (这个前面会讲到)，而 useEffect 会在 commit 阶段异步调度，所以实用于数据申请等副作用的解决

 > 留神，和在 render 阶段的 fiber node 会打上 Placement 等标签一样，useEffect 或 useLayoutEffect 也有对应的 effect Tag，在源码中对应 export const Passive = /*                      */ 0b0000000001000000000;

 ```js
 function commitBeforeMutationEffects() {while (nextEffect !== null) {
     const current = nextEffect.alternate;
     const effectTag = nextEffect.effectTag;
 
     // 在 commitBeforeMutationEffectOnFiber 函数中会执行 getSnapshotBeforeUpdate
     if ((effectTag & Snapshot) !== NoEffect) {commitBeforeMutationEffectOnFiber(current, nextEffect);
     }
 
     // scheduleCallback 调度 useEffect
     if ((effectTag & Passive) !== NoEffect) {if (!rootDoesHavePassiveEffects) {
         rootDoesHavePassiveEffects = true;
         scheduleCallback(NormalSchedulerPriority, () => {flushPassiveEffects();
           return null;
         });
       }
     }
     nextEffect = nextEffect.nextEffect;// 遍历 effectList
   }
 }
 
 ```

  • commitMutationEffects
    commitMutationEffects 次要做了如下几件事

    1. 调用 commitDetachRef 解绑 ref（第 11 章 hook 会解说）
    2. 依据 effectTag 执行对应的 dom 操作

    3. useLayoutEffect 销毁函数在 UpdateTag 时执行 

      function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {
  // 遍历 effectList
  while (nextEffect !== null) {

    const effectTag = nextEffect.effectTag;
    // 调用 commitDetachRef 解绑 ref
    if (effectTag & Ref) {
      const current = nextEffect.alternate;
      if (current !== null) {commitDetachRef(current);
      }
    }

    // 依据 effectTag 执行对应的 dom 操作
    const primaryEffectTag =
      effectTag & (Placement | Update | Deletion | Hydrating);
    switch (primaryEffectTag) {
      // 插入 dom
      case Placement: {commitPlacement(nextEffect);
        nextEffect.effectTag &= ~Placement;
        break;
      }
      // 插入更新 dom
      case PlacementAndUpdate: {
        // 插入
        commitPlacement(nextEffect);
        nextEffect.effectTag &= ~Placement;
        // 更新
        const current = nextEffect.alternate;
        commitWork(current, nextEffect);
        break;
      }
         //...
      // 更新 dom
      case Update: {
        const current = nextEffect.alternate;
        commitWork(current, nextEffect);
        break;
      }
      // 删除 dom
      case Deletion: {commitDeletion(root, nextEffect, renderPriorityLevel);
        break;
      }
    }

    nextEffect = nextEffect.nextEffect;
  }
}
 

 当初让咱们来看看操作 dom 的这几个函数

 **commitPlacement 插入节点：**

 ​    简化后的代码很清晰，找到该节点最近的 parent 节点和兄弟节点，而后依据 isContainer 来判断是插入到兄弟节点前还是 append 到 parent 节点后

 ```js
 unction commitPlacement(finishedWork: Fiber): void {
     //...
   const parentFiber = getHostParentFiber(finishedWork);// 找到最近的 parent
 
   let parent;
   let isContainer;
   const parentStateNode = parentFiber.stateNode;
   switch (parentFiber.tag) {
     case HostComponent:
       parent = parentStateNode;
       isContainer = false;
       break;
     //...
 
   }
   const before = getHostSibling(finishedWork);// 找兄弟节点
   if (isContainer) {insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
   } else {insertOrAppendPlacementNode(finishedWork, before, parent);
   }
 }
 ```

 

 **commitWork 更新节点：**

 ​    在简化后的源码中能够看到

 ​        如果 fiber 的 tag 是 SimpleMemoComponent 会调用 commitHookEffectListUnmount 执行对应的 hook 的销毁函数，能够看到传入的参数是 HookLayout | HookHasEffect，也就是说执行 useLayoutEffect 的销毁函数。​        如果是 HostComponent，那么调用 commitUpdate，commitUpdate 最初会调用 updateDOMProperties 解决对应 Update 的 dom 操作

 

 ```js
 function commitWork(current: Fiber | null, finishedWork: Fiber): void {if (!supportsMutation) {switch (finishedWork.tag) {
        //...
       case SimpleMemoComponent: {commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);
       }
      //...
     }
   }
 
   switch (finishedWork.tag) {
     //...
     case HostComponent: {
       //...
       commitUpdate(
             instance,
             updatePayload,
             type,
             oldProps,
             newProps,
             finishedWork,
           );
       }
       return;
     }
 }
 ```

 

 

 ```js
 function updateDOMProperties(
   domElement: Element,
   updatePayload: Array<any>,
   wasCustomComponentTag: boolean,
   isCustomComponentTag: boolean,
 ): void {
   // TODO: Handle wasCustomComponentTag
   for (let i = 0; i < updatePayload.length; i += 2) {const propKey = updatePayload[i];
     const propValue = updatePayload[i + 1];
     if (propKey === STYLE) {setValueForStyles(domElement, propValue);
     } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {setInnerHTML(domElement, propValue);
     } else if (propKey === CHILDREN) {setTextContent(domElement, propValue);
     } else {setValueForProperty(domElement, propKey, propValue, isCustomComponentTag);
     }
   }
 }
 
 
 ```

 

 **commitDeletion 删除节点:**
     如果是 ClassComponent 会执行 componentWillUnmount，删除 fiber，如果是 FunctionComponent 会删除 ref、并执行 useEffect 的销毁函数，具体可在源码中查看 unmountHostComponents、commitNestedUnmounts、detachFiberMutation 这几个函数

 ```js
 function commitDeletion(
   finishedRoot: FiberRoot,
   current: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {if (supportsMutation) {
     // Recursively delete all host nodes from the parent.
     // Detach refs and call componentWillUnmount() on the whole subtree.
     unmountHostComponents(finishedRoot, current, renderPriorityLevel);
   } else {// Detach refs and call componentWillUnmount() on the whole subtree.
     commitNestedUnmounts(finishedRoot, current, renderPriorityLevel);
   }
   const alternate = current.alternate;
   detachFiberMutation(current);
   if (alternate !== null) {detachFiberMutation(alternate);
   }
 }
 
 ```

  • commitLayoutEffects
    在 commitMutationEffects 之后所有的 dom 操作都曾经实现，能够拜访 dom 了，commitLayoutEffects 次要做了

    1. 调用 commitLayoutEffectOnFiber 执行相干生命周期函数或者 hook 相干 callback
    2. 执行 commitAttachRef 为 ref 赋值 
 

 ```js
 function commitLayoutEffects(root: FiberRoot, committedLanes: Lanes) {while (nextEffect !== null) {
     const effectTag = nextEffect.effectTag;
 
     // 调用 commitLayoutEffectOnFiber 执行生命周期和 hook
     if (effectTag & (Update | Callback)) {
       const current = nextEffect.alternate;
       commitLayoutEffectOnFiber(root, current, nextEffect, committedLanes);
     }
 
     // ref 赋值
     if (effectTag & Ref) {commitAttachRef(nextEffect);
     }
 
     nextEffect = nextEffect.nextEffect;
   }
 }
 ```

 

 **commitLayoutEffectOnFiber:**

 ​    在源码中 commitLayoutEffectOnFiber 函数的别名是 commitLifeCycles，在简化后的代码中能够看到，commitLifeCycles 会判断 fiber 的类型，SimpleMemoComponent 会执行 useLayoutEffect 的回调，而后调度 useEffect，ClassComponent 会执行 componentDidMount 或者 componentDidUpdate，this.setState 第二个参数也会执行，HostRoot 会执行 ReactDOM.render 函数的第三个参数，例如

 

 ```js
 ReactDOM.render(<App />, document.querySelector("#root"), function() {console.log("root mount");
 });
 ```

 

 当初能够晓得 useLayoutEffect 是在 commit 阶段同步执行，useEffect 会在 commit 阶段异步调度

 

 ```js
 function commitLifeCycles(
   finishedRoot: FiberRoot,
   current: Fiber | null,
   finishedWork: Fiber,
   committedLanes: Lanes,
 ): void {switch (finishedWork.tag) {
     case SimpleMemoComponent: {
       // 此函数会调用 useLayoutEffect 的回调
       commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
       // 向 pendingPassiveHookEffectsUnmount 和 pendingPassiveHookEffectsMount 中 push effect                        // 并且调度它们
       schedulePassiveEffects(finishedWork);
     }
     case ClassComponent: {
       // 条件判断...
       instance.componentDidMount();
       // 条件判断...
       instance.componentDidUpdate(//update 在 layout 期间同步执行
         prevProps,
         prevState,
         instance.__reactInternalSnapshotBeforeUpdate,
       );      
     }
 
      
     case HostRoot: {commitUpdateQueue(finishedWork, updateQueue, instance);//render 第三个参数
     }
     
   }
 }
 ```

 

 ​    在 schedulePassiveEffects 中会将 useEffect 的销毁和回调函数 push 到 pendingPassiveHookEffectsUnmount 和 pendingPassiveHookEffectsMount 中

 

 ```js
 function schedulePassiveEffects(finishedWork: Fiber) {const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
   if (lastEffect !== null) {
     const firstEffect = lastEffect.next;
     let effect = firstEffect;
     do {const {next, tag} = effect;
       if ((tag & HookPassive) !== NoHookEffect &&
         (tag & HookHasEffect) !== NoHookEffect
       ) {
         //push useEffect 的销毁函数并且退出调度
         enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
         //push useEffect 的回调函数并且退出调度
         enqueuePendingPassiveHookEffectMount(finishedWork, effect);
       }
       effect = next;
     } while (effect !== firstEffect);
   }
 }
 ```

 

 **commitAttachRef:**

 ​    commitAttacRef 中会判断 ref 的类型，执行 ref 或者给 ref.current 赋值

 

 

 ```js
 function commitAttachRef(finishedWork: Fiber) {
   const ref = finishedWork.ref;
   if (ref !== null) {
     const instance = finishedWork.stateNode;
 
     let instanceToUse;
     switch (finishedWork.tag) {
       case HostComponent:
         instanceToUse = getPublicInstance(instance);
         break;
       default:
         instanceToUse = instance;
     }
 
     if (typeof ref === "function") {
       // 执行 ref 回调
       ref(instanceToUse);
     } else {
       // 如果是值的类型则赋值给 ref.current
       ref.current = instanceToUse;
     }
   }
 }
 ```

正文完
react.js
发表至： react.js
2021-12-08
 0
关于react.js:几个你必须知道的React错误实践
关于react.js:react源码解析8render阶段
关于react.js:reactcropper结合Antd-Upload实现图片裁剪并上传
关于react.js:基于-React-ReduxMobx-搞定复杂项目状态管理无密分享