React Suspense 是 React 16.6 版本引入的一个新特性，它允许我们优雅地处理异步数据加载。使用 Suspense，我们可以实现代码的懒加载，提高应用的性能和用户体验。

什么是 React Suspense？

React Suspense 是一个组件，它允许你在等待异步操作完成时显示一个占位符。这使得我们可以在数据加载期间展示一个加载指示器或者一个默认的页面内容。

使用方式

要使用 React Suspense，我们需要配合 React.lazy 和 Suspense 组件。

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

在上面的代码中，MyComponent 是一个异步加载的组件。当 App 组件渲染时，MyComponent 会被懒加载。在加载过程中，<div>Loading...</div> 将被展示。

优点

  1. 提高性能：通过懒加载，可以减少初始加载时间，提高应用的性能。
  2. 更好的用户体验：在数据加载期间，用户可以看到一个友好的加载指示器，而不是空白页面。
  3. 代码结构清晰：将异步加载的代码与主逻辑分离，使代码结构更加清晰。

相关链接

Suspense 示例