M

MLOG

中文

探索 React Suspense 在代码分割之外的数据获取应用。理解 Fetch-As-You-Render、错误处理以及面向未来全球化应用的模式。

React Suspense 资源加载：掌握现代数据获取模式

在瞬息万变的 Web 开发世界中，用户体验 (UX) 至高无上。无论网络状况或设备能力如何，应用程序都应快速、响应迅速且令人愉悦。对于 React 开发者来说，这通常意味着错综复杂的状态管理、复杂的加载指示器，以及与数据获取瀑布流的持续斗争。React Suspense 应运而生，它是一个强大但常被误解的功能，旨在从根本上改变我们处理异步操作，尤其是数据获取的方式。

Suspense 最初是为配合 React.lazy() 进行代码分割而引入的，但其真正潜力在于它能够协调加载*任何*异步资源，包括来自 API 的数据。本综合指南将深入探讨用于资源加载的 React Suspense，探索其核心概念、基本数据获取模式以及构建高性能、有弹性的全球化应用程序的实际考量。

React 中数据获取的演变：从命令式到声明式

多年来，React 组件中的数据获取主要依赖一种常见模式：使用 useEffect 钩子启动 API 调用，通过 useState 管理加载和错误状态，并根据这些状态进行条件渲染。虽然这种方法可行，但常常导致以下几个挑战：

思考一个没有 Suspense 的典型数据获取场景：

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

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

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setIsLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };
    fetchUser();
  }, [userId]);

  if (isLoading) {
    return <p>正在加载用户个人资料...</p>;
  }

  if (error) {
    return <p style={"color: red;"}>错误: {error.message}</p>;
  }

  if (!user) {
    return <p>无可用用户数据。</p>;
  }

  return (
    <div>
      <h2>用户: {user.name}</h2>
      <p>邮箱: {user.email}</p>
      <!-- 更多用户详情 -->
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>欢迎来到应用程序</h1>
      <UserProfile userId={"123"} />
    </div>
  );
}

这种模式无处不在，但它迫使组件管理自身的异步状态，常常导致 UI 与数据获取逻辑之间的紧密耦合。Suspense 提供了一种更具声明性且更精简的替代方案。

理解代码分割之外的 React Suspense

大多数开发者首次接触 Suspense 是通过 React.lazy() 进行代码分割，它允许你延迟加载组件代码直到需要时。例如：

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

