React源码分析5-commit6

原创

goClient1992

发布于 2023-01-10 08:34:09

4040

发布于 2023-01-10 08:34:09

文章被收录于专栏：进阶高级前端工程师进阶高级前端工程师

前两章讲到了，react 在 render 阶段的 completeUnitWork 执行完毕后，就执行 commitRoot 进入到了 commit 阶段，本章将讲解 commit 阶段执行过程源码。

总览

commit 阶段相比于 render 阶段要简单很多，因为大部分更新的前期操作都在 render 阶段做好了，commit 阶段主要做的是根据之前生成的 effectList，对相应的真实 dom 进行更新和渲染，这个阶段是不可中断的。

commit 阶段大致可以分为以下几个过程：

获取 effectList 链表，如果 root 上有 effect，则将其也添加进 effectList 中
对 effectList 进行第一次遍历，执行 commitBeforeMutationEffects 函数来更新class组件实例上的state、props 等，以及执行 getSnapshotBeforeUpdate 生命周期函数
对 effectList 进行第二次遍历，执行 commitMutationEffects 函数来完成副作用的执行，主要包括重置文本节点以及真实 dom 节点的插入、删除和更新等操作。
对 effectList 进行第三次遍历，执行 commitLayoutEffects 函数，去触发 componentDidMount、componentDidUpdate 以及各种回调函数等
最后进行一点变量还原之类的收尾，就完成了 commit 阶段

我们从 commit 阶段的入口函数 commitRoot 开始看：

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js

function commitRoot(root) {
  const renderPriorityLevel = getCurrentPriorityLevel();
  runWithPriority(
    ImmediateSchedulerPriority,
    commitRootImpl.bind(null, root, renderPriorityLevel),
  );
  return null;
}

它调用了 commitRootImpl 函数，所要做的工作都在这个函数中：

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js

function commitRootImpl(root, renderPriorityLevel) {
  // ...
  const finishedWork = root.finishedWork;
  const lanes = root.finishedLanes;
  // ...

  // 获取 effectList 链表
  let firstEffect;
  if (finishedWork.flags > PerformedWork) {
    // 如果 root 上有 effect，则将其添加进 effectList 链表中
    if (finishedWork.lastEffect !== null) {
      finishedWork.lastEffect.nextEffect = finishedWork;
      firstEffect = finishedWork.firstEffect;
    } else {
      firstEffect = finishedWork;
    }
  } else {
    // 如果 root 上没有 effect，直接使用 finishedWork.firstEffect 作用链表头节点
    firstEffect = finishedWork.firstEffect;
  }

  if (firstEffect !== null) {
    // ...

    // 第一次遍历，执行 commitBeforeMutationEffects
    nextEffect = firstEffect;
    do {
      if (__DEV__) {
        invokeGuardedCallback(null, commitBeforeMutationEffects, null);
        // ...
      } else {
        try {
          commitBeforeMutationEffects();
        } catch (error) {
          // ...
        }
      }
    } while (nextEffect !== null);

    // ...
    // 第二次遍历，执行 commitMutationEffects
    nextEffect = firstEffect;
    do {
      if (__DEV__) {
        invokeGuardedCallback(
          null,
          commitMutationEffects,
          null,
          root,
          renderPriorityLevel,
        );
        // ...
      } else {
        try {
          commitMutationEffects(root, renderPriorityLevel);
        } catch (error) {
          // ...
        }
      }
    } while (nextEffect !== null);



    // 第三次遍历，执行 commitLayoutEffects
    nextEffect = firstEffect;
    do {
      if (__DEV__) {
        invokeGuardedCallback(null, commitLayoutEffects, null, root, lanes);
        // ...
      } else {
        try {
          commitLayoutEffects(root, lanes);
        } catch (error) {
          // ...
        }
      }
    } while (nextEffect !== null);

    nextEffect = null;

    // ...
  } else {
    // 没有任何副作用
    root.current = finishedWork;
    if (enableProfilerTimer) {
      recordCommitTime();
    }
  }

  // ...
}

