Was ist neu in React 19?

Aktionen

Ein häufiger Anwendungsfall in React-Apps besteht darin, eine Datenmutation durchzuführen und dann als Reaktion den Status zu aktualisieren. Wenn ein Benutzer beispielsweise ein Formular zur Namensänderung sendet, stellen Sie eine API-Anfrage und verarbeiten dann die Antwort. In der Vergangenheit mussten Sie ausstehende Status, Fehler, optimistische Aktualisierungen und sequentielle Anfragen manuell bearbeiten.

Zum Beispiel könnten Sie den Status „Ausstehend“ und „Fehler“ in useState:
behandeln

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

In React 19 fügen wir Unterstützung für die Verwendung asynchroner Funktionen in Übergängen hinzu, um ausstehende Status, Fehler, Formulare und optimistische Aktualisierungen automatisch zu verarbeiten.

Zum Beispiel können Sie useTransition verwenden, um den ausstehenden Status für Sie zu verwalten:

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Der asynchrone Übergang setzt den Status „isPending“ sofort auf „true“, stellt die asynchrone(n) Anforderung(en) und schaltet „isPending“ nach allen Übergängen auf „false“. Dadurch können Sie die aktuelle Benutzeroberfläche reaktionsfähig und interaktiv halten, während sich die Daten ändern.

Notiz

Konventionell werden Funktionen, die asynchrone Übergänge verwenden, „Aktionen“ genannt.
Aktionen verwalten automatisch die Übermittlung von Daten für Sie:

Ausstehender Status: Aktionen stellen einen ausstehenden Status bereit, der zu Beginn einer Anfrage beginnt und automatisch zurückgesetzt wird, wenn die endgültige Statusaktualisierung festgeschrieben wird.
Optimistische Updates: Aktionen unterstützen den neuen useOptimistic-Hook, sodass Sie Benutzern sofortiges Feedback anzeigen können, während die Anfragen gesendet werden.
Fehlerbehandlung: Aktionen bieten Fehlerbehandlung, sodass Sie Fehlergrenzen anzeigen können, wenn eine Anfrage fehlschlägt, und optimistische Aktualisierungen automatisch auf ihren ursprünglichen Wert zurücksetzen können.
Formulare: Elemente unterstützen jetzt die Übergabe von Funktionen an die Action- und formAction-Requisiten. Bei der Übergabe von Funktionen an die Aktions-Requisiten werden standardmäßig Aktionen verwendet und das Formular nach der Übermittlung automatisch zurückgesetzt.

Aufbauend auf Actions führt React 19 useOptimistic ein, um optimistische Updates zu verwalten, und einen neuen Hook React.useActionState, um häufige Fälle für Actions zu verarbeiten. In React-Dom fügen wir

Aktionen zur automatischen Verwaltung von Formularen und Verwendung von FormStatus zur Unterstützung der allgemeinen Fälle für Aktionen in Formularen.

In React 19 kann das obige Beispiel wie folgt vereinfacht werden:

// Using <form> Actions and useActionState
function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

Im nächsten Abschnitt werden wir jede der neuen Aktionsfunktionen in React 19 aufschlüsseln.

Neuer Hook: useActionState

Um die häufigsten Fälle für Aktionen zu vereinfachen, haben wir einen neuen Hook namens useActionState:
hinzugefügt

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      // You can return any result of the action.
      // Here, we return only the error.
      return error;
    }

    // handle success
    return null;
  },
  null,
);

useActionState akzeptiert eine Funktion (die „Aktion“) und gibt eine umschlossene Aktion zum Aufrufen zurück. Das funktioniert, weil Aktionen komponieren. Wenn die umschlossene Aktion aufgerufen wird, gibt useActionState das letzte Ergebnis der Aktion als Daten und den ausstehenden Status der Aktion als ausstehend zurück.

Notiz

React.useActionState hieß in den Canary-Versionen zuvor ReactDOM.useFormState, aber wir haben es umbenannt und useFormState als veraltet markiert.

Weitere Informationen finden Sie unter #28491.
Weitere Informationen finden Sie in den Dokumenten zu useActionState.

DOM reagieren: Aktionen

