React use 实现原理#

NOTE
React 18 引入的 use 是一个革命性的特性，它让组件能够优雅地处理异步数据。本文将通过循序渐进的示例，带你深入理解其工作原理和实现细节。

为什么需要 use?#

在 React 18 之前，处理异步数据通常需要使用 useEffect 配合 state 来管理加载状态。这种方式不仅代码冗长，还容易产生竞态条件。use 的出现让异步数据处理变得更加直观和安全。

在线演示#

核心概念#

在开始深入示例之前，我们需要理解两个关键概念：

Suspense 边界: 用于处理异步操作的容器组件
Promise 抛出机制: React 捕获并处理异步操作的核心机制

以下是所有示例都会用到的基础结构：

function Fallback() {
  console.info("渲染加载状态");
  return <div>加载中...</div>;
}

const Case = () => {
  return (
    <Suspense fallback={<Fallback />}>
      <Hello />
    </Suspense>
  );
};

TIP
Suspense 的工作原理是捕获子组件中抛出的 Promise，并在 Promise 解决之前显示 fallback 内容。这种机制让异步处理变得声明式而非命令式。

从简单到复杂的实现过程#

1. 最简单的同步渲染#

我们从最基础的同步渲染开始，理解基线行为：

function Hello() {
  return <div>hello</div>;
}

这种情况下不会触发 Suspense，因为没有异步操作。

2. 理解 Suspense 机制#

通过一个简单的计数器示例，演示 Suspense 的工作原理：

// Hello.tsx
let count = 0;

function Hello() {
  if (count === 0) {
    throw new Promise((resolve) => {
      setTimeout(() => {
        count++;
        resolve(count);
      }, 1_000);
    });
  }

  return <div>计数: {count}</div>;
}

WARNING
当组件抛出 Promise 时，React 会：
暂停当前组件的渲染
显示最近的 Suspense fallback
等待 Promise 完成后重新渲染

3. 真实场景：异步数据获取#

更贴近实际开发的数据获取示例：

// getUser.ts
export async function getUser() {
  return new Promise<string>((resolve) => {
    setTimeout(() => {
      resolve("Tom");
    }, 1_000);
  });
}

// Hello.tsx
let user: string;

function Hello() {
  if (!user) {
    throw getUser().then((v) => (user = v));
  }

  return <div>欢迎, {user}</div>;
}

4. 使用官方 use#

React 18 的 use 提供了更优雅的方式：

import { use } from "react";

const userPromise = getUser();

function Hello() {
  const user = use(userPromise);
  return <div>欢迎, {user}</div>;
}

NOTE
use 不仅简化了代码，还自动处理了 Promise 的状态管理，让异步代码读起来像同步代码。

5. 深入实现原理#

下面是一个简化但功能完整的 use 实现：

type UsePromise<T> = Promise<T> & {
  status: "pending" | "resolved" | "rejected";
  value: T;
  reason: unknown;
};

function use<T>(promise: Promise<T>) {
  const usePromise = promise as UsePromise<T>;
  
  // 检查是否已经增强过这个 Promise
  if ("status" in promise) {
    switch (usePromise.status) {
      case "pending":
        throw usePromise;
      case "resolved":
        return usePromise.value;
      case "rejected":
        throw usePromise.reason;
    }
  }

  // 首次调用时增强 Promise
  usePromise.status = "pending";
  throw promise.then(
    function resolve(val) {
      usePromise.status = "resolved";
      usePromise.value = val;
    },
    function reject(reason) {
      usePromise.status = "rejected";
      usePromise.reason = reason;
    }
  );
}

WARNING
这是一个教学用的简化实现。生产环境中的 React use 包含更多优化和错误处理逻辑。

工作原理详解#

use 的核心工作原理包含三个关键部分：

状态追踪
- 通过扩展 Promise 对象添加状态标记
- 缓存已解决的值或错误
异常控制流
- 利用 throw 语句触发 Suspense
- 通过状态机制控制渲染时机
重渲染管理
- Promise 解决后自动触发重渲染
- 确保状态更新的原子性

最佳实践指南#

在实际项目中使用 use 时，请遵循以下建议：

架构设计
- 始终在 Suspense 边界内使用
- 配合 ErrorBoundary 处理错误情况
性能优化
- 合理设置 Suspense 的粒度
- 注意 Promise 的缓存和复用
用户体验
- 提供合适的加载状态展示
- 实现优雅的错误处理机制
工具选择
- 考虑使用 React Query 或 SWR 等成熟方案
- 它们提供了更完整的缓存和重试机制

TIP
在大型应用中，推荐使用专业的数据获取库，它们在 use 的基础上提供了更多企业级特性，如缓存管理、请求去重、乐观更新等。