commitBeforeMutationEffects

commitBeforeMutationEffects 中，会从 firstEffect 开始，通过 nextEffect 不断对 effectList 链表进行遍历，若是当前的 fiber 节点有 flags 副作用，则执行 commitBeforeMutationEffectOnFiber 节点去对针对 class 组件单独处理。

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js

function commitBeforeMutationEffects() {
  while (nextEffect !== null) {
    // ...
    const flags = nextEffect.flags;
    if ((flags & Snapshot) !== NoFlags) {
      // 如果当前 fiber 节点有 flags 副作用
      commitBeforeMutationEffectOnFiber(current, nextEffect);
      // ...
    }
    // ...
    nextEffect = nextEffect.nextEffect;
  }
}

然后看一下 commitBeforeMutationEffectOnFiber，它里面根据 fiber 的 tag 属性，主要是对 ClassComponent 组件进行处理，更新 ClassComponent 实例上的state、props 等，以及执行 getSnapshotBeforeUpdate 生命周期函数:

// packages/react-reconciler/src/ReactFiberCommitWork.old.js

function commitBeforeMutationLifeCycles(
  current: Fiber | null,  finishedWork: Fiber,
): void {
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent:
    case Block: {
      return;
    }
    case ClassComponent: {
      if (finishedWork.flags & Snapshot) {
        if (current !== null) {
          // 非首次加载的情况下
          // 获取上一次的 props 和 state
          const prevProps = current.memoizedProps;
          const prevState = current.memoizedState;
          // 获取当前 class 组件实例
          const instance = finishedWork.stateNode;
          // ...

          // 调用 getSnapshotBeforeUpdate 生命周期方法
          const snapshot = instance.getSnapshotBeforeUpdate(
            finishedWork.elementType === finishedWork.type
              ? prevProps
              : resolveDefaultProps(finishedWork.type, prevProps),
            prevState,
          );
          // ...
          // 将生成的 snapshot 保存到 instance.__reactInternalSnapshotBeforeUpdate 上，供 DidUpdate 生命周期使用
          instance.__reactInternalSnapshotBeforeUpdate = snapshot;
        }
      }
      return;
    }
    // ...
  }
}

commitMutationEffects

commitMutationEffects 中会根据对 effectList 进行第二次遍历，根据 flags 的类型进行二进制与操作，然后根据结果去执行不同的操作，对真实 dom 进行修改：

ContentReset: 如果 flags 中包含 ContentReset 类型，代表文本节点内容改变，则执行 commitResetTextContent 重置文本节点的内容
Ref: 如果 flags 中包含 Ref 类型，则执行 commitDetachRef 更改 ref 对应的 current 的值
Placement: 上一章 diff 中讲过 Placement 代表插入，会执行 commitPlacement 去插入 dom 节点
Update: flags 包含 Update 则会执行 commitWork 执行更新操作
Deletion: flags 包含 Deletion 则会执行 commitDeletion 执行更新操作

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js

function commitMutationEffects(
  root: FiberRoot,  renderPriorityLevel: ReactPriorityLevel,
) {
  // 对 effectList 进行遍历
  while (nextEffect !== null) {
    setCurrentDebugFiberInDEV(nextEffect);

    const flags = nextEffect.flags;

    // ContentReset：重置文本节点
    if (flags & ContentReset) {
      commitResetTextContent(nextEffect);
    }

    // Ref：commitDetachRef 更新 ref 的 current 值
    if (flags & Ref) {
      const current = nextEffect.alternate;
      if (current !== null) {
        commitDetachRef(current);
      }
      if (enableScopeAPI) {
        if (nextEffect.tag === ScopeComponent) {
          commitAttachRef(nextEffect);
        }
      }
    }

    // 执行更新、插入、删除操作
    const primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
    switch (primaryFlags) {
      case Placement: {
        // 插入
        commitPlacement(nextEffect);
        nextEffect.flags &= ~Placement;
        break;
      }
      case PlacementAndUpdate: {
        // 插入并更新
        // 插入
        commitPlacement(nextEffect);
        nextEffect.flags &= ~Placement;

        // 更新
        const current = nextEffect.alternate;
        commitWork(current, nextEffect);
        break;
      }
      // ...
      case Update: {
        // 更新
        const current = nextEffect.alternate;
        commitWork(current, nextEffect);
        break;
      }
      case Deletion: {
        // 删除
        commitDeletion(root, nextEffect, renderPriorityLevel);
        break;
      }
    }
    resetCurrentDebugFiberInDEV();
    nextEffect = nextEffect.nextEffect;
  }
}

