React Suspense 是 React 生态系统中一个重要且强大的特性，用于管理组件加载过程中的状态。它旨在提升用户体验，让应用在加载数据时更加平滑地处理界面更新，避免页面卡顿或出现明显的加载闪烁。
这篇文章将详细剖析 Suspense 的原理、使用场景，并介绍如何结合其他技术（如 React.lazy 和 Concurrent Mode）实现最佳的应用体验。
什么是 React Suspense？
Suspense 的核心理念是：在组件加载或等待数据完成之前，展示一个占位符（loading state） 。它是一种 异步渲染 的机制，用于协调数据加载和组件渲染，让界面更新更加自然。
Suspense 的常见使用场景：
- 懒加载组件：动态按需加载 JavaScript 代码，减少初次加载的包体积。
- 数据加载：在等待数据请求完成时，显示加载动画或占位符。
- 图片与资源加载：确保图片和视频完全加载后再呈现，提高用户体验。
React Suspense 的基本用法
- 使用 React.lazy 懒加载组件
React 提供了 React.lazy 函数来按需加载组件，搭配 Suspense 可以实现组件的懒加载。
import React, { lazy, Suspense } from 'react';
// 使用 React.lazy 动态导入组件
const LazyComponent = lazy(() => import('./components/LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
export default App;
在上面的代码中，LazyComponent 组件不会立即加载，而是等到它实际需要时才下载。当组件尚未加载完时，Suspense 将展示一个 Loading… 占位符。
Suspense for Data Fetching
在 React 18 中，Suspense 已支持数据加载，这让我们可以在等待 API 数据时直接使用 Suspense 处理逻辑。
数据加载的示例
在这个例子中，我们模拟一个异步数据源，并使用 Suspense 处理数据加载状态。
// 模拟一个异步数据源
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => resolve('Hello, Suspense!'), 2000);
});
}
// 创建一个资源对象来管理数据加载状态
const resource = {
data: fetchData(),
};
// 创建一个组件，等待数据加载完成
function DataDisplay() {
const data = useResource(resource.data); // 读取数据
return <h1>{data}</h1>;
}
function useResource(promise) {
if (!promise._status) {
throw promise; // 触发 Suspense 加载状态
}
return promise._result;
}
function App() {
return (
<Suspense fallback={<div>Loading data...</div>}>
<DataDisplay />
</Suspense>
);
}
export default App;
在这个示例中，当数据尚未加载完成时，Suspense 会显示占位符 Loading data…。当数据加载完成后，DataDisplay 组件才会展示数据。
Suspense 与 Concurrent Mode 的结合
Concurrent Mode 是 React 的另一项重要特性，旨在进一步提升应用的响应性。在 Concurrent Mode 下，React 可以打断和恢复渲染，确保用户界面始终保持流畅。
在 React 18 及以上版本中，Concurrent Mode 已经默认启用。搭配 Suspense，可以更好地处理异步渲染。
import { createRoot } from 'react-dom/client';
import App from './App';
// 使用 createRoot 启用 Concurrent Mode
const root = createRoot(document.getElementById('root'));
root.render(<App />);
在 Concurrent Mode 中：
- 长时间的数据加载不会阻塞 UI 渲染。
- React 可以优先更新重要的 UI 元素，如用户输入或按钮响应。
- 用户界面在组件切换时更加平滑，减少加载闪烁感。
Suspense 的最佳实践
- 分而治之：拆分 Suspense 边界
当应用中存在多个需要等待的数据或组件时，为每个独立部分设置 Suspense 边界，可以避免全局 loading 状态，提升用户体验。
<Suspense fallback={<div>Loading header...</div>}>
<Header />
</Suspense>
<Suspense fallback={<div>Loading content...</div>}>
<Content />
</Suspense>
这样做可以保证，即使某个组件未加载完成，其他部分仍然可以正常渲染。
- 与 Error Boundary 配合使用
数据加载过程中可能会出现错误，因此将 Suspense 与 Error Boundary 结合是一个好实践。
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
function App() {
return (
<ErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<SomeComponent />
</Suspense>
</ErrorBoundary>
);
}
这种方式确保即使某个组件加载失败，也不会影响整个应用。
