本文演示如何使用react 19中的use钩子从promise中读取数据。
以下代码展示了如何使用use钩子：
import { suspense } from "react";
export default function page() {
const messagePromise = fetchMessages();
return (
<Suspense fallback={<p>⌛ 等待消息...</p>}>
<Message messagePromise={messagePromise} />
</Suspense>
);
}关键点：
fetchMessages函数：
async function fetchMessages() {
return [
{ id: 1, text: "消息 1" },
{ id: 2, text: "消息 2" },
];
}这是一个简单的函数，模拟从服务器获取数据。在实际应用中，这可能是一个网络请求。async关键字确保函数返回一个Promise。
function Message({ messagePromise }) {
const messages = use(messagePromise);
return messages.map((message) => (
<p key={message.id}>{message.text}</p>
));
}use钩子用于从messagePromise中获取数据。
await会阻塞渲染，直到Promise解析完成；而use允许组件在Promise解析后重新渲染，不会阻塞初始渲染。
Promise解析前后的组件状态：
use和await在服务器端渲染(SSR)环境下行为相同，返回相同的HTML响应。但在客户端，await阻塞渲染，而use允许组件在Promise解析后更新。
以上就是React 新 API 使用（承诺）的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
777
