React Fiber Transition Types

一、作用

二、队列转换类型

备注

• includesTransitionLane() 由 ReactFiberLane#includesTransitionLane 实现

export function queueTransitionTypes(
  root: FiberRoot,
  transitionTypes: TransitionTypes,
): void {
  if (enableViewTransition) {
    // TODO: We should really store transitionTypes per lane in a LaneMap on
    // the root. Then merge it when we commit. We currently assume that all
    // Transitions are entangled.
    //
    // TODO: 我们真的应该在根节点的 LaneMap 中为每条车道存储 transitionTypes。
    // 然后在提交时合并它。目前我们假设所有的 Transitions 都是交织在一起的。
    if (includesTransitionLane(root.pendingLanes)) {
      let queued = root.transitionTypes;
      if (queued === null) {
        queued = root.transitionTypes = [];
      }
      for (let i = 0; i < transitionTypes.length; i++) {
        const transitionType = transitionTypes[i];
        if (queued.indexOf(transitionType) === -1) {
          queued.push(transitionType);
        }
      }
    }
  }
}

三、纠缠过渡类型

// Store all types while we're entangled with an async Transition.
// 在我们与异步 Transition 纠缠时存储所有类型。
export let entangledTransitionTypes: null | TransitionTypes = null;

四、纠缠异步转换类型

export function entangleAsyncTransitionTypes(
  transitionTypes: TransitionTypes,
): void {
  if (enableViewTransition) {
    let queued = entangledTransitionTypes;
    if (queued === null) {
      queued = entangledTransitionTypes = [];
    }
    for (let i = 0; i < transitionTypes.length; i++) {
      const transitionType = transitionTypes[i];
      if (queued.indexOf(transitionType) === -1) {
        queued.push(transitionType);
      }
    }
  }
}

五、清除纠缠异步转换类型

信息

为啥不叫“重置”？

export function clearEntangledAsyncTransitionTypes() {
  // Called when all Async Actions are done.
  // 当所有异步操作完成时调用。
  entangledTransitionTypes = null;
}

六、请求排队的过渡类型

export function claimQueuedTransitionTypes(
  root: FiberRoot,
): null | TransitionTypes {
  const claimed = root.transitionTypes;
  root.transitionTypes = null;
  return claimed;
}