React Suspense：数据获取和代码分割的综合指南

React Suspense 是 React 16.6 中引入的一项强大功能，允许您在等待某些内容（例如数据加载或代码下载）时“暂停”组件的渲染。 这提供了一种声明式的方式来管理加载状态，并通过优雅地处理异步操作来改善用户体验。 本指南将带您了解 Suspense 的概念、其用例以及如何在 React 应用程序中实现它的实际示例。

什么是 React Suspense？

Suspense 是一个 React 组件，它包装其他组件，并允许您在这些组件等待 Promise 解析时显示后备 UI（例如，加载指示器）。 这个 Promise 可能与以下内容相关：

• 数据获取：等待从 API 检索数据。
• 代码分割：等待 JavaScript 模块被下载和解析。

在使用 Suspense 之前，管理加载状态通常涉及复杂的条件渲染和异步操作的手动处理。 Suspense 通过提供声明式方法简化了这一点，使您的代码更简洁且更易于维护。

主要概念

• Suspense 组件：<Suspense> 组件本身。它接受一个 fallback 属性，该属性指定在包装的组件暂停时要显示的 UI。
• React.lazy()：一个通过动态导入组件来启用代码分割的函数。它返回一个 Promise，该 Promise 在组件加载时解析。
• Promise 集成：Suspense 与 Promise 无缝集成。当组件尝试从尚未解析的 Promise 渲染数据时，它会“暂停”并显示后备 UI。

用例

1. 使用 Suspense 进行数据获取

Suspense 的主要用例之一是管理数据获取。 您可以使用 Suspense 以声明方式显示加载指示器，而不是使用条件渲染手动管理加载状态，同时等待数据到达。

示例：从 API 获取用户数据

