React Fiber 视图过渡组件

一、作用

二、获取视图过渡名称

备注

• getCommittingRoot() 由 ReactFiberWorkLoop 提供

export function getViewTransitionName(
  props: ViewTransitionProps,
  instance: ViewTransitionState,
): string {
  if (props.name != null && props.name !== 'auto') {
    return props.name;
  }
  if (instance.autoName !== null) {
    return instance.autoName;
  }

  // We assume we always call this in the commit phase.
  // 我们假设总是在提交阶段调用此方法。
  const root = getCommittingRoot() as any as FiberRoot;
  const identifierPrefix = root.identifierPrefix;
  const globalClientId = globalClientIdCounter++;
  const name =
    '_' + identifierPrefix + 't_' + globalClientId.toString(32) + '_';
  instance.autoName = name;
  return name;
}

三、获取视图过渡类名

export function getViewTransitionClassName(
  defaultClass: ?ViewTransitionClass,
  eventClass: ?ViewTransitionClass,
): ?string {
  const className: ?string = getClassNameByType(defaultClass);
  const eventClassName: ?string = getClassNameByType(eventClass);
  if (eventClassName == null) {
    return className === 'auto' ? null : className;
  }
  if (eventClassName === 'auto') {
    return null;
  }
  return eventClassName;
}

四、变量

1. 全局客户端 ID 计数器

let globalClientIdCounter: number = 0;

五、工具

1. 通过类型获取类名

备注

• getPendingTransitionTypes() 由 ReactFiberWorkLoop 提供

function getClassNameByType(classByType: ?ViewTransitionClass): ?string {
  if (classByType == null || typeof classByType === 'string') {
    return classByType;
  }
  let className: ?string = null;
  const activeTypes = getPendingTransitionTypes();
  if (activeTypes !== null) {
    for (let i = 0; i < activeTypes.length; i++) {
      const match = classByType[activeTypes[i]];
      if (match != null) {
        if (match === 'none') {
          // If anything matches "none" that takes precedence over any other
          // type that also matches.
          //
          // 如果有任何内容匹配“none”，它将优先于其他任何匹配的类型。
          return 'none';
        }
        if (className == null) {
          className = match;
        } else {
          className += ' ' + match;
        }
      }
    }
  }
  if (className == null) {
    // We had no other matches. Match the default for this configuration.
    // 我们没有其他匹配项。匹配此配置的默认值。
    return classByType.default;
  }
  return className;
}