标准答案

  1. Suspense 可以包裹异步组件或支持 Suspense 协议的数据读取,让等待期间显示统一 fallback。
  2. React.lazy 加载组件时需要 Suspense 提供 fallback,否则加载期间没有合适的 UI。
  3. 普通 loading state 是业务状态,通常由组件自己根据请求状态显示骨架屏、按钮 loading 或错误重试。
  4. Suspense 更像渲染层等待边界,普通 loading 更像业务层状态表达。
  5. Suspense 的边界要设计粒度,太大容易整页闪动,太小会出现过多局部 loading。

题目解析

这道题要区分“等待异步资源”和“业务请求状态”。两者有交集,但不是同一个概念。

在路由懒加载里,Suspense 是很自然的边界;在业务请求里,是否使用 Suspense 取决于框架、数据库和团队约定。

Suspense fallback 不是错误态。加载失败仍然需要 Error Boundary 或业务错误处理。

代码示例

下面用 Suspense 包住懒加载页面组件。

TSX
const SettingsPage = lazy(() => import('./SettingsPage'))

function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <SettingsPage />
    </Suspense>
  )
}

常见误区

  • 把 Suspense 当成所有请求 loading 的替代品。
  • Suspense 边界过大,一个小组件等待导致整页 fallback。
  • 只处理 fallback,不处理异步加载失败后的错误边界。

作者信息