preinitModule
可以预获取和评估 ESM 模块。
preinitModule("https://example.com/module.js", {as: "script"});
参考
preinitModule(href, options)
调用 react-dom
中的 preinitModule
函数以实现预初始化 ESM 模块。
import { preinitModule } from 'react-dom';
function AppRoot() {
preinitModule("https://example.com/module.js", {as: "script"});
// ……
}
preinitModule
函数向浏览器提供一个提示,告诉它应该开始下载并执行给定的模块,这可以节省时间。预初始化的模块在下载完成后执行。
参数
href
:字符串,要下载并执行的模块的 URL。options
:对象,可以包含以下属性:
返回值
preinitModule
不返回任何值。
注意
- 对于具有相同
href
的多个preinitModule
调用具有与单个调用相同的效果。 - 在浏览器中,可以在任何情况下调用
preinitModule
:例如渲染组件时、Effect 中以及事件处理程序中等等。 - 在服务器端渲染或渲染服务器组件时,只有在渲染组件时调用
preinitModule
或在源自渲染组件的异步上下文中调用时,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>
);
}