插入 dom 节点

获取父节点及插入位置

插入 dom 节点的操作以 commitPlacement 为入口函数， commitPlacement 中会首先获取当前 fiber 的父 fiber 对应的真实 dom 节点以及在父节点下要插入的位置，根据父节点对应的 dom 是否为 container，去执行 insertOrAppendPlacementNodeIntoContainer 或者 insertOrAppendPlacementNode 进行节点的插入。

// packages/react-reconciler/src/ReactFiberCommitWork.old.js

function commitPlacement(finishedWork: Fiber): void {
  if (!supportsMutation) {
    return;
  }

  // 获取当前 fiber 的父 fiber
  const parentFiber = getHostParentFiber(finishedWork);

  let parent;
  let isContainer;
  // 获取父 fiber 对应真实 dom 节点
  const parentStateNode = parentFiber.stateNode;
  // 获取父 fiber 对应的 dom 是否可以作为 container
    case HostComponent:
      parent = parentStateNode;
      isContainer = false;
      break;
    case HostRoot:
      parent = parentStateNode.containerInfo;
      isContainer = true;
      break;
    case HostPortal:
      parent = parentStateNode.containerInfo;
      isContainer = true;
      break;
    case FundamentalComponent:
      if (enableFundamentalAPI) {
        parent = parentStateNode.instance;
        isContainer = false;
      }
    default:
      invariant(
        false,
        'Invalid host parent fiber. This error is likely caused by a bug ' +
          'in React. Please file an issue.',
      );
  }
  // 如果父 fiber 有 ContentReset 的 flags 副作用，则重置其文本内容
  if (parentFiber.flags & ContentReset) {
    resetTextContent(parent);
    parentFiber.flags &= ~ContentReset;
  }

  // 获取要在哪个兄弟 fiber 之前插入
  const before = getHostSibling(finishedWork);
  if (isContainer) {
    insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
  } else {
    insertOrAppendPlacementNode(finishedWork, before, parent);
  }
}

判断当前节点是否为单节点

我们以 insertOrAppendPlacementNodeIntoContainer 为例看一下其源码，里面通过 tag 属性判断了当前的 fiber 是否为原生 dom 节点。若是，则调用 insertInContainerBefore 或 appendChildToContainer 在相应位置插入真实 dom；若不是，则对当前 fiber 的所有子 fiber 调用 insertOrAppendPlacementNodeIntoContainer 进行遍历：

// packages/react-reconciler/src/ReactFiberCommitWork.old.js

function insertOrAppendPlacementNodeIntoContainer(
  node: Fiber,  before: ?Instance,  parent: Container,
): void {
  const {tag} = node;
  // 判断当前节点是否为原生的 dom 节点
  const isHost = tag === HostComponent || tag === HostText;
  if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {
    // 是原生 dom 节点，在父节点的对应位置插入当前节点
    const stateNode = isHost ? node.stateNode : node.stateNode.instance;
    if (before) {
      insertInContainerBefore(parent, stateNode, before);
    } else {
      appendChildToContainer(parent, stateNode);
    }
  } else if (tag === HostPortal) {
    // 如是 Portal 不做处理
  } else {
    // 不是原生 dom 节点，则遍历插入当前节点的各个子节点
    const child = node.child;
    if (child !== null) {
      insertOrAppendPlacementNodeIntoContainer(child, before, parent);
      let sibling = child.sibling;
      while (sibling !== null) {
        insertOrAppendPlacementNodeIntoContainer(sibling, before, parent);
        sibling = sibling.sibling;
      }
    }
  }
}