const LazyComponent = lazy(() => import('./MyHeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>正在加载组件...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

在这种情况下，如果 MyHeavyComponent 尚未加载，<Suspense> 边界将捕获由 lazy() 抛出的 promise，并显示 fallback UI，直到组件代码准备就绪。这里的关键洞见是：Suspense 通过捕获在渲染期间抛出的 promise 来工作。

这种机制并非代码加载独有。任何在渲染期间调用且抛出 promise 的函数（例如，因为资源尚未可用）都可以被组件树中更高层的 Suspense 边界捕获。当 promise 解析后，React 会尝试重新渲染该组件，如果资源现在可用，fallback UI 就会被隐藏，实际内容则会显示出来。

Suspense 数据获取的核心概念

要利用 Suspense 进行数据获取，我们需要理解几个核心原则：

1. 抛出一个 Promise

与使用 async/await 解析 promise 的传统异步代码不同，Suspense 依赖于一个在数据未就绪时*抛出* promise 的函数。当 React 尝试渲染一个调用了此类函数的组件，而数据仍在等待中时，这个 promise 就会被抛出。然后，React 会“暂停”该组件及其子组件的渲染，并向上查找最近的 <Suspense> 边界。

2. Suspense 边界

<Suspense> 组件充当了 promise 的错误边界。它接受一个 fallback prop，这是在其任何子组件（或其后代）处于挂起状态（即抛出 promise）时要渲染的 UI。一旦其子树中所有抛出的 promise 都解析完成，fallback UI 就会被实际内容所取代。

单个 Suspense 边界可以管理多个异步操作。例如，如果你在同一个 <Suspense> 边界内有两个组件，每个组件都需要获取数据，那么 fallback UI 将一直显示，直到*两个*数据获取都完成。这避免了显示不完整的 UI，并提供了更协调的加载体验。

3. 缓存/资源管理器（用户空间的责任）

至关重要的是，Suspense 本身不处理数据获取或缓存。它仅仅是一种协调机制。要让 Suspense 用于数据获取，你需要一个能够：

这个“资源管理器”通常通过一个简单的缓存（例如 Map 或对象）来实现，用于存储每个资源的状态（待处理、已解析或错误）。虽然你可以为了演示目的手动构建它，但在实际应用中，你会使用一个与 Suspense 集成的强大数据获取库。

4. 并发模式（React 18 的增强功能）

虽然 Suspense 可以在旧版 React 中使用，但其全部威力在并发 React（在 React 18 中通过 createRoot 默认启用）中才得以释放。并发模式允许 React 中断、暂停和恢复渲染工作。这意味着：

使用 Suspense 的数据获取模式

让我们来探讨随着 Suspense 的出现，数据获取模式的演变。

模式 1：先获取再渲染（Fetch-Then-Render）（传统的 Suspense 包装）

这是经典的方法，即先获取数据，然后才渲染组件。虽然没有直接利用“抛出 promise”机制来处理数据，但你可以用 Suspense 边界包裹一个*最终*会渲染数据的组件，为其提供一个 fallback UI。这更多地是将 Suspense 用作一个通用的加载 UI 协调器，适用于那些最终会准备就绪的组件，即使其内部的数据获取仍然是基于传统的 useEffect。

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

function UserDetails({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      setIsLoading(true);
      const res = await fetch(`/api/users/${userId}`);
      const data = await res.json();
      setUser(data);
      setIsLoading(false);
    };
    fetchUserData();
  }, [userId]);

  if (isLoading) {
    return <p>正在加载用户详情...</p>;
  }

  return (
    <div>
      <h3>用户: {user.name}</h3>
      <p>邮箱: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>先获取再渲染示例</h1>
      <Suspense fallback={<div>页面整体加载中...</div>}>
        <UserDetails userId={"1"} />
      </Suspense>
    </div>
  );
}

优点： 简单易懂，向后兼容。可以作为快速添加全局加载状态的方法。

缺点： 没有消除 UserDetails 内部的样板代码。如果组件按顺序获取数据，仍然容易出现瀑布流问题。没有真正利用 Suspense 为数据本身提供的“抛出-捕获”机制。

模式 2：先渲染再获取（Render-Then-Fetch）（在渲染中获取，不适用于生产环境）

这种模式主要是为了说明不应该直接用 Suspense 做什么，因为如果处理不当，可能会导致无限循环或性能问题。它涉及到在组件的渲染阶段直接尝试获取数据或调用挂起函数，而*没有*适当的缓存机制。

// 不要在生产环境中使用此代码，除非有适当的缓存层
// 这纯粹是为了概念上说明直接“抛出”是如何工作的

let fetchedData = null;
let dataPromise = null;

function fetchDataSynchronously(url) {
  if (fetchedData) {
    return fetchedData;
  }

  if (!dataPromise) {
    dataPromise = fetch(url)
      .then(res => res.json())
      .then(data => { fetchedData = data; dataPromise = null; return data; })
      .catch(err => { dataPromise = null; throw err; });
  }
  throw dataPromise; // Suspense 在这里起作用
}

function UserDetailsBadExample({ userId }) {
  const user = fetchDataSynchronously(`/api/users/${userId}`);
  return (
    <div>
      <h3>用户: {user.name}</h3>
      <p>邮箱: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>先渲染再获取（仅为说明，不推荐直接使用）</h1>
      <Suspense fallback={<div>正在加载用户...</div>}>
        <UserDetailsBadExample userId={"2"} />
      </Suspense>
    </div>
  );
}

优点： 展示了组件如何直接“请求”数据并在未就绪时挂起。

缺点： 在生产环境中问题很大。这种手动的、全局的 fetchedData 和 dataPromise 系统过于简单，无法稳健地处理多个请求、数据失效或错误状态。它只是对“抛出 promise”概念的原始演示，而不是一个应采纳的模式。

