completeWork “归” 阶段

performUnitOfWork 函数每次会调用 beginWork 来创建当前节点的子节点，如果当前节点没有子节点，则说明当前节点是一个叶子节点。在前面我们已经知道，当遍历到叶子节点时说明当前节点 “递”阶段 的工作已经完成，接下来就要进入 “归” 阶段 ，即通过 completeUnitOfWork 执行当前节点对应的 completeWork 逻辑

completeUnitOfWork 流程图

completeUnitOfWork

completeUnitOfWork 函数的作用是执行当前 Fiber 节点的 completeWork 逻辑，然后将 workInProgress 赋值为当前节点的兄弟节点或父节点

源码地址 completeUnitOfWork | react-reconciler/src/ReactFiberWorkLoop.old.js

function completeUnitOfWork(unitOfWork: Fiber): void {
  let completedWork = unitOfWork
  do {
    // 当前 Fiber 节点的 alternate 属性指向上一次渲染的 Fiber 节点
    const current = completedWork.alternate
    // 父节点
    const returnFiber = completedWork.return

    // 检查工作是否完成或抛出了错误
    if ((completedWork.flags & Incomplete) === NoFlags) {
      setCurrentDebugFiberInDEV(completedWork)
      let next
      // 是否启用了 Profiler
      if (!enableProfilerTimer || (completedWork.mode & ProfileMode) === NoMode) {
        // 执行 completeWork 函数
        next = completeWork(current, completedWork, subtreeRenderLanes)
      } else {
        startProfilerTimer(completedWork)
        next = completeWork(current, completedWork, subtreeRenderLanes)
        // Update render duration assuming we didn't error.
        stopProfilerTimerIfRunningAndRecordDelta(completedWork, false)
      }
      resetCurrentDebugFiberInDEV()

      if (next !== null) {
        // Completing this fiber spawned new work. Work on that next.
        workInProgress = next
        return
      }
    } else {
      // ... 省略大量代码
    }

    const siblingFiber = completedWork.sibling
    //  如果存在兄弟节点，则将 workInProgress 赋值为当前节点的兄弟节点
    if (siblingFiber !== null) {
      workInProgress = siblingFiber
      // return 以后会继续执行 performUnitOfWork 函数，然后进入兄弟节点的 beginWork 阶段
      return
    }
    // 若兄弟节点不存在，则说明当前节点的子节点已经遍历完毕，需要返回到父节点
    completedWork = returnFiber
    // 将 workInProgress 赋值为父节点
    workInProgress = completedWork
  } while (completedWork !== null)

  // We've reached the root.
  if (workInProgressRootExitStatus === RootInProgress) {
    workInProgressRootExitStatus = RootCompleted
  }
}

completeWork

类似 beginWork，completeWork 也是根据 fiber.tag 来调用不同的处理逻辑（重点分析 HostComponent 的逻辑）

源码地址 completeWork | react-reconciler/src/ReactFiberCompleteWork.old.js

function completeWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
): Fiber | null {
  const newProps = workInProgress.pendingProps

  switch (workInProgress.tag) {
    case IndeterminateComponent:
    case LazyComponent:
    case SimpleMemoComponent:
    case FunctionComponent:
    case ForwardRef:
    case Fragment:
    case Mode:
    case Profiler:
    case ContextConsumer:
    case MemoComponent:
    case ClassComponent: {
      // ... 省略大量代码
      return null
    }
    case HostRoot: {
      // ... 省略大量代码
      updateHostContainer(current, workInProgress)
      return null
    }
    // 普通 DOM 标签（重点分析）
    case HostComponent: {
      popHostContext(workInProgress)
      const rootContainerInstance = getRootHostContainer()
      const type = workInProgress.type

      // 通过判断 current 来区分 mount 还是 update
      if (current !== null && workInProgress.stateNode != null) {
        // update 阶段
        updateHostComponent(current, workInProgress, type, newProps, rootContainerInstance)

        if (current.ref !== workInProgress.ref) {
          markRef(workInProgress)
        }
      } else {
        // mount 阶段
        if (!newProps) {
          if (workInProgress.stateNode === null) {
            throw new Error(
              'We must have new props for new mounts. This error is likely ' +
                'caused by a bug in React. Please file an issue.',
            )
          }

          // This can happen when we abort work.
          bubbleProperties(workInProgress)
          return null
        }

        const currentHostContext = getHostContext()

        // 判断是不是服务端渲染
        const wasHydrated = popHydrationState(workInProgress)
        if (wasHydrated) {
          if (
            prepareToHydrateHostInstance(workInProgress, rootContainerInstance, currentHostContext)
          ) {
            // If changes to the hydrated node need to be applied at the
            // commit-phase we mark this as such.
            markUpdate(workInProgress)
          }
        } else {
          // 为 Fiber 节点创建对应的 DOM 节点
          const instance = createInstance(
            type,
            newProps,
            rootContainerInstance,
            currentHostContext,
            workInProgress,
          )

          // 将子孙 DOM 节点插入刚生成的 DOM 节点中
          appendAllChildren(instance, workInProgress, false, false)

          // 将 DOM 节点赋值给 fiber.stateNode
          workInProgress.stateNode = instance

          if (
            // 为 DOM 节点添加属性
            finalizeInitialChildren(
              instance,
              type,
              newProps,
              rootContainerInstance,
              currentHostContext,
            )
          ) {
            markUpdate(workInProgress)
          }
        }

        if (workInProgress.ref !== null) {
          // If there is a ref on a host node we need to schedule a callback
          markRef(workInProgress)
        }
      }
      bubbleProperties(workInProgress)
      return null
    }

    // ... 以下 case 省略大量代码
    case HostText:
    case SuspenseComponent:
    case HostPortal:
    case ContextProvider:
    case IncompleteClassComponent:
    case SuspenseListComponent:
    case ScopeComponent:
    case OffscreenComponent:
    case LegacyHiddenComponent:
    case CacheComponent:
    case TracingMarkerComponent:
      return null
  }

  throw new Error(
    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
      'React. Please file an issue.',
  )
}

bubbleProperties 函数的作用

bubbleProperties 函数通过检查 fiber.child 及其兄弟节点 fiber.child.sibling 来更新 subtreeFlags 和 childLanes，以标记子树的更新状态。这样就可以通过 fiber.subtreeFlags 的值来快速判断子树是否包含副作用钩子，避免了深度遍历整个子树的开销

mount 阶段

createInstance

createInstance 函数的作用是为 Fiber 节点创建对应的 DOM 节点

源码地址 createInstance | react-dom/src/client/ReactDOMHostConfig.js

function createInstance(
  type: string,
  props: Props,
  rootContainerInstance: Container,
  hostContext: HostContext,
  internalInstanceHandle: Object,
): Instance {
  let parentNamespace: string
  if (__DEV__) {
    // ... 省略 DEV 环境下的代码
  } else {
    parentNamespace = hostContext
  }
  // 创建 DOM 节点
  const domElement: Instance = createElement(type, props, rootContainerInstance, parentNamespace)
  // 将当前 Fiber 节点挂载到 DOM 节点上
  precacheFiberNode(internalInstanceHandle, domElement)
  // 将当前的 props 挂载到 DOM 节点
  updateFiberProps(domElement, props)
  return domElement
}

appendAllChildren

appendAllChildren 函数会遍历传入的 workInProgress 的子节点，并将这些子节点的 stateNode 插入到父节点中

源码地址 appendAllChildren | react-reconciler/src/ReactFiberCompleteWork.old.js

appendAllChildren = function (
  parent: Instance,
  workInProgress: Fiber,
  needsVisibilityToggle: boolean,
  isHidden: boolean,
) {
  // 遍历 workInProgress 的子节点
  let node = workInProgress.child
  while (node !== null) {
    if (node.tag === HostComponent || node.tag === HostText) {
      // 如果当前节点是 DOM 节点或文本节点，则将其直接插入到父节点中
      appendInitialChild(parent, node.stateNode)
    } else if (node.tag === HostPortal) {
      // If we have a portal child, then we don't want to traverse
      // down its children. Instead, we'll get insertions from each child in
      // the portal directly.
      // 如果当前节点是 HostPortal 则不需要遍历其子节点
    } else if (node.child !== null) {
      // 如果当前节点不是 DOM 节点或文本节点且存在子节点
      // 则将子节点的 return 属性指向当前节点，然后继续遍历处理子节点
      node.child.return = node
      node = node.child
      continue
    }

    // 当遍历结果为 workInProgress 时说明当前节点的子节点已经遍历完毕
    if (node === workInProgress) {
      return
    }

    // 遍历找到当前节点的下一个兄弟节点
    while (node.sibling === null) {
      // 当前节点没有父节点或父节点是 workInProgress 时遍历结束
      if (node.return === null || node.return === workInProgress) {
        return
      }
      // 向上迭代至父节点，寻找有兄弟节点的节点
      node = node.return
    }
    // 将兄弟节点的 return 指向同一个父节点
    node.sibling.return = node.return
    // 继续遍历处理下一个兄弟节点
    node = node.sibling
  }
}

