preload
允许你预先获取你希望使用的资源,例如样式表、字体或外部脚本。
¥preload
lets you eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use.
preload("https://example.com/font.woff2", {as: "font"});
参考
¥Reference
preload(href, options)
要预加载资源,请从 react-dom
调用 preload
函数。
¥To preload a resource, call the preload
function from react-dom
.
import { preload } from 'react-dom';
function AppRoot() {
preload("https://example.com/font.woff2", {as: "font"});
// ...
}
preload
函数向浏览器提供一个提示,指示它应该开始下载给定的资源,这可以节省时间。
¥The preload
function provides the browser with a hint that it should start downloading the given resource, which can save time.
参数
¥Parameters
-
href
:一个字符串。你要下载的资源的 URL。¥
href
: a string. The URL of the resource you want to download. -
options
:一个对象。它包含以下属性:¥
options
: an object. It contains the following properties:-
as
:一个必需的字符串。资源的类型。其 可能的值 为audio
、document
、embed
、fetch
、font
、image
、object
、script
、style
、track
、video
、worker
。¥
as
: a required string. The type of resource. Its possible values areaudio
,document
,embed
,fetch
,font
,image
,object
,script
,style
,track
,video
,worker
. -
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"
. -
referrerPolicy
:一个字符串。获取时发送的 推荐人标头。其可能的值为no-referrer-when-downgrade
(默认值)、no-referrer
、origin
、origin-when-cross-origin
和unsafe-url
。¥
referrerPolicy
: a string. The Referrer header to send when fetching. Its possible values areno-referrer-when-downgrade
(the default),no-referrer
,origin
,origin-when-cross-origin
, andunsafe-url
. -
integrity
:一个字符串。资源的加密哈希值,为 验证其真实性。¥
integrity
: a string. A cryptographic hash of the resource, to verify its authenticity. -
type
:一个字符串。资源的 MIME 类型。¥
type
: a string. The MIME type of the resource. -
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
. -
imageSrcSet
:一个字符串。仅适用于as: "image"
。指定 图片的源集。¥
imageSrcSet
: a string. For use only withas: "image"
. Specifies the source set of the image. -
imageSizes
:一个字符串。仅适用于as: "image"
。指定 图片的尺寸。¥
imageSizes
: a string. For use only withas: "image"
. Specifies the sizes of the image.
-
返回
¥Returns
preload
不返回任何内容。
¥preload
returns nothing.
注意事项
¥Caveats
-
对
preload
的多个等效调用与单个调用具有相同的效果。根据以下规则,对preload
的调用被视为等效:¥Multiple equivalent calls to
preload
have the same effect as a single call. Calls topreload
are considered equivalent according to the following rules:-
如果两个调用具有相同的
href
,则它们是等效的,但以下情况除外:¥Two calls are equivalent if they have the same
href
, except: -
如果
as
设置为image
,则两个调用如果具有相同的href
、imageSrcSet
和imageSizes
,则等效。¥If
as
is set toimage
, two calls are equivalent if they have the samehref
,imageSrcSet
, andimageSizes
.
-
-
在浏览器中,任何情况都可以调用
preload
:在渲染组件时、在副作用中、在事件处理程序中等等。¥In the browser, you can call
preload
in any situation: while rendering a component, in an Effect, in an event handler, and so on. -
在服务器端渲染或渲染服务器组件时,
preload
仅在渲染组件时或在源自渲染组件的异步上下文中调用它时才有效。任何其他调用都将被忽略。¥In server-side rendering or when rendering Server Components,
preload
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
渲染时预加载
¥Preloading when rendering
如果你知道组件或其子组件将使用特定资源,则在渲染组件时调用 preload
。
¥Call preload
when rendering a component if you know that it or its children will use a specific resource.
例子 1 / 4: 预加载外部脚本
¥Preloading an external script
import { preload } from 'react-dom';
function AppRoot() {
preload("https://example.com/script.js", {as: "script"});
return ...;
}
如果你希望浏览器立即开始执行脚本(而不是仅仅下载它),请改用 preinit
。如果要加载 ESM 模块,请使用 preloadModule
。
¥If you want the browser to start executing the script immediately (rather than just downloading it), use preinit
instead. If you want to load an ESM module, use preloadModule
.
在事件处理程序中预加载
¥Preloading in an event handler
在转换到需要外部资源的页面或状态之前,在事件处理程序中调用 preload
。与在渲染新页面或状态期间调用该进程相比,这可以更早地启动该进程。
¥Call preload
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 { preload } from 'react-dom';
function CallToAction() {
const onClick = () => {
preload("https://example.com/wizardStyles.css", {as: "style"});
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}