React Suspense 数据加载利器

了解如何使用 React Suspense 优雅地处理异步数据加载和代码分割。 · 难度：入门 · +15XP

什么是 React Suspense？

React Suspense 是一种用于处理异步操作（如数据获取、图片加载、代码分割）的声明式方式。它允许你在子组件准备好之前显示一个 fallback 内容（例如加载动画），从而提升用户体验。

核心概念

Suspense 通过包裹异步组件来工作。当内部组件抛出 Promise（例如使用 React.lazy 或第三方数据框架如 SWR、Relay），Suspense 会捕获它并显示 fallback UI，直到 Promise 解析完成。

import React, { Suspense } from 'react';
// 使用 React.lazy 动态导入组件
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
  return (
    <div>
      <h1>主应用</h1>
      <Suspense fallback={<div>加载中...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

边界与嵌套

你可以嵌套多个 Suspense 组件来为不同部分提供独立的加载状态。例如，页面顶部的导航栏可以立即显示，而主要内容和侧边栏可以分别显示加载指示器。

练习提示

在下面的代码框中，尝试将 LazyComponent 替换为你自己的组件，并修改 fallback 内容。观察 Suspense 如何优雅地处理加载。