模式 3：边渲染边获取（Fetch-As-You-Render）（理想的 Suspense 模式）

这是 Suspense 真正为数据获取带来的范式转变。Fetch-As-You-Render 意味着你*尽快*开始获取数据，通常是*在*渲染过程*之前*或*与之并发*进行，而不是等待组件渲染后再获取数据，或预先获取所有数据。然后，组件从缓存中“读取”数据，如果数据未就绪，它们就会挂起。其核心思想是将数据获取逻辑与组件的渲染逻辑分离开来。

要实现 Fetch-As-You-Render，你需要一种机制来：

  1. 在组件的 render 函数之外启动数据获取（例如，进入某个路由或点击按钮时）。
  2. 将 promise 或已解析的数据存储在缓存中。
  3. 提供一种让组件从此缓存中“读取”数据的方式。如果数据尚不可用，读取函数会抛出待处理的 promise。

这种模式解决了瀑布流问题。如果两个不同的组件需要数据，它们的请求可以并行启动，而 UI 将在*两者都*准备就绪后才会出现，这一切都由单个 Suspense 边界来协调。

手动实现（为了理解）

为了掌握其底层机制，让我们创建一个简化的手动资源管理器。在实际应用中，你会使用专门的库。

import React, { Suspense } from 'react';

// --- 简易缓存/资源管理器 --- //
const cache = new Map();

function createResource(promise) {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } else if (status === 'success') {
        return result;
      }
    },
  };
}

function fetchData(key, fetcher) {
  if (!cache.has(key)) {
    cache.set(key, createResource(fetcher()));
  }
  return cache.get(key);
}

// --- 数据获取函数 --- //
const fetchUserById = (id) => {
  console.log(`正在获取用户 ${id}...`);
  return new Promise(resolve => setTimeout(() => {
    const users = {
      '1': { id: '1', name: 'Alice Smith', email: 'alice@example.com' },
      '2': { id: '2', name: 'Bob Johnson', email: 'bob@example.com' },
      '3': { id: '3', name: 'Charlie Brown', email: 'charlie@example.com' }
    };
    resolve(users[id]);
  }, 1500));
};

const fetchPostsByUserId = (userId) => {
  console.log(`正在获取用户 ${userId} 的帖子...`);
  return new Promise(resolve => setTimeout(() => {
    const posts = {
      '1': [{ id: 'p1', title: '我的第一篇帖子' }, { id: 'p2', title: '旅行奇遇' }],
      '2': [{ id: 'p3', title: '编程洞见' }],
      '3': [{ id: 'p4', title: '全球趋势' }, { id: 'p5', title: '本地美食' }]
    };
    resolve(posts[userId] || []);
  }, 2000));
};

// --- 组件 --- //
function UserProfile({ userId }) {
  const userResource = fetchData(`user-${userId}`, () => fetchUserById(userId));
  const user = userResource.read(); // 如果用户数据未就绪，这里会挂起

  return (
    <div>
      <h3>用户: {user.name}</h3>
      <p>邮箱: {user.email}</p>
    </div>
  );
}

function UserPosts({ userId }) {
  const postsResource = fetchData(`posts-${userId}`, () => fetchPostsByUserId(userId));
  const posts = postsResource.read(); // 如果帖子数据未就绪，这里会挂起

  return (
    <div>
      <h4>用户 {userId} 的帖子:</h4>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
        {posts.length === 0 && <li>未找到帖子。</li>}
      </ul>
    </div>
  );
}

// --- 应用程序 --- //
let initialUserResource = null;
let initialPostsResource = null;

function prefetchDataForUser(userId) {
  initialUserResource = fetchData(`user-${userId}`, () => fetchUserById(userId));
  initialPostsResource = fetchData(`posts-${userId}`, () => fetchPostsByUserId(userId));
}

// 在 App 组件渲染之前就预取一些数据
prefetchDataForUser('1');

function App() {
  return (
    <div>
      <h1>使用 Suspense 实现边渲染边获取</h1>
      <p>这演示了数据获取如何并行发生，并由 Suspense 进行协调。</p>

      <Suspense fallback={<div>正在加载用户个人资料和帖子...</div>}>
        <UserProfile userId={"1"} />
        <UserPosts userId={"1"} />
      </Suspense>

      <h2>另一部分</h2>
      <Suspense fallback={<div>正在加载其他用户...</div>}>
        <UserProfile userId={"2"} />
      </Suspense>
    </div>
  );
}