假设您有一个组件，用于显示从 API 获取的用户数据。 如果没有 Suspense，您可能会有这样的代码：

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Loading user data...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  if (!user) {
    return <p>No user data available.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

这段代码有效，但它涉及管理多个状态变量（isLoading、error、user）和条件渲染逻辑。 使用 Suspense，您可以使用像 SWR 或 TanStack Query (前身为 React Query) 这样的数据获取库来简化此操作，这些库旨在与 Suspense 无缝协作。

以下是如何将 SWR 与 Suspense 结合使用：

import React from 'react';
import useSWR from 'swr';

// A simple fetcher function
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Loading user data...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

在这个例子中：

• 我们使用 useSWR 来获取用户数据。 suspense: true 选项告诉 SWR，如果数据尚未可用，则抛出一个 Promise。
• UserProfile 组件不需要显式地管理加载或错误状态。 它只是在用户数据可用时渲染它。
• <Suspense> 组件捕获 SWR 抛出的 Promise，并在获取数据时显示后备 UI（<p>Loading user data...</p>）。

这种方法简化了您的组件逻辑，并使其更容易推理数据获取。

数据获取的全局注意事项：

在为全球受众构建应用程序时，请考虑以下事项：

• 网络延迟：不同地理位置的用户可能会遇到不同的网络延迟。 Suspense 可以通过在从远程服务器获取数据时显示加载指示器来帮助提供更好的用户体验。 考虑使用内容分发网络 (CDN) 将您的数据缓存到离您的用户更近的位置。
• 数据本地化：确保您的 API 支持数据本地化，允许您以用户的首选语言和格式提供数据。
• API 可用性：从不同区域监控您的 API 的可用性和性能，以确保一致的用户体验。

2. 使用 React.lazy() 和 Suspense 进行代码分割

代码分割是一种将您的应用程序分解为更小的块的技术，这些块可以按需加载。 这可以显着改善应用程序的初始加载时间，特别是对于大型和复杂的项目。

React 提供了 React.lazy() 函数用于代码分割组件。 当与 Suspense 一起使用时，它允许您在等待组件被下载和解析时显示后备 UI。

示例：延迟加载组件

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

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

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

export default MyComponent;

在这个例子中：

• 我们使用 React.lazy() 来动态导入 OtherComponent。 这返回一个 Promise，该 Promise 在组件加载时解析。
• 我们用 <Suspense> 包装 <OtherComponent /> 并提供一个 fallback 属性。
• 当 OtherComponent 正在加载时，将显示后备 UI（<p>Loading...</p>）。 组件加载后，它将替换后备 UI。

代码分割的好处：

• 改善的初始加载时间：通过仅加载初始视图所需的代码，您可以减少应用程序变得可交互所需的时间。
• 减少的捆绑包大小：代码分割可以帮助减少应用程序的 JavaScript 捆绑包的整体大小，这可以提高性能，尤其是在低带宽连接上。
• 更好的用户体验：通过提供更快的初始加载并仅在需要时加载代码，您可以创建更流畅和更响应的用户体验。

高级代码分割技术：

• 基于路由的代码分割：根据路由分割您的应用程序，以便每个路由仅加载其需要的代码。 这可以使用像 React Router 这样的库轻松实现。
• 基于组件的代码分割：将单个组件分割为单独的块，特别是对于大型或不常用的组件。
• 动态导入：在您的组件中使用动态导入，以根据用户交互或其他条件按需加载代码。

3. 并发模式和 Suspense

Suspense 是 React 并发模式的关键组成部分，并发模式是一组新功能，使 React 能够并发地处理多个任务。 并发模式允许 React 对重要更新进行优先级排序、中断长时间运行的任务并提高应用程序的响应能力。

使用并发模式和 Suspense，React 可以：

• 在所有数据可用之前开始渲染组件：即使某些数据依赖项仍在获取中，React 也可以开始渲染组件。 这允许 React 更快地显示部分 UI，从而提高应用程序的感知性能。
• 中断和恢复渲染：如果在 React 渲染组件时出现更高优先级的更新，它可以中断渲染过程，处理更高优先级的更新，然后在以后恢复渲染组件。
• 避免阻塞主线程：并发模式允许 React 执行长时间运行的任务，而不会阻塞主线程，这可以防止 UI 变得无响应。

要启用并发模式，您可以使用 React 18 中的 createRoot API：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // Create a root.
root.render(<App />);

使用 Suspense 的最佳实践

• 使用数据获取库：考虑使用像 SWR 或 TanStack Query 这样的数据获取库，这些库旨在与 Suspense 无缝协作。 这些库提供诸如缓存、自动重试和错误处理等功能，可以简化您的数据获取逻辑。
• 提供有意义的后备 UI：后备 UI 应清楚地表明正在加载某些内容。 使用微调器、进度条或骨架加载器来创建具有视觉吸引力且信息丰富的加载体验。
• 优雅地处理错误：使用错误边界来捕获渲染期间发生的错误。 这可以防止您的整个应用程序崩溃，并提供更好的用户体验。
• 优化代码分割：策略性地使用代码分割来减少应用程序的初始加载时间。 识别大型或不常用的组件，并将它们分割为单独的块。
• 测试您的 Suspense 实现：彻底测试您的 Suspense 实现，以确保它正常工作，并且您的应用程序可以优雅地处理加载状态和错误。

使用错误边界处理错误

虽然 Suspense 处理*加载*状态，但错误边界处理渲染期间的*错误*状态。 错误边界是 React 组件，用于捕获其子组件树中任何位置的 JavaScript 错误，记录这些错误，并显示后备 UI，而不是使整个组件树崩溃。

这是一个错误边界的基本示例：

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

要使用错误边界，请将其包装在可能抛出错误的组件周围：

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

通过结合 Suspense 和错误边界，您可以创建一个强大而有弹性的应用程序，可以优雅地处理加载状态和错误。

真实世界的例子

以下是一些真实世界的例子，说明如何使用 Suspense 来改善用户体验：

• 电子商务网站：使用 Suspense 在获取产品详细信息或图像时显示加载指示器。 这可以防止用户在等待数据加载时看到空白页面。
• 社交媒体平台：使用 Suspense 在用户向下滚动页面时延迟加载评论或帖子。 这可以改善页面的初始加载时间，并减少需要下载的数据量。
• 仪表板应用程序：使用 Suspense 在获取图表或图形的数据时显示加载指示器。 这可以提供更流畅和更响应的用户体验。

示例：国际电子商务平台

考虑一个在全球销售产品的国际电子商务平台。 该平台可以利用 Suspense 和 React.lazy() 来：

• 延迟加载产品图片：仅当产品图片在视口中可见时，才使用 React.lazy() 加载产品图片。 这可以显着减少产品列表页面的初始加载时间。 使用 <Suspense fallback={<img src="placeholder.png" alt="Loading..." />}> 包装每个延迟加载的图片，以在实际图片加载时显示占位符图片。
• 代码分割特定国家/地区的组件：如果平台有特定国家/地区的组件（例如，货币格式、地址输入字段），则仅当用户选择特定国家/地区时，才使用 React.lazy() 加载这些组件。
• 获取本地化产品描述：使用像 SWR 这样的数据获取库与 Suspense 一起获取用户首选语言的产品描述。 在获取本地化描述时显示加载指示器。

结论

React Suspense 是一项强大的功能，可以显着改善您的 React 应用程序的用户体验。 通过提供一种声明式的方式来管理加载状态和代码分割，Suspense 简化了您的代码，并使其更容易推理异步操作。 无论您是构建小型个人项目还是大型企业应用程序，Suspense 都可以帮助您创建更流畅、更响应和更高性能的用户体验。

通过将 Suspense 与数据获取库和代码分割技术集成，您可以释放 React 并发模式的全部潜力，并创建真正现代和引人入胜的 Web 应用程序。 拥抱 Suspense 并将您的 React 开发提升到一个新的水平。

进一步学习

• React Suspense 文档
• SWR 文档
• TanStack Query 文档
• React 18 公告（并发模式）