React Suspense：优雅处理异步渲染
React Suspense 是一个强大的功能，可帮助开发者更优雅地处理异步渲染过程，在组件或数据加载期间显示占位符 UI。它与 React.lazy、并发模式和数据获取方案（如 React Query、Relay 或自定义方案）配合使用。
工作原理
占位符 (fallback)：Suspense 组件包裹需要等待异步操作完成的组件。等待期间，它会渲染一个占位符 UI（例如加载动画）。 自动渲染：异步操作完成后，Suspense 会自动渲染真实的组件或数据。基本语法
1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Suspense } from "react";
const LazyComponent = React.lazy(() => import("./LazyComponent"));
function App() {
return (
<Suspense fallback={<div>加载中...</div>}>
<LazyComponent />
</Suspense>
);
}
export default App;
使用场景
延迟加载组件：使用 React.lazy 动态加载组件，按需加载，减小初始包大小。 数据获取：结合 React Query 或 Relay 等库，管理异步数据加载，并在数据可用前显示占位符。 并发渲染：优化并发模式下的渲染性能。示例 1：延迟加载组件
无 Suspense1
2
3
4
5
6
7
8
9
10
11
12
13
import React from "react";
import HeavyComponent from "./HeavyComponent";
function App() {
return (
<div>
<h1>主应用</h1>
<HeavyComponent />
</div>
);
}
export default App;
HeavyComponent 同步加载，增加初始加载时间。
使用 Suspense1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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：多个延迟加载组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 本身不提供错误处理机制，需要结合错误边界使用：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 组件，实现更精细的加载状态控制。
限制
数据获取支持：目前为实验性功能。 无内置错误处理：需要手动添加错误边界。 浏览器兼容性：需要支持 ES6 模块和 Promise 的现代浏览器。结论
React Suspense 是一个强大的工具，简化了异步渲染的处理，提升了性能和用户体验。 它与其他 React 功能结合，提供了更流畅的应用体验。
以上就是如何在 React 中使用 Suspense 来改进异步渲染的详细内容，更多请关注php中文网其它相关文章！