标准答案
- Suspense 可以包裹异步组件或支持 Suspense 协议的数据读取,让等待期间显示统一 fallback。
- React.lazy 加载组件时需要 Suspense 提供 fallback,否则加载期间没有合适的 UI。
- 普通 loading state 是业务状态,通常由组件自己根据请求状态显示骨架屏、按钮 loading 或错误重试。
- Suspense 更像渲染层等待边界,普通 loading 更像业务层状态表达。
- 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,不处理异步加载失败后的错误边界。