浅谈 React Suspense

aiguangyuan

于 2025-06-07 23:52:58 发布

阅读量641

点赞数 3

分类专栏： React 文章标签：前端开发 React

本文链接：https://blog.csdn.net/weixin_40629244/article/details/148502371

版权

React 专栏收录该内容

24 篇文章

订阅专栏

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>
    );
}