跳到主要内容

React Fiber 隐藏上下文

一、作用​

二、推送隐藏上下文​

备注
export function pushHiddenContext(fiber: Fiber, context: HiddenContext): void {
  const prevEntangledRenderLanes = getEntangledRenderLanes();
  push(prevEntangledRenderLanesCursor, prevEntangledRenderLanes, fiber);
  push(currentTreeHiddenStackCursor, context, fiber);

  // When rendering a subtree that's currently hidden, we must include all
  // lanes that would have rendered if the hidden subtree hadn't been deferred.
  // That is, in order to reveal content from hidden -> visible, we must commit
  // all the updates that we skipped when we originally hid the tree.
  //
  // 当渲染当前隐藏的子树时，我们必须包含所有本应渲染的任务队列，即使这些子树被延迟了。
  // 也就是说，为了将内容从隐藏 -> 可见显示出来，我们必须提交最初隐藏树时跳过的所有更新。
  setEntangledRenderLanes(
    mergeLanes(prevEntangledRenderLanes, context.baseLanes),
  );
}

三、在堆栈上重用隐藏上下文​

备注
export function reuseHiddenContextOnStack(fiber: Fiber): void {
  // This subtree is not currently hidden, so we don't need to add any lanes
  // to the render lanes. But we still need to push something to avoid a
  // context mismatch. Reuse the existing context on the stack.
  //
  // 这个子树目前没有被隐藏，所以我们不需要向渲染通道添加任何内容
  // 但我们仍然需要推送一些东西，以避免上下文不匹配。重用堆栈上现有的上下文。
  push(prevEntangledRenderLanesCursor, getEntangledRenderLanes(), fiber);
  push(
    currentTreeHiddenStackCursor,
    currentTreeHiddenStackCursor.current,
    fiber,
  );
}

四、弹出隐藏上下文​

备注
export function popHiddenContext(fiber: Fiber): void {
  // Restore the previous render lanes from the stack
  // 从堆栈恢复以前的渲染通道
  setEntangledRenderLanes(prevEntangledRenderLanesCursor.current);

  pop(currentTreeHiddenStackCursor, fiber);
  pop(prevEntangledRenderLanesCursor, fiber);
}

五、当前树是否隐藏​

export function isCurrentTreeHidden(): boolean {
  return currentTreeHiddenStackCursor.current !== null;
}

六、常量​

1. 当前树隐藏堆栈指针​

备注
// TODO: This isn't being used yet, but it's intended to replace the
// InvisibleParentContext that is currently managed by SuspenseContext.
//
// 待办事项：此功能尚未使用，但其目的是取代当前由 SuspenseContext
// 管理的 InvisibleParentContext。
export const currentTreeHiddenStackCursor: StackCursor<HiddenContext | null> =
  createCursor(null);

2. 上一个纠缠渲染 Lane 指针​

备注
export const prevEntangledRenderLanesCursor: StackCursor<Lanes> =
  createCursor(NoLanes);