在对应位置插入节点

before 不为 null 时，说明要在某个 dom 节点之前插入新的 dom，调用 insertInContainerBefore 去进行插入，根据父节点是否注释类型，选择在父节点的父节点下插入新的 dom，还是直接在父节点下插入新的 dom：

// packages/react-dom/src/client/ReactDOMHostConfig.js

export function insertInContainerBefore(
  container: Container,  child: Instance | TextInstance,  beforeChild: Instance | TextInstance | SuspenseInstance,
): void {
  if (container.nodeType === COMMENT_NODE) {
    // 如果父节点为注释类型，则在父节点的父节点下插入新的 dom
    (container.parentNode: any).insertBefore(child, beforeChild);
  } else {
    // 否则直接插入新的 dom
    container.insertBefore(child, beforeChild);
  }
}

before 为 null 时，调用 appendChildToContainer 方法，直接在父节点（如果父节点为注释类型则在父节点的父节点）的最后位置插入新的 dom：

export function appendChildToContainer(
  container: Container,  child: Instance | TextInstance,
): void {
  let parentNode;
  if (container.nodeType === COMMENT_NODE) {
    // 如果父节点为注释类型，则在父节点的父节点下插入新的 dom
    parentNode = (container.parentNode: any);
    parentNode.insertBefore(child, container);
  } else {
    // 否则直接插入新的 dom
    parentNode = container;
    parentNode.appendChild(child);
  }
  // ...
}

这几步都是以 insertOrAppendPlacementNodeIntoContainer 为例看源码，insertOrAppendPlacementNode 和它的唯一区别就是最后在对应位置插入节点时，不需要额外判断父节点 (container) 是否为 COMMENT_TYPE 了。

更新 dom 节点

更新操作以 commitWork 为入口函数，更新主要是针对 HostComponent 和 HostText 两种类型进行更新。

// packages/react-reconciler/src/ReactFiberCommitWork.old.js

