React flight client config DOM

这个客户端文件在共享文件夹中，因为它适用于 SSR 和浏览器环境。

一、作用

它是 FlightClient 行为的配置，可以在任一环境中运行。

二、调度提示

备注

• ReactDOMSharedInternals 由 ReactDOMSharedInternals 提供

export function dispatchHint<Code extends HintCode>(
  code: Code,
  model: HintModel<Code>,
): void {
  const dispatcher = ReactDOMSharedInternals.d; /* ReactDOMCurrentDispatcher */
  switch (code) {
    case 'D': {
      const refined = refineModel(code, model);
      const href = refined;
      dispatcher.D(/* prefetchDNS */ href);
      return;
    }
    case 'C': {
      const refined = refineModel(code, model);
      if (typeof refined === 'string') {
        const href = refined;
        dispatcher.C(/* preconnect */ href);
      } else {
        const href = refined[0];
        const crossOrigin = refined[1];
        dispatcher.C(/* preconnect */ href, crossOrigin);
      }
      return;
    }
    case 'L': {
      const refined = refineModel(code, model);
      const href = refined[0];
      const as = refined[1];
      if (refined.length === 3) {
        const options = refined[2];
        dispatcher.L(/* preload */ href, as, options);
      } else {
        dispatcher.L(/* preload */ href, as);
      }
      return;
    }
    case 'm': {
      const refined = refineModel(code, model);
      if (typeof refined === 'string') {
        const href = refined;
        dispatcher.m(/* preloadModule */ href);
      } else {
        const href = refined[0];
        const options = refined[1];
        dispatcher.m(/* preloadModule */ href, options);
      }
      return;
    }
    case 'X': {
      const refined = refineModel(code, model);
      if (typeof refined === 'string') {
        const href = refined;
        dispatcher.X(/* preinitScript */ href);
      } else {
        const href = refined[0];
        const options = refined[1];
        dispatcher.X(/* preinitScript */ href, options);
      }
      return;
    }
    case 'S': {
      const refined = refineModel(code, model);
      if (typeof refined === 'string') {
        const href = refined;
        dispatcher.S(/* preinitStyle */ href);
      } else {
        const href = refined[0];
        const precedence = refined[1] === 0 ? undefined : refined[1];
        const options = refined.length === 3 ? refined[2] : undefined;
        dispatcher.S(/* preinitStyle */ href, precedence, options);
      }
      return;
    }
    case 'M': {
      const refined = refineModel(code, model);
      if (typeof refined === 'string') {
        const href = refined;
        dispatcher.M(/* preinitModuleScript */ href);
      } else {
        const href = refined[0];
        const options = refined[1];
        dispatcher.M(/* preinitModuleScript */ href, options);
      }
      return;
    }
  }
}

三、为 SSR 预初始化模块

备注

• getCrossOriginString() 由 crossOriginStrings#getCrossOriginString 实现

export function preinitModuleForSSR(
  href: string,
  nonce: ?string,
  crossOrigin: ?string,
) {
  ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
    .M(/* preinitModuleScript */ href, {
      crossOrigin: getCrossOriginString(crossOrigin),
      nonce,
    });
}

四、用于 SSR 的预初始化脚本

备注

• getCrossOriginString() 由 crossOriginStrings#getCrossOriginString 实现

export function preinitScriptForSSR(
  href: string,
  nonce: ?string,
  crossOrigin: ?string,
) {
  ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
    .X(/* preinitScript */ href, {
      crossOrigin: getCrossOriginString(crossOrigin),
      nonce,
    });
}

五、工具

1. 优化模型

嗯，不错。

// Flow is having trouble refining the HintModels so we help it a bit.
// This should be compiled out in the production build.
// Flow 在优化 HintModels 时遇到了一些问题，所以我们稍作帮助。
// 这部分在生产构建中应该被编译掉。
function refineModel<T>(code: T, model: HintModel<any>): HintModel<T> {
  return model;
}