finalizeInitialChildren

finalizeInitialChildren 函数会调用 setInitialProperties 来进行属性和事件的设置，然后根据 DOM 节点的类型来判断是否需要聚焦

源码地址 finalizeInitialChildren | react-dom/src/client/ReactDOMHostConfig.js

function finalizeInitialChildren(
  domElement: Instance,
  type: string,
  props: Props,
  rootContainerInstance: Container,
  hostContext: HostContext,
): boolean {
  // 属性和事件的设置
  setInitialProperties(domElement, type, props, rootContainerInstance)

  // 是否需要聚焦
  switch (type) {
    case 'button':
    case 'input':
    case 'select':
    case 'textarea':
      return !!props.autoFocus
    case 'img':
      return true
    default:
      return false
  }
}

setInitialProperties

setInitialProperties 函数用于设置 DOM 节点的属性以及事件监听

源码地址 setInitialProperties | react-dom/src/client/ReactDOMComponent.js

function setInitialProperties(
  domElement: Element,
  tag: string,
  rawProps: Object,
  rootContainerElement: Element | Document | DocumentFragment,
): void {
  // 判断是否为自定义组件
  const isCustomComponentTag = isCustomComponent(tag, rawProps)

  let props: Object
  // 根据 tag 来处理不同的事件和属性
  switch (
    tag
    // ... 省略大量代码
  ) {
  }

  // 校验 props 是否合法
  assertValidProps(tag, props)

  // 设置 DOM 节点的属性
  setInitialDOMProperties(tag, domElement, rootContainerElement, props, isCustomComponentTag)

  // 对特定标签进行后续处理
  switch (tag) {
    case 'input':
      track(domElement)
      ReactDOMInputPostMountWrapper(domElement, rawProps, false)
      break
    // ... 省略大量代码
    case 'textarea':
    case 'option':
    case 'select':
    default:
      if (typeof props.onClick === 'function') {
        trapClickOnNonInteractiveElement(domElement)
      }
      break
  }
}

update 阶段

• updateHostContainer 处理根节点
• updateHostComponent 处理普通 DOM 节点
• updateHostText 处理文本节点

这里只分析 updateHostComponent

updateHostComponent

源码地址 updateHostComponent | react-reconciler/src/ReactFiberCompleteWork.old.js

updateHostComponent = function (
  current: Fiber,
  workInProgress: Fiber,
  type: Type,
  newProps: Props,
  rootContainerInstance: Container,
) {
  // If we have an alternate, that means this is an update and we need to
  // schedule a side-effect to do the updates.
  const oldProps = current.memoizedProps
  if (oldProps === newProps) {
    // In mutation mode, this is sufficient for a bailout because
    // we won't touch this node even if children changed.
    return
  }

  // If we get updated because one of our children updated, we don't
  // have newProps so we'll have to reuse them.
  // TODO: Split the update API as separate for the props vs. children.
  // Even better would be if children weren't special cased at all tho.
  const instance: Instance = workInProgress.stateNode
  const currentHostContext = getHostContext()

  // 对比新旧 props 的差异，生成更新 payload
  const updatePayload = prepareUpdate(
    instance,
    type,
    oldProps,
    newProps,
    rootContainerInstance,
    currentHostContext,
  )
  workInProgress.updateQueue = updatePayload

  // 如果 payload 存在，标记当前节点需要更新（所有的更新操作在 commitWork 阶段执行）
  if (updatePayload) {
    markUpdate(workInProgress)
  }
}

updatePayload 的值是一个数组

• 偶数索引的值为变化的 prop key
• 奇数索引的值为变化的 prop value

以下面的代码举 🌰

function UpdatePayload() {
  const [state, setState] = useState(0)

  return (
    <button state={state} name={`maomao ${state * 2}`} onClick={() => setState((v) => v + 1)}>
      点击 +1
    </button>
  )
}