React fiber(HostRoot) payload{element} 的作用

[creamidea]

element 为第一个组件，即 HostRoot 的 children

在 render 函数里面，处理成 update.payload = { element }

在 render phase updateHostRoot 函数内，通过判读前后 children，判断 HostRoot 是否可以 bailout。所以作用就是快速路径返回的作用。

function updateHostRoot() {
    ...
    const prevState = workInProgress.memoizedState;
    const prevChildren = prevState.element;
    ...
    if (nextChildren === prevChildren) {
      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
    }
    ...
}

在 processUpdateQueue 内将 update.payload = { element }，计算 state 结果放到 memoizedState 里

function processUpdateQueue() {
  ...
  // getStateFromUpdate 函数内 UpdateState 分支处理
  // payload 不是函数，所以直接返回 payload
  newState = getStateFromUpdate(
    workInProgress,
    queue,
    update,
    newState,
    props,
    instance,
  );
  ...
  workInProgress.memoizedState = newState;
}