React 新 API 使用（承诺）

在这篇文章中，我将演示如何使用 use 从 Promise 中读取值。

链接

• 演示

• 代码库

片段

我们来看看下面的代码：

import { Suspense } from "react";

export default function Page() {
  const messagePromise = fetchMessages();

  return (
    <Suspense fallback={<p>⌛ waiting for messages...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

需要注意的几点：

• <悬念/>正在使用，它基本上显示回退，在这种情况下：⌛等待消息...，直到承诺得到解决。

• messagePromise 是作为 的 prop 传递的 Promise。

现在，让我们看一下 fetchMessages：

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

如您所见，这是一个非常简单的函数。在现实世界的示例中，这可能是一个获取请求，但为了简单起见，该函数仅返回一个数组。通过使用异步，JavaScript 自动知道该函数返回一个 Promise。

最后，我们来看看组件：

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

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

这就是有趣的地方。 <消息>组件接收 messagePromise 作为 prop，正如我们提到的，这是一个承诺。

通常，您会使用带有promise的await，但在React 19中，您现在可以使用use来获得基本相同的结果。

await 和 use 之间的一个关键区别是，await 会阻止渲染，直到承诺得到解决，而 use 不会阻止渲染。

这是在承诺解决之前组件的样子：

一旦承诺得到解决：

结论

use 的工作方式与 wait 类似，如果应用程序在使用 SSR 的服务器上运行，则结果完全相同：服务器在两种情况下都会返回相同的 HTML 响应。

但是，如果代码在客户端上运行，渲染行为会有所不同。 wait 会阻止渲染，直到 Promise 得到解决，而 use 则允许组件在 Promise 得到解决后重新渲染。

以上是React 新 API 使用（承诺）的详细内容。更多信息请关注PHP中文网其他相关文章！