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中文網其他相關文章！