React Suspense配合use Hook实现数据获取的新模式

React 18 引入了并发渲染特性，React 19 则进一步锁定了数据获取的新范式。传统的 useEffect 加载状态管理模式正在被 Suspense 配合新的 use API 取代。这种模式将数据获取的逻辑与组件渲染紧密绑定，极大地简化了代码结构。

1. 创建模拟数据源

在开始构建组件之前，首先需要一个能够返回 Promise 的数据获取函数。这个函数模拟了从后端 API 获取用户数据的过程，包含网络延迟。

新建一个名为 api.js 的文件，输入以下代码：

// api.js

let cache = null;

export function fetchUserData() {
  // 如果已经有缓存，直接返回缓存的 Promise
  if (cache) {
    return cache;
  }

  // 模拟网络请求，延迟 2 秒返回数据
  const promise = new Promise((resolve) => {
    setTimeout(() => {
      const data = {
        id: 1,
        name: "张三",
        role: "高级工程师",
        email: "zhangsan@example.com"
      };
      resolve(data);
    }, 2000);
  }).then((data) => {
    cache = data; // 请求成功后缓存数据
    return data;
  });

  cache = promise; // 缓存 Promise 对象本身，防止重复请求
  return promise;
}

保存 文件。这个函数的核心在于它返回一个 Promise 对象，且具备基本的缓存能力，避免组件重渲染时重复发起请求。

2. 使用 use Hook 读取数据

在组件中使用 use Hook 来读取资源。use Hook 的作用是读取 Promise 或 Context 的值。当传入一个 Promise 时，如果 Promise 处于 pending 状态，React 会挂起该组件的渲染；如果 Promise 完成，use 会返回解析后的值。

新建 UserProfile.js 文件，编写以下代码：

// UserProfile.js
import { use } from 'react';
import { fetchUserData } from './api';

export default function UserProfile() {
  // 直接调用 use Hook 传入 Promise
  const user = use(fetchUserData());

  return (
    <div style={{ border: '1px solid #ccc', padding: '20px', borderRadius: '8px' }}>
      <h2>用户信息</h2>
      <p><strong>姓名：</strong>{user.name}</p>
      <p><strong>职位：</strong>{user.role}</p>
      <p><strong>邮箱：</strong>{user.email}</p>
    </div>
  );
}

注意，use 只能在组件或 Hook 的顶层调用，类似于 useState，不能放在条件语句或循环中。

3. 配置 Suspense 边界

当 UserProfile 组件因为数据未就绪而“挂起”时，React 需要知道在等待期间显示什么内容。这就是 <Suspense> 组件的作用。

修改主入口文件（通常是 App.js 或 index.js），引入 Suspense 并包裹刚才创建的组件：

// App.js
import { Suspense } from 'react';
import UserProfile from './UserProfile';

function App() {
  return (
    <div style={{ padding: '40px', fontFamily: 'Arial, sans-serif' }}>
      <h1>React Suspense 数据获取演示</h1>

      {/* Suspense 捕获子组件中的“挂起”状态 */}
      <Suspense fallback={<div style={{ color: '#666' }}>正在加载用户数据...</div>}>
        <UserProfile />
      </Suspense>

    </div>
  );
}

export default App;

运行 项目。浏览器显示“正在加载用户数据...”字样，等待 2 秒后自动切换为用户详情卡片。

4. 添加错误处理

如果网络请求失败（Promise 被 reject），React 将抛出错误。为了防止整个应用白屏，必须使用 Error Boundary（错误边界）来捕获这些错误。

新建 ErrorBoundary.js 文件：

// ErrorBoundary.js
import { Component } from 'react';

export class ErrorBoundary extends Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{ color: 'red', padding: '20px', border: '1px solid red' }}>
          <h3>出错了</h3>
          <p>{this.state.error?.message || '未知错误'}</p>
          <button onClick={() => window.location.reload()}>重试</button>
        </div>
      );
    }

    return this.props.children;
  }
}

回到 App.js，用 ErrorBoundary 包裹 Suspense：

// App.js 更新部分
import { Suspense } from 'react';
import { ErrorBoundary } from './ErrorBoundary';
import UserProfile from './UserProfile';

function App() {
  return (
    <div style={{ padding: '40px' }}>
      <h1>React Suspense 数据获取演示</h1>

      <ErrorBoundary>
        <Suspense fallback={<div>正在加载用户数据...</div>}>
          <UserProfile />
        </Suspense>
      </ErrorBoundary>

    </div>
  );
}

5. 执行流程解析

为了更直观地理解这种新模式的工作原理，下面的流程图展示了从组件渲染到数据最终上屏的完整生命周期。

6. 对比传统模式

为了理解新模式的优势，我们需要对比它与传统的 useEffect 模式在代码复杂度和心智模型上的区别。

通过对比可以看出，use + Suspense 将“异步”的过程伪装成了“同步”的写法，使得组件代码的可读性和维护性得到了显著提升。

7. 处理多个数据请求

在实际应用中，一个页面往往需要加载多个独立的数据源。Suspense 允许嵌套使用，这意味着可以为不同的部分设置独立的加载状态。

修改 App.js，引入另一个假设的组件 UserPosts：

// App.js 最终形态
import { Suspense } from 'react';
import { ErrorBoundary } from './ErrorBoundary';
import UserProfile from './UserProfile';
import UserPosts from './UserPosts'; // 假设此组件同样使用了 use Hook

function App() {
  return (
    <div style={{ padding: '40px' }}>
      <h1>React Suspense 数据获取演示</h1>

      <ErrorBoundary>
        {/* 外层 Suspense 等待用户资料 */}
        <Suspense fallback={<div>加载个人资料中...</div>}>
          <UserProfile />

          {/* 内层 Suspense 独立等待用户文章列表 */}
          <div style={{ marginTop: '20px' }}>
            <Suspense fallback={<div>加载文章列表中...</div>}>
              <UserPosts />
            </Suspense>
          </div>
        </Suspense>
      </ErrorBoundary>

    </div>
  );
}

当页面加载时，用户会先看到“加载个人资料中...”。一旦个人资料加载完成，即使用户文章还在加载中，个人资料卡片也会立即显示，而文章列表区域会继续显示其独立的加载状态。这种“瀑布流”式的加载体验能显著提升用户感知的页面性能。