preinitModule

preinitModule("https://example.com/module.js", {as: "script"});

• 参考
  • preinitModule(href, options)
• 用法
  • 渲染时预加载
  • 在事件处理程序中预加载

参考

¥Reference

preinitModule(href, options)

要预初始化 ESM 模块，请从 react-dom 调用 preinitModule 函数。

¥To preinit an ESM module, call the preinitModule function from react-dom.

import { preinitModule } from 'react-dom';

function AppRoot() {
  preinitModule("https://example.com/module.js", {as: "script"});
  // ...
}

请参阅下面的更多示例。

¥See more examples below.

preinitModule 函数向浏览器提供了一个提示，表明它应该开始下载并执行给定的模块，这可以节省时间。你 preinit 的模块将在下载完成后执行。

¥The preinitModule function provides the browser with a hint that it should start downloading and executing the given module, which can save time. Modules that you preinit are executed when they finish downloading.

参数

¥Parameters

• href：一个字符串。你要下载并执行的模块的 URL。

  ¥href: a string. The URL of the module you want to download and exeucute.

• options：一个对象。它包含以下属性：

  ¥options: an object. It contains the following properties:

  • as：一个必需的字符串。一定是 'script'。

    ¥as: a required string. It must be 'script'.

  • crossOrigin：一个字符串。要使用的 CORS 政策。它的可能值为 anonymous 和 use-credentials。

    ¥crossOrigin: a string. The CORS policy to use. Its possible values are anonymous and use-credentials.

  • integrity：一个字符串。模块的加密哈希，为 验证其真实性。

    ¥integrity: a string. A cryptographic hash of the module, to verify its authenticity.

  • nonce：一个字符串。使用严格的内容安全策略时的加密 允许模块的随机数。

    ¥nonce: a string. A cryptographic nonce to allow the module when using a strict Content Security Policy.

返回

¥Returns

preinitModule 不返回任何内容。

¥preinitModule returns nothing.

注意事项

¥Caveats

• 对具有相同 href 的 preinitModule 进行多次调用与单次调用具有相同的效果。

  ¥Multiple calls to preinitModule with the same href have the same effect as a single call.

• 在浏览器中，任何情况都可以调用 preinitModule：在渲染组件时、在副作用中、在事件处理程序中等等。

  ¥In the browser, you can call preinitModule in any situation: while rendering a component, in an Effect, in an event handler, and so on.

• 在服务器端渲染或渲染服务器组件时，preinitModule 仅在渲染组件时或在源自渲染组件的异步上下文中调用它时才有效。任何其他调用都将被忽略。

  ¥In server-side rendering or when rendering Server Components, preinitModule only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.

用法

¥Usage

渲染时预加载

¥Preloading when rendering

如果你知道该组件或其子组件将使用特定模块，并且你同意评估该模块并因此在下载后立即生效，则在渲染组件时调用 preinitModule。

¥Call preinitModule when rendering a component if you know that it or its children will use a specific module and you’re OK with the module being evaluated and thereby taking effect immediately upon being downloaded.

import { preinitModule } from 'react-dom';

function AppRoot() {
  preinitModule("https://example.com/module.js", {as: "script"});
  return ...;
}

如果你希望浏览器下载模块但不立即执行它，请改用 preloadModule。如果要预初始化不是 ESM 模块的脚本，请使用 preinit。

¥If you want the browser to download the module but not to execute it right away, use preloadModule instead. If you want to preinit a script that isn’t an ESM module, use preinit.

在事件处理程序中预加载

¥Preloading in an event handler

在转换到需要模块的页面或状态之前，在事件处理程序中调用 preinitModule。与在渲染新页面或状态期间调用该进程相比，这可以更早地启动该进程。

¥Call preinitModule in an event handler before transitioning to a page or state where the module will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.

import { preinitModule } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preinitModule("https://example.com/module.js", {as: "script"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}