React Suspense：优雅处理异步渲染
React Suspense 是一个强大的功能，可帮助开发者更优雅地处理异步渲染过程，在组件或数据加载期间显示占位符 ui。它与 React.lazy、并发模式和数据获取方案（如 React Query、Relay 或自定义方案）配合使用。
工作原理
- 占位符 (fallback)：Suspense 组件包裹需要等待异步操作完成的组件。等待期间，它会渲染一个占位符 UI（例如加载动画）。
- 自动渲染：异步操作完成后，Suspense 会自动渲染真实的组件或数据。
基本语法
import React, { Suspense } from "react"; const LazyComponent = React.lazy(() => import("./LazyComponent")); function App() { return ( <Suspense fallback={<div>加载中...</div>}> <LazyComponent /> </Suspense> ); } export default App;
- React.Suspense：包裹需要延迟加载的组件。
- fallback：指定加载期间显示的 UI。
使用场景
- 延迟加载组件：使用 React.lazy 动态加载组件，按需加载，减小初始包大小。
- 数据获取：结合 React Query 或 Relay 等库，管理异步数据加载，并在数据可用前显示占位符。
- 并发渲染：优化并发模式下的渲染性能。
示例 1：延迟加载组件
无 Suspense
import React from "react"; import HeavyComponent from "./HeavyComponent"; function App() { return ( <div> <h1>主应用</h1> <HeavyComponent /> </div> ); } export default App;
HeavyComponent 同步加载，增加初始加载时间。
使用 Suspense
import React, { Suspense } from "react"; const HeavyComponent = React.lazy(() => import("./HeavyComponent")); function App() { return ( <div> <h1>主应用</h1> <Suspense fallback={<div>加载 HeavyComponent...</div>}> <HeavyComponent /> </Suspense> </div> ); } export default App;
HeavyComponent 延迟加载，加载过程中显示占位符。
示例 2：多个延迟加载组件
import React, { Suspense } from "react"; const ComponentA = React.lazy(() => import("./ComponentA")); const ComponentB = React.lazy(() => import("./ComponentB")); function App() { return ( <div> <h1>主应用</h1> <Suspense fallback={<div>加载组件中...</div>}> <ComponentA /><ComponentB /> </Suspense> </div> ); } export default App;
占位符显示直到两个组件都加载完成。
示例 3：数据获取 (实验性)
结合 React Query 等库，Suspense 可用于处理异步数据加载。
错误处理
Suspense 本身不提供错误处理机制，需要结合错误边界使用：
import React, { Suspense } from "react"; class ErrorBoundary extends React.Component { // ...错误边界逻辑... } const LazyComponent = React.lazy(() => import("./LazyComponent")); function App() { return ( <ErrorBoundary> <Suspense fallback={<div>加载中...</div>}> <LazyComponent /> </Suspense> </ErrorBoundary> ); } export default App;
最佳实践
- 简洁的占位符：使用轻量级占位符，避免性能损耗。
- 结合错误边界：处理组件或数据加载失败。
- 合理分块：将应用划分成逻辑块，优化性能。
优势
- 提升用户体验：显示占位符，保持应用响应。
- 减小包大小：配合代码分割，优化包大小。
- 简化异步处理：更声明式地管理加载状态。
高级用法：嵌套 Suspense
可以嵌套 Suspense 组件，实现更精细的加载状态控制。
限制
结论
React Suspense 是一个强大的工具，简化了异步渲染的处理，提升了性能和用户体验。 它与其他 React 功能结合，提供了更流畅的应用体验。