Aktionen sind auch in das neue von React 19 integriert. Funktionen für React-Dom. Wir haben Unterstützung für die Übergabe von Funktionen als Aktions- und formAction-Requisiten von , und hinzugefügt. Elemente zum automatischen Senden von Formularen mit Aktionen:

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Wenn ein Die Aktion ist erfolgreich. React setzt das Formular automatisch für nicht kontrollierte Komponenten zurück. Wenn Sie das zurücksetzen müssen Manuell können Sie die neue requestFormReset React DOM API aufrufen.

Weitere Informationen finden Sie in den React-Dom-Dokumenten für , und

.

React DOM: Neuer Hook: useFormStatus

In Designsystemen ist es üblich, Designkomponenten zu schreiben, die Zugriff auf Informationen über das benötigen. Sie sind drin, ohne dass Stützen bis zum Bauteil gebohrt werden müssen. Dies kann über Context erfolgen, aber um den allgemeinen Fall zu vereinfachen, haben wir einen neuen Hook useFormStatus:
hinzugefügt

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

useFormStatus liest den Status des übergeordneten als ob das Formular ein Kontextanbieter wäre.

Weitere Informationen finden Sie in den React-Dom-Dokumenten für useFormStatus.

Neuer Hook: useOptimistic

Ein weiteres häufiges UI-Muster bei der Durchführung einer Datenmutation besteht darin, den Endzustand optimistisch anzuzeigen, während die asynchrone Anforderung ausgeführt wird. In React 19 fügen wir einen neuen Hook namens useOptimistic hinzu, um dies einfacher zu machen:

// Using <form> Actions and useActionState
function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

Der useOptimistic-Hook rendert den optimisticName sofort, während die updateName-Anfrage ausgeführt wird. Wenn das Update abgeschlossen ist oder ein Fehler auftritt, wechselt React automatisch zurück zum currentName-Wert.

Weitere Informationen finden Sie in den Dokumenten zu useOptimistic.

Neue API: verwenden

In React 19 führen wir eine neue API zum Lesen von Ressourcen beim Rendern ein: use.

Zum Beispiel können Sie ein Versprechen mit „use“ lesen und React wird anhalten, bis das Versprechen gelöst ist:

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      // You can return any result of the action.
      // Here, we return only the error.
      return error;
    }

    // handle success
    return null;
  },
  null,
);

Notiz

Die Verwendung unterstützt keine in Render erstellten Versprechen.
Wenn Sie versuchen, ein in render erstelltes Versprechen zur Verwendung zu übergeben, gibt React eine Warnung aus:

<form action={actionFunction}>

Um das Problem zu beheben, müssen Sie ein Versprechen aus einer Suspense-basierten Bibliothek oder einem Framework übergeben, das das Caching für Versprechen unterstützt. In Zukunft planen wir die Auslieferung von Funktionen, die das Zwischenspeichern von Versprechen beim Rendern erleichtern.

Sie können den Kontext auch mit der Verwendung lesen, sodass Sie den Kontext bedingt lesen können, z. B. nach vorzeitiger Rückkehr:

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Prerender-APIs warten, bis alle Daten geladen sind, bevor sie den statischen HTML-Stream zurückgeben. Streams können in Strings umgewandelt oder mit einer Streaming-Antwort gesendet werden. Sie unterstützen das Streamen von Inhalten beim Laden nicht, was

ist

React-Server-Komponenten

Serverkomponenten

Serverkomponenten sind eine neue Option, die das vorzeitige Rendern von Komponenten vor dem Bündeln in einer von Ihrer Clientanwendung oder Ihrem SSR-Server getrennten Umgebung ermöglicht. Diese separate Umgebung ist der „Server“ in React Server Components. Serverkomponenten können einmal zur Erstellungszeit auf Ihrem CI-Server oder für jede Anforderung über einen Webserver ausgeführt werden.

React 19 enthält alle Funktionen der React Server Components, die im Canary-Kanal enthalten sind. Dies bedeutet, dass Bibliotheken, die mit Serverkomponenten ausgeliefert werden, jetzt React 19 als Peer-Abhängigkeit mit einer React-Server-Exportbedingung zur Verwendung in Frameworks verwenden können, die die Full-Stack-React-Architektur unterstützen.

Das obige ist der detaillierte Inhalt vonWas ist neu in React 19?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!