function commitWork(current: Fiber | null, finishedWork: Fiber): void {
  // ...

  switch (finishedWork.tag) {
    // ...
    case ClassComponent: {
      return;
    }
    case HostComponent: {
      // 获取真实 dom 节点
      const instance: Instance = finishedWork.stateNode;
      if (instance != null) {
        // 获取新的 props
        const newProps = finishedWork.memoizedProps;
        // 获取老的 props
        const oldProps = current !== null ? current.memoizedProps : newProps;
        const type = finishedWork.type;
        // 取出 updateQueue
        const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
        // 清空 updateQueue
        finishedWork.updateQueue = null;
        if (updatePayload !== null) {
          // 提交更新
          commitUpdate(
            instance,
            updatePayload,
            type,
            oldProps,
            newProps,
            finishedWork,
          );
        }
      }
      return;
    }
    case HostText: {
      // 获取真实文本节点
      const textInstance: TextInstance = finishedWork.stateNode;
      // 获取新的文本内容
      const newText: string = finishedWork.memoizedProps;
      // 获取老的文本内容
      const oldText: string =
        current !== null ? current.memoizedProps : newText;
      // 提交更新
      commitTextUpdate(textInstance, oldText, newText);
      return;
    }
    case HostRoot: {
      // ssr操作，暂不关注
      if (supportsHydration) {
        const root: FiberRoot = finishedWork.stateNode;
        if (root.hydrate) {
          root.hydrate = false;
          commitHydratedContainer(root.containerInfo);
        }
      }
      return;
    }
    case Profiler: {
      return;
    }
    // ...
}

更新 HostComponent

根据上面的 commitWork 的源码，更新 HostComponent 时，获取了真实 dom 节点实例、props 以及 updateQueue 之后，就调用 commitUpdate 对 dom 进行更新，它通过 updateProperties 函数将 props 变化应用到真实 dom 上。

// packages/react-dom/src/client/ReactDOMHostConfig.js

export function commitUpdate(
  domElement: Instance,  updatePayload: Array<mixed>,  type: string,  oldProps: Props,  newProps: Props,  internalInstanceHandle: Object,
): void {
  // 做了 domElement[internalPropsKey] = props 的操作
  updateFiberProps(domElement, newProps);
  // 应用给真实 dom
  updateProperties(domElement, updatePayload, type, oldProps, newProps);
}

updateProperties 中，通过 updateDOMProperties 将 diff 结果应用于真实的 dom 节点。另外根据 fiber 的 tag 属性，如果判断对应的 dom 的节点为表单类型，例如 radio、textarea、input、select 等，会做特定的处理：

// packages/react-dom/src/client/ReactDOMComponent.js

export function updateProperties(
  domElement: Element,  updatePayload: Array<any>,  tag: string,  lastRawProps: Object,  nextRawProps: Object,
): void {
  // 针对表单组件进行特殊处理，例如更新 radio 的 checked 值
  if (
    tag === 'input' &&
    nextRawProps.type === 'radio' &&
    nextRawProps.name != null
  ) {
    ReactDOMInputUpdateChecked(domElement, nextRawProps);
  }

  // 判断是否为用户自定义的组件，即是否包含 "-"
  const wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
  const isCustomComponentTag = isCustomComponent(tag, nextRawProps);
  // 将 diff 结果应用于真实 dom
  updateDOMProperties(
    domElement,
    updatePayload,
    wasCustomComponentTag,
    isCustomComponentTag,
  );

  // 针对表单的特殊处理
  switch (tag) {
    case 'input':
      ReactDOMInputUpdateWrapper(domElement, nextRawProps);
      break;
    case 'textarea':
      ReactDOMTextareaUpdateWrapper(domElement, nextRawProps);
      break;
    case 'select':
      ReactDOMSelectPostUpdateWrapper(domElement, nextRawProps);
      break;
  }
}

updateDOMProperties 中，会遍历之前 render 阶段生成的 updatePayload，将其映射到真实的 dom 节点属性上，另外会针对 style、dangerouslySetInnerHTML 以及 textContent 做一些处理，从而实现了 dom 的更新：

// packages/react-dom/src/client/ReactDOMHostConfig.js

function updateDOMProperties(
  domElement: Element,  updatePayload: Array<any>,  wasCustomComponentTag: boolean,  isCustomComponentTag: boolean,
): void {
  // 对 updatePayload 遍历
  for (let i = 0; i < updatePayload.length; i += 2) {
    const propKey = updatePayload[i];
    const propValue = updatePayload[i + 1];
    if (propKey === STYLE) {
      // 处理 style 样式更新
      setValueForStyles(domElement, propValue);
    } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
      // 处理 innerHTML 改变
      setInnerHTML(domElement, propValue);
    } else if (propKey === CHILDREN) {
      // 处理 textContent
      setTextContent(domElement, propValue);
    } else {
      // 处理其他节点属性
      setValueForProperty(domElement, propKey, propValue, isCustomComponentTag);
    }
  }
}

更新 HostText

HostText 的更新处理十分简单，调用 commitTextUpdate，里面直接将 dom 的 nodeValue 设置为 newText 的值：

// packages/react-dom/src/client/ReactDOMHostConfig.js

export function commitTextUpdate(
  textInstance: TextInstance,  oldText: string,  newText: string,
): void {
  textInstance.nodeValue = newText;
}

删除 dom 节点

删除 dom 节点的操作以 commitDeletion 为入口函数，它所要做的事情最复杂。react 会采用深度优先遍历去遍历整颗 fiber 树，找到需要删除的 fiber，除了要将对应的 dom 节点删除，还需要考虑 ref 的卸载、componentWillUnmount 等生命周期的调用：

// packages/react-reconciler/src/ReactFiberCommitWork.old.js

