React的更新工作次要是调用一个叫做workLoop的工作循环去构建workInProgress树，构建过程分为两个阶段：向下遍历和向上回溯，向下和向上的过程中会对路径的每个节点进行beginWork和completeWork。

本文行将提到的beginWork是解决节点更新的入口，它会根据fiber节点的类型去调用不同的处理函数。

React对每个节点进行beginWork操作，进入beginWork后，首先判断节点及其子树是否有更新，若有更新，则会在计算新状态和diff之后生成新的Fiber，而后在新的fiber上标记flags（effectTag），最初return它的子节点，以便持续针对子节点进行beginWork。若它没有子节点，则返回null，这样阐明这个节点是末端节点，能够进行向上回溯，进入completeWork阶段。

点击进入React源码调试仓库。

beginWork的工作流程如下图，图中简化了流程，只对App节点进行了beginWork解决，其余节点流程类似

职责

通过概述可知beginWork阶段的整体工作是去更新节点，并返回子树，但真正的beginWork函数只是节点更新的入口，不会间接进行更新操作。作为入口，它的职责很显著，拦挡无需更新的节点。同时，它还会将context信息入到栈中（beginWork入栈，completeWork出栈），临时先不关注。

function beginWork(
    current: Fiber | null,
    workInProgress: Fiber,
    renderLanes: Lanes
): Fiber | null {
  // 获取workInProgress.lanes，可通过判断它是否为空去判断该节点是否须要更新
  const updateLanes = workInProgress.lanes;

  // 根据current是否存在判断以后是首次挂载还是后续的更新
  // 如果是更新，先看优先级够不够，不够的话就能调用bailoutOnAlreadyFinishedWork
  // 复用fiber节点来跳出对以后这个节点的解决了。
  if (current !== null) {
    const oldProps = current.memoizedProps;
    const newProps = workInProgress.pendingProps;
    if (
        oldProps !== newProps ||
        hasLegacyContextChanged()
    ) {
      didReceiveUpdate = true;
    } else if (!includesSomeLane(renderLanes, updateLanes)) {
      // 此时无需更新
      didReceiveUpdate = false;
      switch (workInProgress.tag) {
        case HostRoot:
          ...
        case HostComponent:
          ...
        case ClassComponent:
          ...
        case HostPortal:
          ...
      }

      // 拦挡无需更新的节点
      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
    }
  } else {
    didReceiveUpdate = false;
  }

  // 代码走到这里阐明的确要去解决节点了，此时会依据不同fiber的类型
  // 去调用它们各自的处理函数

  // 先清空workInProgress节点上的lanes，因为更新过程中用不到，
  // 在解决完updateQueue之后会从新赋值
  workInProgress.lanes = NoLanes;

  // 根据不同的节点类型来解决节点的更新
  switch (workInProgress.tag) {
    case IndeterminateComponent:
      ...
    case LazyComponent:
      ...
    case FunctionComponent:
      ...
      return updateFunctionComponent(
          current,
          workInProgress,
          Component,
          resolvedProps,
          renderLanes,
      );
    }
    case ClassComponent:
      ...
      return updateClassComponent(
          current,
          workInProgress,
          Component,
          resolvedProps,
          renderLanes,
      );
    }
    case HostRoot:
      return updateHostRoot(current, workInProgress, renderLanes);
    case HostComponent:
      return updateHostComponent(current, workInProgress, renderLanes);
    case HostText:
      return updateHostText(current, workInProgress);

    ......
  }
}

能够看出，一旦节点进入beginWork，会先去辨认该节点是否须要解决，若无需解决，则调用bailoutOnAlreadyFinishedWork复用节点，否则才真正去更新。

如何辨别更新与初始化过程

判断current是否存在。

这首先要了解current是什么，基于双缓冲的规定，调度更新时有两棵树，展现在屏幕上的current Tree和正在后盾基于current树构建的
workInProgress Tree。那么，current和workInProgress能够了解为镜像的关系。workLoop循环以后遍历到的workInProgress节点来自于它对应的current节点父级fiber的子节点（即current节点），所以workInProgress节点和current节点也是镜像的关系。

如果是首次渲染，对具体的workInProgress节点来说，它是没有current节点的，如果是在更新过程，因为current节点曾经在首次渲染时产生了，所以workInProgress节点有对应的current节点存在。

最终会依据节点是首次渲染还是更新来决定是创立fiber还是diff fiber。只不过更新时，如果节点的优先级不够会间接复用已有节点，即走跳出（bailout）的逻辑，而不是去走上面的更新逻辑。

复用节点过程

节点可复用示意它无需更新。在下面beginWork的代码中能够看到，若节点的优先级不满足要求，阐明它不必更新，会调用bailoutOnAlreadyFinishedWork函数，去复用current节点作为新的workInProgress树的节点。

beginWork函数中拦挡无需更新节点的逻辑

if (!includesSomeLane(renderLanes, updateLanes)) {
  ...

  // 此时无需更新，拦挡无需更新的节点
  return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

beginWork它的返回值有两种状况：

• 返回以后节点的子节点，而后会以该子节点作为下一个工作单元持续beginWork，一直往下生成fiber节点，构建workInProgress树。
• 返回null，以后fiber子树的遍历就此终止，从以后fiber节点开始往回进行completeWork。

bailoutOnAlreadyFinishedWork函数的返回值也是如此。

• 返回以后节点的子节点，前置条件是以后节点的子节点有更新，此时以后节点未经解决，是能够间接复用的，复用的过程就是复制一份current节点的子节点，并把它return进来。
• 返回null，前提是以后子节点没有更新，以后子树的遍历过程就此终止。开始completeWork。

从这个函数中，咱们也能够意识到，辨认以后fiber节点的子树有无更新显得尤为重要，这能够决定是否终止以后Fiber子树的遍历，将复杂度间接升高。实际上能够通过fiber.childLanes去辨认，childLanes如果不为空，表明子树中有须要更新的节点，那么须要持续往下走。

标记fiber.childLanes的过程是在开始调度时产生的，在markUpdateLaneFromFiberToRoot 函数中

带着上边的认知，来看一下源码理解具体的复用过程：

function bailoutOnAlreadyFinishedWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes
): Fiber | null {

  if (current !== null) {
    workInProgress.dependencies = current.dependencies;
  }

  // 标记有跳过的更新
  markSkippedUpdateLanes(workInProgress.lanes);

  // 如果子节点没有更新，返回null，终止遍历
  if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
    return null;
  } else {
    // 子节点有更新，那么从current上复制子节点，并return进来
    cloneChildFibers(current, workInProgress);
    return workInProgress.child;
  }
}

总结

beginWork的次要性能就是解决以后遍历到的fiber，通过一番解决之后返回它的子fiber，一个一个地往外吐出fiber节点，那么workInProgress树也就会被一点一点地构建进去。

这是beginWork的大抵流程，但实际上，外围更新的工作都是在各个更新函数中，这些函数会安顿fiber节点顺次进入两大解决流程：计算新状态和Diff算法，限于篇幅，这两个内容会分两篇文章具体解说，能够继续关注。

欢送扫码关注公众号，发现更多技术文章