Version React Stable : Quoi de neuf et comment mettre à niveau

React 19 est officiellement stable et désormais disponible sur npm ! Doté de fonctionnalités et d'améliorations, il est conçu pour rationaliser le développement, améliorer les performances et simplifier la gestion des modèles d'interface utilisateur courants. Voici un aperçu complet des nouveautés de React 19 et de la manière dont vous pouvez adopter ces fonctionnalités dans vos projets.

Ajouts clés dans React 19

1. Actions et transitions asynchrones

Les actions simplifient la gestion des opérations asynchrones telles que les mutations de données, les états en attente, la gestion des erreurs et les mises à jour optimistes. En utilisant useTransition ou le nouveau hook useActionState, vous pouvez :

Gérer automatiquement les états en attente.

Fournir une meilleure gestion des erreurs.

Gérez les soumissions de formulaires avec des éléments

à l'aide des accessoires action ou formAction.

Exemple : Formulaire simplifié avec 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>
  );
}

1. Mises à jour optimistes avec useOptimistic

Le nouveau hook useOptimistic vous permet de fournir des commentaires immédiats aux utilisateurs en attendant des réponses asynchrones.

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <input type="text" name="name" />
    </form>
  );
}

1. utiliser l'API

L'API d'utilisation permet le rendu conditionnel des promesses et des contextes, permettant des conceptions de composants plus flexibles.

import { use } from 'react';
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

1. Gestion native des métadonnées

React 19 prend en charge le rendu

, et les balises directement dans les composants, les hissant automatiquement dans la section.

function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="author" content="Author Name" />
    </article>
  );
}

1. Gestion améliorée des feuilles de style et des scripts

React 19 introduit la prise en charge intégrée de :

Feuilles de style avec priorité contrôlée à l'aide de .

Scripts asynchrones rendus dans l'arborescence des composants, garantissant la déduplication et l'ordre d'exécution correct.

<link rel="stylesheet" href="styles.css" precedence="default" />
<script async src="script.js"></script>

1. Composants et actions du serveur

Les composants du serveur React sont désormais stables, permettant le rendu des composants à l'avance. Associés aux actions serveur (activées par la directive "use server"), les composants clients peuvent appeler des fonctions asynchrones côté serveur de manière transparente.

1. Gestion améliorée des erreurs

React 19 consolide les rapports d'erreurs, fournissant des messages d'erreur concis et exploitables. Les développeurs peuvent désormais utiliser onCaughtError, onUncaughtError et onRecoverableError pour une gestion granulaire des erreurs.

1. Réf comme accessoire

Les composants de fonction peuvent désormais accepter ref comme accessoire, simplifiant le code en supprimant le besoin de forwardRef.

1. Hydratation et intégration tierce

React 19 améliore l'hydratation en gérant avec élégance les éléments inattendus insérés par des extensions de navigateur ou des scripts tiers.

1. Ressources de préchargement

Optimisez les performances grâce aux API de préchargement des ressources, telles que preload et preinit :

import { preload, preinit } from 'react-dom';
preinit('script.js', { as: 'script' });
preload('font.woff', { as: 'font' });

Comment mettre à niveau

Suivez le guide de mise à niveau de React 19 (https://react.dev/blog/2024/12/05/react-19) pour obtenir des instructions étape par étape. Les considérations clés incluent :

Modifications révolutionnaires (documentées dans le guide).

Test de compatibilité de votre application.

Mise à jour des dépendances qui utilisent React comme dépendance homologue.

Commencez aujourd'hui

Mettez à niveau votre projet vers React 19 via npm :

npm install réagir@19 réagir-dom@19

Explorez la documentation officielle de React 19 (https://react.dev/blog/2024/12/05/react-19) pour un aperçu plus approfondi de ces nouvelles fonctionnalités et bonnes pratiques.

React 19 représente un pas en avant, offrant aux développeurs des outils puissants pour créer des applications dynamiques, performantes et accessibles. Commencez à explorer dès aujourd’hui !

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!