本文演示如何使用react 19中的use钩子从promise中读取数据。
链接
- 演示
- 代码库
代码片段
以下代码展示了如何使用use钩子：
import { suspense } from "react";
export default function page() {
const messagePromise = fetchMessages();
return (
⌛ 等待消息...}>
);
}
关键点：
- 使用
-
messagePromise作为prop传递给
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) => (
{message.text}
));
}
use钩子用于从messagePromise中获取数据。
乐彼多用户商城系统LBMall(.net)
下载
乐彼多用户商城系统，采用ASP.NET分层技术和AJAX技术，运营于高速稳定的微软.NET+MSSQL 2005平台；完全具备搭建超大型网络购物多用户网上商城的整体技术框架和应用层次LBMall 秉承乐彼软件优秀品质，后台人性化设计，管理窗口识别客户端分辨率自动调整，独立配置的菜单操作锁，使管理操作简单便捷。待办事项1、新订单、支付、付款、短信提醒2、每5分钟自动读取3、新事项声音提醒 店铺管理1
use与await的区别：
await会阻塞渲染，直到Promise解析完成；而use允许组件在Promise解析后重新渲染，不会阻塞初始渲染。
Promise解析前后的组件状态：
结论
use和await在服务器端渲染(SSR)环境下行为相同，返回相同的HTML响应。但在客户端，await阻塞渲染，而use允许组件在Promise解析后更新。
