React Academy · 课时

使用 Suspense 划分数据与代码边界

Q: 「使用 Suspense 划分数据与代码边界」这节课中我会学到什么？

将 Suspense 与延迟加载和未来的数据库结合起来，构建简洁的加载状态。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将 Suspense 与延迟加载和未来的数据库结合起来，构建简洁的加载状态。

使用 Suspense 划分数据与代码边界 是 CoddyKit 上的免费 React Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将使用 React Suspense 和 React.lazy 进行代码拆分，并结合数据库在内容加载时显示回退界面。

什么是 Suspense

Suspense 是一个 React 组件，它会捕获其子树中处于“挂起”状态（正在等待某些内容加载）的组件，并改为渲染回退界面。

<Suspense fallback={<Spinner />}>
  <MyComponent />
</Suspense>

Suspense 与 React.lazy

React.lazy() 会创建一个通过动态导入加载的组件。在 Suspense 中使用它时，代码包下载完成前会一直渲染回退界面。

const HeavyChart = React.lazy(() => import('./HeavyChart'));

<Suspense fallback={<p>Loading chart...</p>}>
  <HeavyChart />
</Suspense>

同一边界下的多个延迟加载组件

同一个 Suspense 边界下的多个延迟加载组件会共享一个回退界面。React 会等待 ALL 组件加载完成后才显示内容。请使用嵌套边界来实现独立加载。

嵌套 Suspense 边界

嵌套 Suspense 边界，让界面各部分随着加载完成逐步显示，而不是等待所有内容。外层边界负责较慢的加载，内层边界负责较快的加载。

<Suspense fallback={<PageSkeleton />}>
  <Header />
  <Suspense fallback={<ChartSkeleton />}>
    <LazyChart />
  </Suspense>
</Suspense>

Suspense 与数据库

React Query（使用 suspense: true）和 Relay 等库会让等待数据的组件进入挂起状态，就像延迟加载一样。Suspense 边界会提供加载时的回退界面。

const { data } = useQuery({ queryKey: ['users'], queryFn: fetchUsers,
  suspense: true }); // component suspends until data is ready
// No loading check needed — data is always available here

React 19 中的 use() 钩子

在 React 19 中，`use(promise)` 钩子允许您直接在组件中读取异步结果对象。如果该对象仍处于等待状态，组件就会挂起，最近的 Suspense 边界会显示其回退界面。

import { use } from 'react';

function Profile({ userPromise }) {
  const user = use(userPromise); // suspends until resolved
  return <p>{user.name}</p>;
}

使用 SuspenseList 按顺序显示

SuspenseList（实验性功能）会协调多个 Suspense 边界，使它们按照特定顺序显示（从上到下、一次全部显示等），从而避免界面杂乱地突然出现。

Suspense 不会捕获错误

Suspense 只处理加载状态，不会捕获获取请求失败产生的错误。请将 Suspense 与错误边界结合使用，以同时处理加载状态和错误状态。

<ErrorBoundary fallback={<Error />}>
  <Suspense fallback={<Spinner />}>
    <DataComponent />
  </Suspense>
</ErrorBoundary>

将骨架屏作为回退界面

请使用骨架屏作为 Suspense 的回退界面，而不是加载指示器。骨架屏是与内容形状相匹配的占位布局，可以减少内容到达时的布局偏移。

快速检查

React.lazy() 组件的代码包下载期间，会向用户显示什么？

回顾

Suspense 会包裹加载中的组件并显示回退界面。请使用 React.lazy 进行代码拆分，使用数据库的 Suspense 模式加载数据，并嵌套边界以实现彼此独立的渐进式显示。与错误边界配合使用即可实现完整的错误处理。

课程完成

恭喜您！您完成了**React 中的异步模式：承诺与并发**。现在，您已经能够处理竞态条件，使用 useTransition 和 useDeferredValue 构建响应迅速的用户界面，并利用 Suspense 创建加载边界。

常见问题解答