Skip to content
目录

hostRoot就是ReactDOM.render的第二个参数,通常情况下是

节点

typescript
function updateHostRoot(current, workInProgress, renderExpirationTime) {
  // 取出RootFiber上的updateQueue
  const updateQueue = workInProgress.updateQueue;
  const nextProps = workInProgress.pendingProps;
  const prevState = workInProgress.memoizedState;
  const prevChildren = prevState !== null ? prevState.element : null;
  // 执行updateQueue
  processUpdateQueue(
    workInProgress,
    updateQueue,
    nextProps,
    null,
    renderExpirationTime,
  );
  // HostRoot就是root节点,也就是RootFiber,通过ReactDOM.render产生的
  // 在updateQueue上存的就是App类组件的ReactElement
  // 执行完updateQueue后,会将App类组件的state赋值给 memoizedState
  const nextState = workInProgress.memoizedState;
  // 这里取到的nextChildren就是App类组件的ReactElement
  const nextChildren = nextState.element;
  // 如果前后节点相同,就走跳过节点更新的逻辑
  if (nextChildren === prevChildren) {
    return bailoutOnAlreadyFinishedWork(
      current,
      workInProgress,
      renderExpirationTime,
    );
  }
  const root: FiberRoot = workInProgress.stateNode;
  if (
    (current === null || current.child === null) &&
    root.hydrate &&
    enterHydrationState(workInProgress)
  ) {
    // 服务端渲染的逻辑... 
  } else {
    // 调和App节点,生成Fiber
    reconcileChildren(
      current,
      workInProgress,
      nextChildren,
      renderExpirationTime,
    );
    resetHydrationState();
  }
  return workInProgress.child;
}

备案号: 浙ICP备2023000081号