React Fiber 重复视图过渡

一、作用

二、跟踪命名视图过渡

备注

• runWithFiberInDEV() 由 ReactCurrentFiber#runWithFiberInDEV 实现

export function trackNamedViewTransition(fiber: Fiber): void {
  if (__DEV__) {
    const name = (fiber.memoizedProps as ViewTransitionProps).name;
    if (name != null && name !== 'auto') {
      const existing = mountedNamedViewTransitions.get(name);
      if (existing !== undefined) {
        if (existing !== fiber && existing !== fiber.alternate) {
          if (!didWarnAboutName[name]) {
            didWarnAboutName[name] = true;
            const stringifiedName = JSON.stringify(name);
            runWithFiberInDEV(fiber, () => {
              console.error(
                'There are two <ViewTransition name=%s> components with the same name mounted ' +
                  'at the same time. This is not supported and will cause View Transitions ' +
                  'to error. Try to use a more unique name e.g. by using a namespace prefix ' +
                  'and adding the id of an item to the name.',
                stringifiedName,
              );
            });
            runWithFiberInDEV(existing, () => {
              console.error(
                'The existing <ViewTransition name=%s> duplicate has this stack trace.',
                stringifiedName,
              );
            });
          }
        }
      } else {
        mountedNamedViewTransitions.set(name, fiber);
      }
    }
  }
}

三、取消跟踪命名视图过渡

export function untrackNamedViewTransition(fiber: Fiber): void {
  if (__DEV__) {
    const name = (fiber.memoizedProps: ViewTransitionProps).name;
    if (name != null && name !== 'auto') {
      const existing = mountedNamedViewTransitions.get(name);
      if (
        existing !== undefined &&
        (existing === fiber || existing === fiber.alternate)
      ) {
        mountedNamedViewTransitions.delete(name);
      }
    }
  }
}

四、常量

// Use in DEV to track mounted named ViewTransitions. This is used to warn for
// duplicate names. This should technically be tracked per Document because you could
// have two different documents that can have separate namespaces, but to keep things
// simple we just use a global Map. Technically it should also include any manually
// assigned view-transition-name outside React too.
//
// 在开发环境中使用，用于跟踪已挂载的命名 ViewTransitions。这用于提示重复名称。
// 从技术上讲，这应该按文档进行跟踪，因为你可能有两个不同的文档，它们可以有各自的命名空间，
// 但为了简单起见，我们只是使用全局 Map。
// 从技术上讲，它还应该包括在 React 外部手动分配的任何 view-transition-name。
// + 已挂载命名视图过渡
const mountedNamedViewTransitions: Map<string, Fiber> = __DEV__
  ? new Map()
  : (null as any);
// + 已警告有关名称
const didWarnAboutName: { [string]: boolean } = __DEV__ ? {} : (null as any);