React New 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>
  );
}

注意すべき点がいくつかあります:

• <サスペンス />が使用されており、基本的にフォールバックが表示されます。この場合: ⌛ メッセージを待っています...、Promise が解決されるまで。

• messagePromise は、小道具として に渡される Promise です。

それでは、fetchMessages を見てみましょう:

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

ご覧のとおり、非常に単純な関数です。実際の例では、これはフェッチ要求になる可能性がありますが、簡単にするために、関数は単に配列を返します。 async を使用すると、JavaScript は関数が Promise を返すことを自動的に認識します。

最後に、<メッセージ> を確認してみましょう。コンポーネント:

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

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

ここが興味深いところです。 コンポーネントは、prop として messagePromise を受け取ります。前述したように、これは Promise です。

通常、Promise とともに await を使用しますが、React 19 では use を使用して基本的に同じ結果を達成できるようになりました。

await と use の主な違いの 1 つは、await は Promise が解決されるまでレンダリングをブロックするのに対し、use はレンダリングをブロックしないことです。

Promise が解決される前のコンポーネントの外観は次のとおりです。

そして約束が解決されると:

結論

use は await と同様に機能し、アプリケーションが SSR を使用するサーバー上で実行されている場合、結果はまったく同じになります。サーバーはどちらの場合でも同じ HTML 応答を返します。

ただし、コードがクライアント上で実行される場合、レンダリングの動作は少し異なります。 await は、Promise が解決されるまでレンダリングをブロックしますが、 use を使用すると、Promise が解決された後にコンポーネントを再レンダリングできます。

以上がReact New APIの使用(お約束)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。