function commitDeletion(
  finishedRoot: FiberRoot,  current: Fiber,  renderPriorityLevel: ReactPriorityLevel,
): void {
  if (supportsMutation) {
    // 支持 useMutation
    unmountHostComponents(finishedRoot, current, renderPriorityLevel);
  } else {
    // 不支持 useMutation
    commitNestedUnmounts(finishedRoot, current, renderPriorityLevel);
  }
  const alternate = current.alternate;
  // 重置 fiber 的各项属性
  detachFiberMutation(current);
  if (alternate !== null) {
    detachFiberMutation(alternate);
  }
}

unmountHostComponents

unmountHostComponents 首先判断当前父节点是否合法，若是不合法寻找合法的父节点，然后通过深度优先遍历，去遍历整棵树，通过 commitUnmount 卸载 ref、执行生命周期。遇到是原生 dom 类型的节点，还会从对应的父节点下删除该节点。

// packages/react-reconciler/src/ReactFiberCommitWork.old.js

function unmountHostComponents(
  finishedRoot: FiberRoot,  current: Fiber,  renderPriorityLevel: ReactPriorityLevel,
): void {
  let node: Fiber = current;
  let currentParentIsValid = false;
  let currentParent;
  let currentParentIsContainer;

  while (true) {
    if (!currentParentIsValid) {
      // 若当前的父节点不是非法的 dom 节点，寻找一个合法的 dom 父节点
      let parent = node.return;
      findParent: while (true) {
        invariant(
          parent !== null,
          'Expected to find a host parent. This error is likely caused by ' +
            'a bug in React. Please file an issue.',
        );
        const parentStateNode = parent.stateNode;
        switch (parent.tag) {
          case HostComponent:
            currentParent = parentStateNode;
            currentParentIsContainer = false;
            break findParent;
          case HostRoot:
            currentParent = parentStateNode.containerInfo;
            currentParentIsContainer = true;
            break findParent;
          case HostPortal:
            currentParent = parentStateNode.containerInfo;
            currentParentIsContainer = true;
            break findParent;
          case FundamentalComponent:
            if (enableFundamentalAPI) {
              currentParent = parentStateNode.instance;
              currentParentIsContainer = false;
            }
        }
        parent = parent.return;
      }
      currentParentIsValid = true;
    }

    if (node.tag === HostComponent || node.tag === HostText) {
      // 若果是原生 dom 节点，调用 commitNestedUnmounts 方法
      commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);
      if (currentParentIsContainer) {
        // 若当前的 parent 是 container，则将 child 从 container 中移除(通过 dom.removeChild 方法)
        removeChildFromContainer(
          ((currentParent: any): Container),
          (node.stateNode: Instance | TextInstance),
        );
      } else {
        // 从 parent 中移除 child(通过 dom.removeChild 方法)
        removeChild(
          ((currentParent: any): Instance),
          (node.stateNode: Instance | TextInstance),
        );
      }
    } // ...
    else if (node.tag === HostPortal) {
      // 若是 portal 节点，直接向下遍历 child，因为它没有 ref 和生命周期等额外要处理的事情
      if (node.child !== null) {
        currentParent = node.stateNode.containerInfo;
        currentParentIsContainer = true;
        node.child.return = node;
        node = node.child;
        continue;
      }
    } else {
      // 其他 react 节点，调用 commitUnmount，里面会卸载 ref、执行生命周期等
      commitUnmount(finishedRoot, node, renderPriorityLevel);
      // 深度优先遍历子节点
      if (node.child !== null) {
        node.child.return = node;
        node = node.child;
        continue;
      }
    }
    // node 和 current 相等时说明整颗树的深度优先遍历完成
    if (node === current) {
      return;
    }
    // 如果没有兄弟节点，说明当前子树遍历完毕，返回到父节点继续深度优先遍历
    while (node.sibling === null) {
      if (node.return === null || node.return === current) {
        return;
      }
      node = node.return;
      if (node.tag === HostPortal) {
        currentParentIsValid = false;
      }
    }
    // 继续遍历兄弟节点
    node.sibling.return = node.return;
    node = node.sibling;
  }
}

