使用 use() 钩子读取异步资源
在 React 19 中使用 use() 钩子在渲染期间读取 Promise 和 Context。
使用 use() 钩子读取异步资源 是 CoddyKit 上的免费 React Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
欢迎
本课将介绍如何使用 React 19 的 use() 钩子，直接在渲染函数中读取 Promise 和上下文值，从而简化异步数据访问。
什么是 use()
use() 是 React 19 的一个钩子，可以在渲染函数中同步读取资源——资源可以是 Promise 或 Context。如果 Promise 仍处于等待状态，组件会暂停渲染，最近的 Suspense 边界会显示其回退内容。
import { use } from 'react';
function UserProfile({ userPromise }) {
const user = use(userPromise); // suspends if pending
return <h1>{user.name}</h1>;
}将 Promise 作为属性传递
React 19 中的一种常见模式是：服务器组件创建一个 Promise（例如数据库查询），将其传递给客户端组件，然后客户端组件使用 use() 读取它。Suspense 边界可以位于上方的任意位置。
// Server Component
export default function Page() {
const userPromise = fetchUser(1); // NOT awaited
return (
<Suspense fallback={<Spinner />}>
<Profile userPromise={userPromise} />
</Suspense>
);
}
// Client Component
'use client';
export function Profile({ userPromise }) {
const user = use(userPromise);
return <p>{user.name}</p>;
}use() 与用于数据获取的 useEffect
使用 useEffect 获取数据时，需要手动管理加载和错误状态。use() 配合 Suspense 可以省去所有这些样板代码——组件主体只需像读取同步数据一样读取数据。
使用 use() 读取 Context
use() 也可以像 useContext 一样读取上下文值。不同之处在于，use() 可以有条件地调用（位于 if 或循环内部），而 useContext 必须遵循钩子规则。
import { use } from 'react';
import { ThemeContext } from './ThemeContext';
function Button({ danger }) {
if (danger) {
const theme = use(ThemeContext); // conditional — allowed with use()!
return <button style={{ color: theme.red }}>Delete</button>;
}
return <button>Click</button>;
}使用 ErrorBoundary 处理错误
如果传递给 use() 的 Promise 被拒绝，React 会抛出错误。请使用 ErrorBoundary 包裹组件，以捕获错误并显示回退内容。
<ErrorBoundary fallback={<Error />}>
<Suspense fallback={<Loading />}>
<Profile userPromise={fetchUser(id)} />
</Suspense>
</ErrorBoundary>仅在客户端组件中使用 use()
在客户端组件中，use() 可以与 Promise 一起使用。在服务器组件中，请直接使用异步函数和 await——服务器上没有必要使用 use() 处理 Promise。
缓存 Promise
如果组件重新渲染，它必须接收到相同的 Promise 引用，以避免重新获取数据。请在组件外部或稳定的位置（服务器、缓存或状态）创建 Promise，然后将其作为属性传递。
使用 use() 实现流式传输
将 use() 与流式 SSR 结合使用，可以让 React 流式传输页面 HTML，显示 Suspense 回退内容，然后在 Promise 解析后传输已解析的内容——这一切都通过同一个 HTTP 连接完成。
用于去重的 React.cache()
在服务器端，React.cache()（或 Next.js 的 unstable_cache）会在一次渲染过程中对同一个异步函数的多次调用进行去重，因此即使多个组件使用同一个异步操作，也只会访问数据库一次。
快速检查
调用 use(promise) 时，如果该 Promise 仍处于等待状态，客户端组件会做什么？
回顾
use(promise) 会在渲染过程中同步读取异步数据，并在数据仍处于等待状态时暂停。use(context) 可以有条件地使用，这一点不同于 useContext。请始终将它与 Suspense 配合来处理加载状态，并使用 ErrorBoundary 处理错误。
接下来
下一课：**React 操作与 useActionState**——您将定义服务器操作和客户端操作，并使用等待状态处理表单提交。
常见问题解答
「使用 use() 钩子读取异步资源」课时是免费的吗？
是的 — 「使用 use() 钩子读取异步资源」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「使用 use() 钩子读取异步资源」这节课中我会学到什么？
在 React 19 中使用 use() 钩子在渲染期间读取 Promise 和 Context。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「使用 use() 钩子读取异步资源」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。