preinit - This feature is available in the latest Canary

Canary

preinit 函数目前仅在 React 的 Canary 和实验通道中可用。在此处详细了解 React 的发布通道

注意

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

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:必需的字符串。资源类型。其可能的值为 scriptstyle
    • precedence:字符串。样式表必需。说明相对于其他样式表插入样式表的位置。优先级较高的样式表可以覆盖优先级较低的样式表。可能的值为 resetlowmediumhigh
    • crossOrigin:字符串。要使用的 CORS 策略。其可能的值为 anonymoususe-credentials。当 as 设置为 "fetch" 时,它是必需的。
    • integrity:字符串。资源的加密哈希,用于 验证其真实性
    • nonce:字符串。在使用严格的内容安全策略时,允许资源的加密随机数
    • fetchPriority:字符串。建议获取资源的相对优先级。可能的值为 auto(默认值)、highlow

返回值

preinit 不返回任何内容。

注意事项

  • 多次调用具有相同 hrefpreinit 与单次调用的效果相同。
  • 在浏览器中,您可以在任何情况下调用 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>
);
}