Utilisation de la nouvelle API React (promesse)

Dans cet article, je vais vous montrer comment lire une valeur à partir d'une promesse à l'aide de use.

Links

• Démo

• Base de code

Fragment

Vérifions le code suivant :

import { Suspense } from "react";

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

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

Quelques points à noter :

• est utilisé, ce qui affiche essentiellement la solution de secours, dans ce cas : ⌛ en attente de messages..., jusqu'à ce que la promesse soit résolue.

• messagePromise est une promesse transmise comme accessoire à .

Maintenant, jetons un œil à fetchMessages :

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

Comme vous pouvez le voir, c’est une fonction très simple. Dans un exemple réel, il pourrait s'agir d'une requête d'extraction, mais pour des raisons de simplicité, la fonction renvoie simplement un tableau. En utilisant async, JavaScript sait automatiquement que la fonction renvoie une promesse.

Enfin, regardons le composant :

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

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

C’est là que ça devient intéressant. Le Le composant reçoit messagePromise comme accessoire, ce qui, comme nous l'avons mentionné, est une promesse.

Habituellement, vous utiliseriez wait avec une promesse, mais dans React 19, vous pouvez désormais utiliser use pour obtenir essentiellement le même résultat.

Une différence clé entre wait et use est que wait bloque le rendu jusqu'à ce que la promesse soit résolue, alors que use ne bloque pas le rendu.

Voici à quoi ressemble le composant avant que la promesse ne soit résolue :

Et une fois la promesse résolue :

Conclusion

use fonctionne de la même manière que wait, et si l'application s'exécute sur un serveur utilisant SSR, le résultat est exactement le même : le serveur renverra la même réponse HTML dans les deux cas.

Cependant, si le code s'exécute sur le client, le rendu se comporte un peu différemment. wait bloque le rendu jusqu'à ce que la promesse soit résolue, tandis que use permet au composant de restituer une fois la promesse résolue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!