在这个例子中：

支持 Fetch-As-You-Render 的库

手动构建和维护一个健壮的资源管理器是复杂的。幸运的是，几个成熟的数据获取库已经采纳或正在采纳 Suspense，提供了经过实战检验的解决方案：

这些库抽象了创建和管理资源、处理缓存、重新验证、乐观更新和错误处理的复杂性，使得实现 Fetch-As-You-Render 变得更加容易。

模式 4：使用支持 Suspense 的库进行预取

预取是一种强大的优化手段，即主动获取用户在不久的将来可能需要的数据，甚至在他们明确请求之前。这可以极大地提高感知性能。

有了支持 Suspense 的库，预取变得无缝。你可以在不立即改变 UI 的用户交互上触发数据获取，例如将鼠标悬停在链接上或按钮上。

import React, { Suspense } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

// 假设这些是你的 API 调用
const fetchProductById = async (id) => {
  console.log(`正在获取产品 ${id}...`);
  return new Promise(resolve => setTimeout(() => {
    const products = {
      'A001': { id: 'A001', name: '全球小部件 X', price: 29.99, description: '一款适用于国际市场的多功能小部件。' },
      'B002': { id: 'B002', name: '通用小工具 Y', price: 149.99, description: '尖端小工具，风靡全球。' },
    };
    resolve(products[id]);
  }, 1000));
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true, // 默认对所有查询启用 Suspense
    },
  },
});

function ProductDetails({ productId }) {
  const { data: product } = useQuery({
    queryKey: ['product', productId],
    queryFn: () => fetchProductById(productId),
  });

  return (
    <div style={{"border": "1px solid #ccc", "padding": "15px", "margin": "10px 0"}}>
      <h3>{product.name}</h3>
      <p>价格: ${product.price.toFixed(2)}</p>
      <p>{product.description}</p>
    </div>
  );
}

function ProductList() {
  const handleProductHover = (productId) => {
    // 当用户悬停在产品链接上时预取数据
    queryClient.prefetchQuery({
      queryKey: ['product', productId],
      queryFn: () => fetchProductById(productId),
    });
    console.log(`正在预取产品 ${productId}`);
  };

  return (
    <div>
      <h2>可选产品:</h2>
      <ul>
        <li>
          <a href="#" onMouseEnter={() => handleProductHover('A001')}
             onClick={(e) => { e.preventDefault(); /* 导航或显示详情 */ }}
          >全球小部件 X (A001)</a>
        </li>
        <li>
          <a href="#" onMouseEnter={() => handleProductHover('B002')}
             onClick={(e) => { e.preventDefault(); /* 导航或显示详情 */ }}
          >通用小工具 Y (B002)</a>
        </li>
      </ul>
      <p>将鼠标悬停在产品链接上以观察预取操作。打开网络选项卡进行观察。</p>
    </div>
  );
}

function App() {
  const [showProductA, setShowProductA] = React.useState(false);
  const [showProductB, setShowProductB] = React.useState(false);

  return (
    <QueryClientProvider client={queryClient}>
      <h1>使用 React Suspense 进行预取 (React Query)</h1>
      <ProductList />

      <button onClick={() => setShowProductA(true)}>显示全球小部件 X</button>
      <button onClick={() => setShowProductB(true)}>显示通用小工具 Y</button>

      {showProductA && (
        <Suspense fallback={<p>正在加载全球小部件 X...</p>}>
          <ProductDetails productId="A001" />
        </Suspense>
      )}
      {showProductB && (
        <Suspense fallback={<p>正在加载通用小工具 Y...</p>}>
          <ProductDetails productId="B002" />
        </Suspense>
      )}
    </QueryClientProvider>
  );
}

在这个例子中，鼠标悬停在产品链接上会触发 `queryClient.prefetchQuery`，它会在后台启动数据获取。如果用户随后点击按钮显示产品详情，并且数据已经通过预取存在于缓存中，组件将立即渲染而不会挂起。如果预取仍在进行中或未被启动，Suspense 将显示 fallback UI，直到数据准备就绪。

