React 新 API 使用（承诺）

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《React 新 API 使用（承诺）》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

本文演示如何使用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>
  );
}

关键点：

• 使用<Suspense>组件，并在Promise解析前显示占位符“⌛ 等待消息...” 。
• messagePromise作为prop传递给<Message>组件。

fetchMessages函数：

async function fetchMessages() {
  return [
    { id: 1, text: "消息 1" },
    { id: 2, text: "消息 2" },
  ];
}

这是一个简单的函数，模拟从服务器获取数据。在实际应用中，这可能是一个网络请求。async关键字确保函数返回一个Promise。

<Message>组件：

function Message({ messagePromise }) {
  const messages = use(messagePromise);

  return messages.map((message) => (
    <p key={message.id}>{message.text}</p>
  ));
}

use钩子用于从messagePromise中获取数据。

use与await的区别：

await会阻塞渲染，直到Promise解析完成；而use允许组件在Promise解析后重新渲染，不会阻塞初始渲染。

Promise解析前后的组件状态：

结论

use和await在服务器端渲染(SSR)环境下行为相同，返回相同的HTML响应。但在客户端，await阻塞渲染，而use允许组件在Promise解析后更新。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《React 新 API 使用（承诺）》文章吧，也可关注golang学习网公众号了解相关技术文章。