preloadModule - This feature is available in the latest Canary

Canary

preloadModule 函数目前仅在 React 的 Canary 和实验通道中可用。了解有关 React 的发布渠道在这里 的更多信息。

¥The preloadModule function is currently only available in React’s Canary and experimental channels. Learn more about React’s release channels here.

注意

基于 React 的框架 经常为你处理资源加载,因此你可能不必自己调用此 API。有关详细信息,请参阅你的框架的文档。

¥React-based frameworks frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework’s documentation for details.

preloadModule 可让你预先获取你希望使用的 ESM 模块。

¥preloadModule lets you eagerly fetch an ESM module that you expect to use.

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

参考

¥Reference

preloadModule(href, options)

要预加载 ESM 模块,请从 react-dom 调用 preloadModule 函数。

¥To preload an ESM module, call the preloadModule function from react-dom.

import { preloadModule } from 'react-dom';

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

请参阅下面的更多示例。

¥See more examples below.

preloadModule 函数向浏览器提供一个提示,指示它应该开始下载给定的模块,这可以节省时间。

¥The preloadModule function provides the browser with a hint that it should start downloading the given module, which can save time.

参数

¥Parameters

  • href:一个字符串。你要下载的模块的 URL。

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

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

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

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

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

    • crossOrigin:一个字符串。要使用的 CORS 政策。它的可能值为 anonymoususe-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

preloadModule 不返回任何内容。

¥preloadModule returns nothing.

注意事项

¥Caveats

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

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

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

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

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

    ¥In server-side rendering or when rendering Server Components, preloadModule 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

如果你知道组件或其子组件将使用特定模块,则在渲染组件时调用 preloadModule

¥Call preloadModule when rendering a component if you know that it or its children will use a specific module.

import { preloadModule } from 'react-dom';

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

如果你希望浏览器立即开始执行模块(而不是仅仅下载它),请改用 preinitModule。如果要加载不是 ESM 模块的脚本,请使用 preload

¥If you want the browser to start executing the module immediately (rather than just downloading it), use preinitModule instead. If you want to load a script that isn’t an ESM module, use preload.

在事件处理程序中预加载

¥Preloading in an event handler

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

¥Call preloadModule 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 { preloadModule } from 'react-dom';

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

React 中文网 - 粤ICP备13048890号