本文演示如何使用react 19中的use钩子从promise中读取数据。
链接
- 演示
- 代码库
代码片段
以下代码展示了如何使用use钩子：
<code class="javascript">import { suspense } from "react";
export default function page() {
const messagePromise = fetchMessages();
return (
<Suspense fallback={<p>⌛ 等待消息...</p>}>
<Message messagePromise={messagePromise} />
</Suspense>
);
}</code>
关键点：
- 使用
<Suspense>组件，并在Promise解析前显示占位符“⌛ 等待消息...” 。 -
messagePromise作为prop传递给<Message>组件。
fetchMessages函数：
<code class="javascript">async function fetchMessages() {
return [
{ id: 1, text: "消息 1" },
{ id: 2, text: "消息 2" },
];
}</code>
这是一个简单的函数，模拟从服务器获取数据。在实际应用中，这可能是一个网络请求。async关键字确保函数返回一个Promise。
<Message>组件：
<code class="javascript">function Message({ messagePromise }) {
const messages = use(messagePromise);
return messages.map((message) => (
<p key={message.id}>{message.text}</p>
));
}</code>
use钩子用于从messagePromise中获取数据。
use与await的区别：
await会阻塞渲染，直到Promise解析完成；而use允许组件在Promise解析后重新渲染，不会阻塞初始渲染。
Promise解析前后的组件状态：
结论
use和await在服务器端渲染(SSR)环境下行为相同，返回相同的HTML响应。但在客户端，await阻塞渲染，而use允许组件在Promise解析后更新。