commitNestedUnmounts

commitNestedUnmounts 相比 unmountHostComponents 不需要额外做当前父节点是否合法的判断以及 react 节点类型的判断，直接采用深度优先遍历，去执行 commitUnmount 方法即可：

// packages/react-reconciler/src/ReactFiberCommitWork.old.js

function commitNestedUnmounts(
  finishedRoot: FiberRoot,  root: Fiber,  renderPriorityLevel: ReactPriorityLevel,
): void {
  let node: Fiber = root;
  while (true) {
    // 调用 commitUnmount 去卸载 ref、执行生命周期
    commitUnmount(finishedRoot, node, renderPriorityLevel);
    if (
      node.child !== null &&
      (!supportsMutation || node.tag !== HostPortal)
    ) {
      // 深度优先遍历向下遍历子树
      node.child.return = node;
      node = node.child;
      continue;
    }
    if (node === root) {
      // node 为 root 时说明整棵树的深度优先遍历完成
      return;
    }
    while (node.sibling === null) {
      // node.sibling 为 null 时说明当前子树遍历完成，返回上级节点继续深度优先遍历
      if (node.return === null || node.return === root) {
        return;
      }
      node = node.return;
    }
    // 遍历兄弟节点
    node.sibling.return = node.return;
    node = node.sibling;
  }
}

commitUnmount

commitUnmount 中会完成对 react 组件 ref 的卸载，若果是类组件，执行 componentWillUnmount 生命周期等操作：

// packages/react-reconciler/src/ReactFiberCommitWork.old.js

function commitUnmount(
  finishedRoot: FiberRoot,  current: Fiber,  renderPriorityLevel: ReactPriorityLevel,
): void {
  onCommitUnmount(current);

  switch (current.tag) {
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent:
    // ...
    case ClassComponent: {
      // 卸载 ref
      safelyDetachRef(current);
      const instance = current.stateNode;
      // 执行 componentWillUnmount 生命周期
      if (typeof instance.componentWillUnmount === 'function') {
        safelyCallComponentWillUnmount(current, instance);
      }
      return;
    }
    case HostComponent: {
      // 卸载 ref
      safelyDetachRef(current);
      return;
    }
    case HostPortal: {
      if (supportsMutation) {
        // 递归遍历子树
        unmountHostComponents(finishedRoot, current, renderPriorityLevel);
      } else if (supportsPersistence) {
        emptyPortalContainer(current);
      }
      return;
    }
    // ...
  }
}

最终通过以上操作，react 就完成了 dom 的删除工作。

commitLayoutEffects

接下来通过 commitLayoutEffects 为入口函数，执行第三次遍历，这里会遍历 effectList，执行 componentDidMount、componentDidUpdate 等生命周期，另外会执行 componentUpdateQueue 函数去执行回调函数。

// packages/react-reconciler/src/ReactFiberWorkLoop.old.js

function commitLayoutEffects(root: FiberRoot, committedLanes: Lanes) {
  // ...

  // 遍历 effectList
  while (nextEffect !== null) {
    setCurrentDebugFiberInDEV(nextEffect);

    const flags = nextEffect.flags;

    if (flags & (Update | Callback)) {
      const current = nextEffect.alternate;
      // 执行 componentDidMount、componentDidUpdate 以及 componentUpdateQueue
      commitLayoutEffectOnFiber(root, current, nextEffect, committedLanes);
    }

    // 更新 ref
    if (enableScopeAPI) {
      if (flags & Ref && nextEffect.tag !== ScopeComponent) {
        commitAttachRef(nextEffect);
      }
    } else {
      if (flags & Ref) {
        commitAttachRef(nextEffect);
      }
    }

    resetCurrentDebugFiberInDEV();
    nextEffect = nextEffect.nextEffect;
  }
}

执行生命周期

