preinitModule
允许您预先获取并评估 ESM 模块。
preinitModule("https://example.com/module.js", {as: "script"});
参考
preinitModule(href, options)
要预初始化 ESM 模块,请从 react-dom
调用 preinitModule
函数。
import { preinitModule } from 'react-dom';
function AppRoot() {
preinitModule("https://example.com/module.js", {as: "script"});
// ...
}
preinitModule
函数为浏览器提供了一个提示,即它应该开始下载和执行给定的模块,这可以节省时间。您使用 preinit
预初始化的模块将在下载完成后执行。
参数
href
:字符串。要下载和执行的模块的 URL。options
:对象。它包含以下属性as
:必需的字符串。它必须是'script'
。crossOrigin
:字符串。要使用的 CORS 策略。其可能的值为anonymous
和use-credentials
。integrity
:字符串。模块的加密哈希值,用于验证其真实性。nonce
:字符串。使用严格内容安全策略时允许模块的加密随机数。
返回值
preinitModule
不返回任何值。
注意事项
- 多次调用具有相同
href
的preinitModule
与调用一次的效果相同。 - 在浏览器中,您可以在任何情况下调用
preinitModule
:渲染组件时、在 Effect 中、在事件处理程序中,等等。 - 在服务器端渲染或渲染服务器组件时,仅当您在渲染组件时或在源自渲染组件的异步上下文中调用
preinitModule
时,它才会生效。任何其他调用都将被忽略。
用法
渲染时预加载
如果知道组件或其子组件将使用特定模块,并且您希望模块在下载后立即进行评估并生效,请在渲染组件时调用 preinitModule
。
import { preinitModule } from 'react-dom';
function AppRoot() {
preinitModule("https://example.com/module.js", {as: "script"});
return ...;
}
如果您希望浏览器下载模块但不立即执行它,请改用 preloadModule
。 如果要预初始化不是 ESM 模块的脚本,请使用 preinit
。
在事件处理程序中预加载
在转换到需要模块的页面或状态之前,在事件处理程序中调用 preinitModule
。 这比在新页面或状态的渲染过程中调用它更早地启动了该过程。
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>
);
}