React Neue API-Nutzung (Versprechen)

In diesem Beitrag werde ich demonstrieren, wie man mithilfe von use einen Wert aus einem Versprechen liest.

Links

• Demo

• Codebasis

Ausschnitt

Schauen wir uns den folgenden Code an:

import { Suspense } from "react";

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

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

Ein paar Dinge zu beachten:

• wird verwendet, was grundsätzlich den Fallback anzeigt, in diesem Fall: ⌛ Warten auf Nachrichten..., bis das Versprechen gelöst ist.

• messagePromise ist ein Versprechen, das als Requisite an weitergegeben wird.

Werfen wir nun einen Blick auf fetchMessages:

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

Wie Sie sehen, handelt es sich um eine sehr einfache Funktion. In einem realen Beispiel könnte dies eine Abrufanforderung sein, aber der Einfachheit halber gibt die Funktion nur ein Array zurück. Durch die Verwendung von Async erkennt JavaScript automatisch, dass die Funktion ein Versprechen zurückgibt.

Schauen wir uns abschließend die Komponente:

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

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

Hier wird es interessant. Die Die Komponente empfängt messagePromise als Requisite, was, wie bereits erwähnt, ein Versprechen ist.

Normalerweise würden Sie „await“ mit einem Versprechen verwenden, aber in React 19 können Sie jetzt „use“ verwenden, um im Grunde das gleiche Ergebnis zu erzielen.

Ein wesentlicher Unterschied zwischen „await“ und „use“ besteht darin, dass „await“ das Rendern blockiert, bis das Versprechen aufgelöst ist, wohingegen „use“ das Rendern nicht blockiert.

So sieht die Komponente aus, bevor das Versprechen gelöst wird:

Und sobald das Versprechen gelöst ist:

Abschluss

Use funktioniert ähnlich wie Wait, und wenn die Anwendung auf einem Server mit SSR ausgeführt wird, ist das Ergebnis genau das gleiche: Der Server gibt in beiden Fällen dieselbe HTML-Antwort zurück.

Wenn der Code jedoch auf dem Client ausgeführt wird, verhält sich das Rendering etwas anders. „wait“ blockiert das Rendern, bis das Versprechen aufgelöst ist, während „use“ es der Komponente ermöglicht, erneut zu rendern, sobald das Versprechen aufgelöst ist.

Das obige ist der detaillierte Inhalt vonReact Neue API-Nutzung (Versprechen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!