使用 Suspense 和错误边界处理错误

虽然 Suspense 通过显示 fallback UI 来处理“加载中”状态，但它不直接处理“错误”状态。如果一个挂起组件抛出的 promise 被拒绝（即数据获取失败），这个错误将沿组件树向上传播。为了优雅地处理这些错误并显示适当的 UI，你需要使用错误边界 (Error Boundaries)。

错误边界是一个实现了 componentDidCatch 或 static getDerivedStateFromError 这两个生命周期方法之一的 React 组件。它能捕获其子组件树中任何地方的 JavaScript 错误，包括那些如果处于 pending 状态本应被 Suspense 捕获的 promise 抛出的错误。

import React, { Suspense, useState } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

// --- 错误边界组件 --- //
class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    // 更新 state，以便下一次渲染可以显示 fallback UI。
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // 你也可以将错误记录到错误报告服务
    console.error("捕获到一个错误:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的 fallback UI
      return (
        <div style={{"border": "2px solid red", "padding": "20px", "margin": "20px 0", "background": "#ffe0e0"}}>
          <h2>出错了！</h2>
          <p>{this.state.error && this.state.error.message}</p>
          <p>请尝试刷新页面或联系支持人员。</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}>重试</button>
        </div>
      );
    }
    return this.props.children;
  }
}

// --- 数据获取 (可能出错) --- //
const fetchItemById = async (id) => {
  console.log(`尝试获取项目 ${id}...`);
  return new Promise((resolve, reject) => setTimeout(() => {
    if (id === 'error-item') {
      reject(new Error('加载项目失败：网络无法访问或项目未找到。'));
    } else if (id === 'slow-item') {
      resolve({ id: 'slow-item', name: '缓慢交付', data: '这个项目花了一些时间但还是送达了！', status: 'success' });
    } else {
      resolve({ id, name: `项目 ${id}`, data: `项目 ${id} 的数据` });
    }
  }, id === 'slow-item' ? 3000 : 800));
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
      retry: false, // 为演示目的，禁用重试，以便立即看到错误
    },
  },
});

function DisplayItem({ itemId }) {
  const { data: item } = useQuery({
    queryKey: ['item', itemId],
    queryFn: () => fetchItemById(itemId),
  });

  return (
    <div>
      <h3>项目详情:</h3>
      <p>ID: {item.id}</p>
      <p>名称: {item.name}</p>
      <p>数据: {item.data}</p>
    </div>
  );
}

function App() {
  const [fetchType, setFetchType] = useState('normal-item');

  return (
    <QueryClientProvider client={queryClient}>
      <h1>Suspense 和错误边界</h1>

      <div>
        <button onClick={() => setFetchType('normal-item')}>获取正常项目</button>
        <button onClick={() => setFetchType('slow-item')}>获取慢速项目</button>
        <button onClick={() => setFetchType('error-item')}>获取错误项目</button>
      </div>

      <MyErrorBoundary>
        <Suspense fallback={<p>通过 Suspense 加载项目中...</p>}>
          <DisplayItem itemId={fetchType} />
        </Suspense>
      </MyErrorBoundary>
    </QueryClientProvider>
  );
}

通过用错误边界包裹你的 Suspense 边界（或可能挂起的组件），你可以确保在数据获取期间的网络故障或服务器错误被优雅地捕获和处理，防止整个应用程序崩溃。这提供了一种健壮且用户友好的体验，让用户能够了解问题并可能进行重试。

使用 Suspense 进行状态管理和数据失效

需要澄清的是，React Suspense 主要解决异步资源的初始加载状态。它本身不管理客户端缓存，不处理数据失效，也不协调变更操作（创建、更新、删除）及其后续的 UI 更新。

这就是支持 Suspense 的数据获取库（React Query, SWR, Apollo Client, Relay）变得不可或缺的地方。它们通过提供以下功能来补充 Suspense：

