当前位置：首页 > news >正文

浅谈 React Suspense

news 2025/6/8 6:02:55

React Suspense 是 React 中用于处理异步操作的功能。它可以让你"等待"某些操作，如数据获取或组件加载完成，然后再渲染组件。Suspense 的核心理念是让组件在准备好之前显示一个备用的 UI，例如加载指示器，从而提高用户体验。

1. 基本用法

1.1. 组件懒加载

React Suspense 最常见的用法是与 React.lazy 结合，实现组件的懒加载。这对于代码分割和优化应用性能特别有用。

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';const OtherComponent = React.lazy(() => import('./OtherComponent'));function App() {return (<div><Suspense fallback={<div>Loading...</div>}><OtherComponent /></Suspense></div>);
}ReactDOM.render(<App />, document.getElementById('root'));

在这个例子中，OtherComponent 是一个异步加载的组件，并且在它加载完成之前，会显示 fallback 指定的内容。

优点：

1. 减少初始加载时间；

2. 按需加载组件；

3. 自动处理加载状态；

1.2. 异步数据加载

Suspense 不仅适用于组件懒加载，还可以用于数据获取。虽然 React 官方尚未推出内置的数据获取 Suspense API，但可以与一些支持 Suspense 的数据获取库结合使用。

import React, { Suspense } from 'react';
import { fetch } from 'react-fetch';function UserProfile() {const user = fetch('/api/user').json();return (<div><h1>{user.name}</h1><p>{user.email}</p></div>);
}function App() {return (<div><Suspense fallback={<div>Loading user data...</div>}><UserProfile /></Suspense></div>);
}export default App;

在这个示例中，UserProfile 组件会等待数据获取完成后再渲染，期间显示加载指示器。

2. 高级用法

2.1. 嵌套 Suspense

你可以嵌套多个 Suspense 组件来处理不同部分的异步加载：

function App() {return (<div><Suspense fallback={<div>Loading header...</div>}><Header /><Suspense fallback={<div>Loading content...</div>}><Content /></Suspense></Suspense></div>);
}

2.2. 错误边界

结合错误边界可以更好地处理加载失败的情况：

class ErrorBoundary extends React.Component {state = { hasError: false };static getDerivedStateFromError(error) {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>}><OtherComponent /></Suspense></ErrorBoundary>);
}