本文演示如何使用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解析后更新。
以上就是React 新 API 使用（承诺）的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
945
收藏
