Quoi de neuf dans React 19

Actes

Un cas d'utilisation courant dans les applications React consiste à effectuer une mutation de données, puis à mettre à jour l'état en réponse. Par exemple, lorsqu'un utilisateur soumet un formulaire pour modifier son nom, vous effectuerez une requête API, puis gérerez la réponse. Dans le passé, vous deviez gérer manuellement les états en attente, les erreurs, les mises à jour optimistes et les demandes séquentielles.

Par exemple, vous pouvez gérer l'état d'attente et d'erreur dans useState :

// 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>
  );
}

Dans React 19, nous ajoutons la prise en charge de l'utilisation de fonctions asynchrones dans les transitions pour gérer automatiquement les états en attente, les erreurs, les formulaires et les mises à jour optimistes.

Par exemple, vous pouvez utiliser useTransition pour gérer l'état en attente pour vous :

// 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>
  );
}

La transition asynchrone définira immédiatement l'état isPending sur true, effectuera la ou les requêtes asynchrones et fera passer isPending à false après toute transition. Cela vous permet de garder l'interface utilisateur actuelle réactive et interactive pendant que les données changent.

Note

Par convention, les fonctions qui utilisent des transitions asynchrones sont appelées « Actions ».
Les actions gèrent automatiquement la soumission des données pour vous :

État en attente : les actions fournissent un état en attente qui démarre au début d'une requête et se réinitialise automatiquement lorsque la mise à jour de l'état final est validée.
Mises à jour optimistes : les actions prennent en charge le nouveau hook useOptimistic afin que vous puissiez afficher des commentaires instantanés aux utilisateurs pendant la soumission des demandes.
Gestion des erreurs : les actions assurent la gestion des erreurs afin que vous puissiez afficher les limites d'erreur lorsqu'une demande échoue et rétablir automatiquement les mises à jour optimistes à leur valeur d'origine.
Formulaires : Les éléments prennent désormais en charge la transmission de fonctions aux accessoires action et formAction. La transmission de fonctions aux accessoires d'action utilise les actions par défaut et réinitialise automatiquement le formulaire après la soumission.

S'appuyant sur les actions, React 19 introduit useOptimistic pour gérer les mises à jour optimistes, et un nouveau hook React.useActionState pour gérer les cas courants pour les actions. Dans React-dom, nous ajoutons

Actions pour gérer automatiquement les formulaires et utiliserFormStatus pour prendre en charge les cas courants d'actions dans les formulaires.

Dans React 19, l'exemple ci-dessus peut être simplifié en :

// 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>
  );
}

Dans la section suivante, nous détaillerons chacune des nouvelles fonctionnalités d'action de React 19.

Nouveau crochet : useActionState

Pour faciliter les cas courants pour les actions, nous avons ajouté un nouveau hook appelé useActionState :

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 accepte une fonction (l'"Action") et renvoie une action encapsulée à appeler. Cela fonctionne parce que les actions composent. Lorsque l'action encapsulée est appelée, useActionState renverra le dernier résultat de l'action sous forme de données et l'état en attente de l'action comme en attente.

Note

React.useActionState s'appelait auparavant ReactDOM.useFormState dans les versions Canary, mais nous l'avons renommé et obsolète useFormState.

Voir #28491 pour plus d'informations.
Pour plus d'informations, consultez la documentation pour useActionState.

Réagissez DOM : Actes

Les actions sont également intégrées au nouveau fonctionnalités pour réagir-dom. Nous avons ajouté la prise en charge du passage de fonctions en tant qu'accessoires action et formAction de , et éléments pour soumettre automatiquement des formulaires avec des actions :

// 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>
  );
}

Lorsqu'un L'action réussit, React réinitialisera automatiquement le formulaire pour les composants non contrôlés. Si vous devez réinitialiser le manuellement, vous pouvez appeler la nouvelle API DOM requestFormReset React.

Pour plus d'informations, consultez la documentation de React-dom pour , et

.

React DOM : nouveau hook : useFormStatus

Dans les systèmes de conception, il est courant d'écrire des composants de conception qui doivent accéder aux informations sur le ils sont dedans, sans percer d'accessoires jusqu'au composant. Cela peut être fait via Context, mais pour faciliter le cas courant, nous avons ajouté un nouveau hook useFormStatus :

// 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 lit le statut du comme si le formulaire était un fournisseur de contexte.

Pour plus d'informations, consultez la documentation de React-Dom pour useFormStatus.

Nouveau crochet : useOptimistic

Un autre modèle d'interface utilisateur courant lors de l'exécution d'une mutation de données consiste à afficher l'état final de manière optimiste pendant que la requête asynchrone est en cours. Dans React 19, nous ajoutons un nouveau hook appelé useOptimistic pour rendre cela plus facile :

// 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>
  );
}

Le hook useOptimistic restituera immédiatement le optimisticName pendant que la demande updateName est en cours. Une fois la mise à jour terminée ou des erreurs, React reviendra automatiquement à la valeur currentName.

Pour plus d'informations, consultez la documentation d'utilisationOptimistic.

Nouvelle API : utilisation

Dans React 19, nous introduisons une nouvelle API pour lire les ressources dans le rendu : use.

Par exemple, vous pouvez lire une promesse avec utilisation, et React sera suspendu jusqu'à ce que la promesse soit résolue :

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,
);

Note

l'utilisation ne prend pas en charge les promesses créées lors du rendu.
Si vous essayez de transmettre une promesse créée dans le rendu à utiliser, React vous avertira :

<form action={actionFunction}>

Pour résoudre ce problème, vous devez transmettre une promesse à partir d'une bibliothèque ou d'un framework alimenté par suspense qui prend en charge la mise en cache des promesses. À l'avenir, nous prévoyons de proposer des fonctionnalités pour faciliter la mise en cache des promesses dans le rendu.

Vous pouvez également lire le contexte avec utilisation, vous permettant de lire le contexte de manière conditionnelle, par exemple après des retours anticipés :

// 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>
  );
}

Les API Prerender attendront que toutes les données soient chargées avant de renvoyer le flux HTML statique. Les flux peuvent être convertis en chaînes ou envoyés avec une réponse en streaming. Ils ne prennent pas en charge le contenu en streaming lors de son chargement, ce qui est

Composants du serveur React

Composants du serveur

Les composants serveur sont une nouvelle option qui permet de restituer les composants à l'avance, avant le regroupement, dans un environnement distinct de votre application client ou de votre serveur SSR. Cet environnement distinct est le « serveur » dans les composants React Server. Les composants serveur peuvent être exécutés une fois au moment de la construction sur votre serveur CI, ou ils peuvent être exécutés pour chaque requête à l'aide d'un serveur Web.

React 19 inclut toutes les fonctionnalités des composants React Server incluses dans le canal Canary. Cela signifie que les bibliothèques fournies avec les composants serveur peuvent désormais cibler React 19 en tant que dépendance homologue avec une condition d'exportation de serveur de réaction pour une utilisation dans les frameworks prenant en charge l'architecture React Full-stack.

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!