preinit
让你能够快速获取和评估样式表或外部脚本。
¥preinit
lets you eagerly fetch and evaluate a stylesheet or external script.
preinit("https://example.com/script.js", {as: "script"});
参考
¥Reference
preinit(href, options)
要预初始化脚本或样式表,请从 react-dom
调用 preinit
函数。
¥To preinit a script or stylesheet, call the preinit
function from react-dom
.
import { preinit } from 'react-dom';
function AppRoot() {
preinit("https://example.com/script.js", {as: "script"});
// ...
}
preinit
函数向浏览器提供了一个提示,表明它应该开始下载并执行给定的资源,这可以节省时间。你 preinit
的脚本在完成下载后将被执行。你预先初始化的样式表将插入到文档中,这会使它们立即生效。
¥The preinit
function provides the browser with a hint that it should start downloading and executing the given resource, which can save time. Scripts that you preinit
are executed when they finish downloading. Stylesheets that you preinit are inserted into the document, which causes them to go into effect right away.
参数
¥Parameters
-
href
:一个字符串。你要下载并执行的资源的 URL。¥
href
: a string. The URL of the resource you want to download and execute. -
options
:一个对象。它包含以下属性:¥
options
: an object. It contains the following properties:-
as
:一个必需的字符串。资源的类型。它的可能值为script
和style
。¥
as
: a required string. The type of resource. Its possible values arescript
andstyle
. -
precedence
:一个字符串。需要样式表。说明相对于其他样式表插入样式表的位置。具有较高优先级的样式表可以覆盖具有较低优先级的样式表。可能的值为reset
、low
、medium
、high
。¥
precedence
: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values arereset
,low
,medium
,high
. -
crossOrigin
:一个字符串。要使用的 CORS 政策。它的可能值为anonymous
和use-credentials
。当as
设置为"fetch"
时需要。¥
crossOrigin
: a string. The CORS policy to use. Its possible values areanonymous
anduse-credentials
. It is required whenas
is set to"fetch"
. -
integrity
:一个字符串。资源的加密哈希值,为 验证其真实性。¥
integrity
: a string. A cryptographic hash of the resource, to verify its authenticity. -
nonce
:一个字符串。使用严格的内容安全策略时的加密 允许资源的随机数。¥
nonce
: a string. A cryptographic nonce to allow the resource when using a strict Content Security Policy. -
fetchPriority
:一个字符串。建议获取资源的相对优先级。可能的值为auto
(默认值)、high
和low
。¥
fetchPriority
: a string. Suggests a relative priority for fetching the resource. The possible values areauto
(the default),high
, andlow
.
-
返回
¥Returns
preinit
不返回任何内容。
¥preinit
returns nothing.
注意事项
¥Caveats
-
对具有相同
href
的preinit
进行多次调用与单次调用具有相同的效果。¥Multiple calls to
preinit
with the samehref
have the same effect as a single call. -
在浏览器中,任何情况都可以调用
preinit
:在渲染组件时、在副作用中、在事件处理程序中等等。¥In the browser, you can call
preinit
in any situation: while rendering a component, in an Effect, in an event handler, and so on. -
在服务器端渲染或渲染服务器组件时,
preinit
仅在渲染组件时或在源自渲染组件的异步上下文中调用它时才有效。任何其他调用都将被忽略。¥In server-side rendering or when rendering Server Components,
preinit
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
渲染时预初始化
¥Preiniting when rendering
如果你知道组件或其子组件将使用特定资源,并且你同意评估资源并因此在下载后立即生效,则在渲染组件时调用 preinit
。
¥Call preinit
when rendering a component if you know that it or its children will use a specific resource, and you’re OK with the resource being evaluated and thereby taking effect immediately upon being downloaded.
例子 1 / 2: 预初始化外部脚本
¥Preiniting an external script
import { preinit } from 'react-dom';
function AppRoot() {
preinit("https://example.com/script.js", {as: "script"});
return ...;
}
如果你希望浏览器下载脚本但不立即执行它,请改用 preload
。如果要加载 ESM 模块,请使用 preinitModule
。
¥If you want the browser to download the script but not to execute it right away, use preload
instead. If you want to load an ESM module, use preinitModule
.
在事件处理程序中预初始化
¥Preiniting in an event handler
在转换到需要外部资源的页面或状态之前,在事件处理程序中调用 preinit
。与在渲染新页面或状态期间调用该进程相比,这可以更早地启动该进程。
¥Call preinit
in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
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>
);
}