如果没有一个强大的数据获取库，在一个手动的 Suspense 资源管理器之上实现这些功能将是一项重大的工程，基本上相当于你需要自己构建一个数据获取框架。

实践考量与最佳实践

采用 Suspense 进行数据获取是一个重要的架构决策。以下是一些针对全球化应用的实践考量：

1. 并非所有数据都需要 Suspense

Suspense 非常适合那些直接影响组件初始渲染的关键数据。对于非关键数据、后台获取或可以在没有强烈视觉影响的情况下延迟加载的数据，传统的 useEffect 或预渲染可能仍然适用。过度使用 Suspense 可能导致加载体验的粒度不够细，因为单个 Suspense 边界会等待其*所有*子组件都解析完成。

2. Suspense 边界的粒度

深思熟虑地放置你的 <Suspense> 边界。一个位于应用顶层的单一、巨大的边界可能会将整个页面隐藏在一个加载指示器后面，这会令人沮丧。更小、粒度更细的边界允许页面的不同部分独立加载，提供更渐进和响应迅速的体验。例如，一个边界围绕用户个人资料组件，另一个围绕推荐产品列表。

<div>
  <h1>产品页面</h1>
  <Suspense fallback={<p>正在加载主要产品详情...</p>}>
    <ProductDetails id="prod123" />
  </Suspense>

  <hr />

  <h2>相关产品</h2>
  <Suspense fallback={<p>正在加载相关产品...</p>}>
    <RelatedProducts category="electronics" />
  </Suspense>
</div>

这种方法意味着即使用户的相关产品仍在加载，他们也能看到主要的产品详情。

3. 服务器端渲染 (SSR) 和流式 HTML

React 18 新的流式 SSR API (renderToPipeableStream) 与 Suspense 完全集成。这允许你的服务器在 HTML 准备就绪后立即发送它，即使页面的某些部分（如依赖数据的组件）仍在加载。服务器可以先流式传输一个占位符（来自 Suspense 的 fallback），然后在数据解析后流式传输实际内容，而无需在客户端进行完整的重新渲染。这显著提高了全球用户在不同网络条件下的感知加载性能。

4. 渐进式采用

你不需要重写整个应用程序来使用 Suspense。你可以渐进式地引入它，从那些最能从其声明式加载模式中受益的新功能或组件开始。

5. 工具与调试

虽然 Suspense 简化了组件逻辑，但调试方式可能有所不同。React DevTools 提供了对 Suspense 边界及其状态的洞察。熟悉你所选的数据获取库如何暴露其内部状态（例如，React Query Devtools）。

6. Suspense Fallback 的超时

对于非常长的加载时间，你可能希望为 Suspense fallback 引入一个超时，或者在一定延迟后切换到更详细的加载指示器。React 18 中的 useDeferredValue 和 useTransition 钩子可以帮助管理这些更细微的加载状态，允许你在获取新数据时显示 UI 的“旧”版本，或推迟非紧急的更新。

React 数据获取的未来：React Server Components 及更远

React 中数据获取的旅程并未止于客户端 Suspense。React Server Components (RSC) 代表了一次重大的演进，有望模糊客户端和服务器之间的界限，并进一步优化数据获取。

随着 React 的不断成熟，Suspense 将日益成为构建高性能、用户友好和可维护应用程序的核心部分。它推动开发者走向一种更具声明性和弹性的方式来处理异步操作，将复杂性从单个组件转移到一个管理良好的数据层。

结论

React Suspense，最初是一个用于代码分割的功能，现已发展成为一个用于数据获取的变革性工具。通过拥抱 Fetch-As-You-Render 模式并利用支持 Suspense 的库，开发者可以显著改善其应用程序的用户体验，消除加载瀑布流，简化组件逻辑，并提供平滑、协调的加载状态。结合用于健壮错误处理的错误边界和 React Server Components 的未来前景，Suspense 使我们能够构建不仅性能卓越、富有弹性，而且对全球用户而言本质上更令人愉悦的应用程序。向 Suspense 驱动的数据获取范式的转变需要概念上的调整，但在代码清晰度、性能和用户满意度方面的好处是巨大的，完全值得投入。

React Suspense 资源加载：掌握现代数据获取模式 | MLOG