懒惰的允许您推迟加载组件的代码，直到它第一次呈现。

常数 某些组件=懒惰的(负载)

参考

惰性（负载）

呼叫懒惰的在组件外部声明延迟加载的React组件：

进口 { 懒惰的 } 从 “反应”;

常数 标记预览=懒惰的(() => 进口('./MarkdownPreview.js'));

请参阅下面的更多示例。

参数

  • 负载：返回承诺或其他那么就可以了（带有然后方法）。React不会调用负载直到您第一次尝试呈现返回的组件。React首次调用后负载，它将等待其解析，然后呈现解析值的默认值作为反应组分。返回的Promise和Promise的解析值都将被缓存，因此React不会调用负载不止一次。如果Promise拒绝，React会扔要处理的最近错误边界的拒绝原因。

退换商品

懒惰的返回可以在树中渲染的React组件。当惰性组件的代码仍在加载时，尝试呈现它将暂停。使用<暂停>装载时显示装载指示器。

负载功能

参数

负载没有收到任何参数。

退换商品

您需要返回一个承诺或者其他什么那么就可以了（带有然后方法）。它最终需要解析为以下对象默认值属性是有效的React组件类型，例如函数，备忘录，或a转发参考号组件。

用法

带悬架的延迟加载部件

通常，您使用静态进口宣言：

进口 标记预览 从 './MarkdownPreview.js';

要延迟加载此组件的代码，直到它第一次呈现，请将此导入替换为：

进口 { 懒惰的 } 从 “反应”;

常数 标记预览=懒惰的(() => 进口('./MarkdownPreview.js'标记预览.js'));

此代码依赖于动态导入（）,这可能需要您的bundler或框架的支持。使用此模式需要将要导入的惰性组件导出为违约出口。

既然组件的代码是按需加载的，那么还需要指定加载时应该显示什么。您可以通过将惰性组件或其任何父组件包装到<暂停>边界：

<暂停 退路={<加载 />}>
  <氢气>预览</氢气>
  <标记预览 />
 </暂停>

在本例中标记预览在尝试渲染之前不会加载。如果标记预览尚未加载，加载将在其位置显示。尝试勾选复选框：

进口 { 使用状态, 暂停, 懒惰的 } 从 “反应”;
进口 加载 从 './正在加载.js;

常数 标记预览=懒惰的(() => 延迟演示(进口('./MarkdownPreview.js')));

出口 违约 功能 标记编辑器() {
  常数 [showPreview（显示预览）, 设置显示预览]=使用状态(假);
  常数 [降价, 设置降价]=使用状态(“你好，**世界**！”);
  返回 (
    <>
      <文本区域 价值={降价} onChange（更改时）={e（电子） => 设置降价(e（电子）.目标.价值)} />
      <标签>
        <输入 类型=“复选框” 选中的={showPreview（显示预览）} onChange（更改时）={e（电子） => 设置显示预览(e（电子）.目标.选中的)} />显示预览</标签>
      <小时 />
      {showPreview（显示预览）&&(
        <暂停 退路={<加载 />}>
          <氢气>预览</氢气>
          <标记预览 降价={降价} />
        </暂停>
      )}
    </>
  );
}

//添加固定延迟，以便您可以查看加载状态
功能 延迟演示(承诺) {
  返回 新的 承诺(决定 => {
    设置超时(决定, 2000);
  }).然后(() => 承诺);
}

此演示加载时有人为延迟。下次取消勾选并勾选复选框时，预览将被缓存，因此没有加载状态。要再次查看加载状态，请单击沙盒上的“重置”。

了解有关使用Suspense管理加载状态的更多信息。

故障排除

我的懒惰的组件的状态意外重置

不申报懒惰的组件里面其他组件：

进口 { 懒惰的 } 从 “反应”;

功能 编辑器() {
  // 🔴 错误：这将导致在重新渲染时重置所有状态
  常数 标记预览=懒惰的(() => 进口('./MarkdownPreview.js'));
  // ...
}

相反，请始终在模块的顶层声明它们：

进口 { 懒惰的 } 从 “反应”;

// ✅ 好：在组件外声明惰性组件
常数 标记预览=懒惰的(() => 进口('./MarkdownPreview.js'));

功能 编辑器() {
  // ...
}
上一个转发参考号
下一步备忘录