React Suspense 如何优雅处理异步加载？

Question

仓乃文 · Accepted Answer

Suspense 声明式地处理异步加载状态，当子组件还在加载时显示 fallback，加载完成后自动切换。配合 lazy 实现代码分割，配合数据获取库实现数据加载。代码分割（懒加载组件）： ```javascript const HeavyChart = React.lazy(() => import("./HeavyChart")); function Dashboard() { return ( }> ); } ``` 嵌套 Suspense（独立加载状态）： ```javascript function Page() { return ( <>

}> }> {/* Comments 加载不阻塞 Feed 显示 */} ); } ``` 配合数据获取（React 19 use + Suspense）： ```javascript function UserProfile({ userPromise }) { const user = use(userPromise); // 未 resolved 时触发最近的 Suspense return

{user.name}

; } ``` 补充说明： - Suspense 只捕获子组件的加载状态，不影响兄弟组件 - 嵌套 Suspense 让各部分独立加载，不会一个慢全部等 - lazy 配合 Suspense 是最简单的代码分割方案 - 数据获取场景推荐配合 React Query / SWR 的 Suspense 模式 - 服务端渲染中 Suspense 会流式传输 HTML，先发送 fallback 再发送真实内容