React Suspense 与懒加载

学习如何使用 React.Suspense 和 React.lazy 实现组件的按需加载与优雅的加载状态。 · 难度：入门 · +15XP

React Suspense 概念

Suspense 是 React 提供的一种声明式方式，用于处理组件在等待异步操作（如数据获取、代码分割）时的加载状态。它允许你在子组件完成加载之前显示 fallback 内容（如 loading 图标）。

1. 结合 React.lazy 进行代码分割

React.lazy 可以动态导入组件，必须与 Suspense 配合使用。当 lazy 组件正在加载时，Suspense 会显示 fallback 内容。

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

2. Suspense 的边界

你可以嵌套使用 Suspense，每个边界只负责其子树内的异步组件。如果多个 lazy 组件同时加载，最近的 Suspense 边界会捕获它们。

练习提示

尝试在下方代码中修改 fallback 内容，或者添加第二个 lazy 组件，观察 Suspense 如何协调多个异步加载。