preload

Canary 版本

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

注意

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

preload 允许您预先获取您预期要使用的资源，例如样式表、字体或外部脚本。

preload("https://example.com/font.woff2", {as: "font"});

参考
- preload(href, options)
用法
- 渲染时预加载
- 在事件处理程序中预加载

参考

`preload(href, options)`

要预加载资源，请从 react-dom 调用 preload 函数。

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/font.woff2", {as: "font"});
  // ...
}

请在下方查看更多示例。

preload 函数为浏览器提供了一个提示，即它应该开始下载给定的资源，这可以节省时间。

参数

href：字符串。要下载的资源的 URL。
options：对象。它包含以下属性
- as：必填字符串。资源类型。其可能的值为 audio、document、embed、fetch、font、image、object、script、style、track、video、worker。
- crossOrigin：字符串。CORS 策略。其可能的值为 anonymous 和 use-credentials。当 as 设置为 "fetch" 时，此属性是必需的。
- referrerPolicy：字符串。获取资源时发送的Referrer 头部。其可能的值为no-referrer-when-downgrade（默认）、no-referrer、origin、origin-when-cross-origin 和 unsafe-url。
- integrity：字符串。资源的加密哈希值，用于验证其真实性。
- type：字符串。资源的 MIME 类型。
- nonce：字符串。使用严格内容安全策略时允许资源的加密随机数。
- fetchPriority：字符串。建议获取资源的相对优先级。可能的值为 auto（默认）、high 和 low。
- imageSrcSet：字符串。仅与 as: "image" 一起使用。指定图像的来源集。
- imageSizes：字符串。仅与 as: "image" 一起使用。指定图像的尺寸。

返回值

preload 不返回任何内容。

注意事项

多次调用等效的 preload 与调用一次的效果相同。根据以下规则，preload 的调用被认为是等效的
- 如果两次调用具有相同的 href，则它们是等效的，但以下情况除外
- 如果 as 设置为 image，则如果两次调用具有相同的 href、imageSrcSet 和 imageSizes，则它们是等效的。
在浏览器中，您可以在任何情况下调用 preload：渲染组件时、在 Effect 中、在事件处理程序中等等。
在服务器端渲染或渲染服务器组件时，preload 只有在渲染组件时或在源自渲染组件的异步上下文中调用时才有效。任何其他调用都将被忽略。

用法

渲染时预加载

如果知道组件或其子组件将使用特定资源，则在渲染组件时调用 preload。

预加载示例

预加载外部脚本示例 1的 4:
预加载外部脚本

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/script.js", {as: "script"});
  return ...;
}

如果您希望浏览器立即开始执行脚本（而不仅仅是下载它），请改用 preinit。如果要加载 ESM 模块，请使用 preloadModule。

在事件處理常式中預載入

在轉換到需要外部資源的頁面或狀態之前，在事件處理常式中呼叫 preload。這會比在渲染新頁面或狀態期間呼叫它更早開始流程。

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>
  );
}

上一页preinitModule

下一页preloadModule

preload - This feature is available in the latest Canary 框架