commitLayoutEffectOnFiber 调用了 packages/react-reconciler/src/ReactFiberCommitWork.old.js 路径下的 commitLifeCycles 函数，里面针对首次渲染和非首次渲染分别执行 componentDidMount 和 componentDidUpdate 生命周期，以及调用 commitUpdateQueue 去触发回调：

// packages/react-reconciler/src/ReactFiberCommitWork.old.js

function commitLifeCycles(
  finishedRoot: FiberRoot,  current: Fiber | null,  finishedWork: Fiber,  committedLanes: Lanes,
): void {
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent:
    // ...
    case ClassComponent: {
      const instance = finishedWork.stateNode;
      if (finishedWork.flags & Update) {
        if (current === null) {
          // 首次渲染，执行 componentDidMount 生命周期
          if (
            enableProfilerTimer &&
            enableProfilerCommitHooks &&
            finishedWork.mode & ProfileMode
          ) {
            try {
              startLayoutEffectTimer();
              instance.componentDidMount();
            } finally {
              recordLayoutEffectDuration(finishedWork);
            }
          } else {
            instance.componentDidMount();
          }
        } else {
          // 非首次渲染，执行 componentDidUpdate 生命周期
          const prevProps =
            finishedWork.elementType === finishedWork.type
              ? current.memoizedProps
              : resolveDefaultProps(finishedWork.type, current.memoizedProps);
          const prevState = current.memoizedState;
          // ...
          if (
            enableProfilerTimer &&
            enableProfilerCommitHooks &&
            finishedWork.mode & ProfileMode
          ) {
            try {
              startLayoutEffectTimer();
              instance.componentDidUpdate(
                prevProps,
                prevState,
                instance.__reactInternalSnapshotBeforeUpdate,
              );
            } finally {
              recordLayoutEffectDuration(finishedWork);
            }
          } else {
            instance.componentDidUpdate(
              prevProps,
              prevState,
              instance.__reactInternalSnapshotBeforeUpdate,
            );
          }
        }
      }

      // ...

      if (updateQueue !== null) {
        // ...
        // 执行 commitUpdateQueue 处理回调
        commitUpdateQueue(finishedWork, updateQueue, instance);
      }
      return;
    }
    case HostRoot: {

      const updateQueue: UpdateQueue<
        *,
      > | null = (finishedWork.updateQueue: any);
      if (updateQueue !== null) {
        // ...
        // 调用 commitUpdateQueue 处理 ReactDOM.render 的回调
        commitUpdateQueue(finishedWork, updateQueue, instance);
      }
      return;
    }
    case HostComponent: {
      const instance: Instance = finishedWork.stateNode;
      // ...
      // commitMount 处理 input 标签有 auto-focus 的情况
      if (current === null && finishedWork.flags & Update) {
        const type = finishedWork.type;
        const props = finishedWork.memoizedProps;
        commitMount(instance, type, props, finishedWork);
      }

      return;
    }
    // ...
}

处理回调

处理回调是在 commitUpdateQueue 中做的，它会对 finishedQueue 上面的 effects 进行遍历，若有 callback，则执行 callback。同时会重置 finishedQueue 上面的 effects 为 null：

// packages/react-reconciler/src/ReactUpdateQueue.old.js

export function commitUpdateQueue<State>(
  finishedWork: Fiber,
  finishedQueue: UpdateQueue<State>,
  instance: any,
): void {
  const effects = finishedQueue.effects;
  // 清空 effects
  finishedQueue.effects = null;
  // 对 effect 遍历
  if (effects !== null) {
    for (let i = 0; i < effects.length; i++) {
      const effect = effects[i];
      const callback = effect.callback;
      // 执行回调
      if (callback !== null) {
        effect.callback = null;
        callCallback(callback, instance);
      }
    }
  }
}

在这之后就是进行最后一点变量还原等收尾工作，然后整个 commit 过程就完成了！

总结

接着第(4)章 render 阶段的流程图，补充上 commit 阶段的流程图，就构成了完整的 react 执行图了：

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

编程算法

react

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

编程算法

react

#react