preinit 允许您提前获取并评估样式表或外部脚本。
preinit("https://example.com/script.js", {as: "script"});参考
preinit(href, options)
要预初始化脚本或样式表，请从 react-dom 调用 preinit 函数。
import { preinit } from 'react-dom';
function AppRoot() {
preinit("https://example.com/script.js", {as: "script"});
// ...
}preinit 函数向浏览器提供提示，指示它应开始下载和执行给定的资源，这可以节省时间。preinit 的脚本在下载完成后执行。 您预初始化的样式表将插入到文档中，这将导致它们立即生效。
参数
href：字符串。您要下载和执行的资源的 URL。options：对象。它包含以下属性as：必需的字符串。资源的类型。其可能的值为script和style。precedence：字符串。样式表中必需。说明相对于其他样式表插入样式表的位置。优先级较高的样式表可以覆盖优先级较低的样式表。可能的值为reset、low、medium、high。crossOrigin：字符串。要使用的 CORS 策略。其可能的值为anonymous和use-credentials。当as设置为"fetch"时，这是必需的。integrity：字符串。资源的加密哈希，用于 验证其真实性。nonce：字符串。在使用严格的内容安全策略时，允许使用资源的加密 nonce。fetchPriority：字符串。建议资源获取的相对优先级。可能的值包括auto（默认值）、high和low。
返回
preinit 不返回任何值。
注意事项
- 对具有相同
href的preinit进行多次调用，与单次调用具有相同的效果。 - 在浏览器中，你可以在任何情况下调用
preinit：在渲染组件时、在Effect中、在事件处理程序中等等。 - 在服务器端渲染或渲染服务器组件时，只有在渲染组件期间或从渲染组件发起的异步上下文中调用
preinit时，它才有效。任何其他调用都将被忽略。
用法
渲染时预初始化
如果你知道组件或其子组件将使用特定资源，并且你同意在下载后立即评估该资源并使其生效，则在渲染组件时调用preinit。
示例 1的 2: 预初始化外部脚本
import { preinit } from 'react-dom';
function AppRoot() {
preinit("https://example.com/script.js", {as: "script"});
return ...;
}如果你希望浏览器下载脚本但不立即执行它，请改用 preload。如果你想加载一个ESM模块，请使用 preinitModule。
在事件处理程序中预初始化
在事件处理程序中，在切换到需要外部资源的页面或状态之前调用preinit。这比在新页面或状态的渲染过程中调用它更早地启动了进程。
import { preinit } from 'react-dom';
function CallToAction() {
const onClick = () => {
preinit("https://example.com/wizardStyles.css", {as: "style"});
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}