Réagir 19

Nouvelles fonctionnalités dans React 19

Quoi de neuf dans REACT 19 ?

1. COMPILATEUR RÉAGIR

Quoi de neuf ?

• React optimise automatiquement les rendus sans intervention manuelle.

• Plus besoin de : useMemo(), useCallBack(), React.memo

Pourquoi le compilateur React ?

• L'optimisation manuelle était fastidieuse pour les développeurs.

• React gère désormais automatiquement les changements d'état et la logique de rendu.

Avantages

• React décide quoi restituer et quand.

• Réduit les efforts des développeurs.

• base de code plus propre et plus simple.

• alimente actuellement Instagram en production.

2. COMPOSANTS DU SERVEUR

Quoi de neuf ?

• composants qui s'exécutent sur le serveur et non sur le client.

• Précédemment lancé par Next.js (par défaut dans la V13).

• Dans React 19, les composants serveur sont intégrés nativement.

Avantages

• Optimisé pour le référencement : améliore l'optimisation des moteurs de recherche.

• Augmentation des performances : chargement des pages initiales plus rapide.

• Exécution côté serveur : gère efficacement les tâches telles que les appels d'API.

Comment utiliser les composants serveur ?

1. Côté client (par défaut) : tous les composants React s'exécutent côté client.

2. Côté serveur : ajoutez « utiliser le serveur » comme première ligne de votre composant :
   

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

Notes clés

• Les composants du serveur ne s'exécutent pas sur le client.

• Combinés aux actions, ils rationalisent les tâches telles que la gestion des formulaires et les requêtes API.

• Les utilisateurs de Next.js peuvent déjà exploiter les composants du serveur ; React 19 apporte cela directement à React.

3. ACTIONS

• Avant React19 : Gestion manuelle des états asynchrones.

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

• Après React19 : utilisation de useActionsState pour une gestion asynchrone propre.

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

• Gère automatiquement le chargement, les erreurs et les mises à jour d'état.

4. NOUVEAUX CROCHETS

USEACTIONSTATE : GESTION DES FORMULAIRES

Gère automatiquement l'état de soumission et la validation du formulaire.

• AVANT REACT19 :

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

• APRÈS REACT19 :

useActionState simplifie la soumission du formulaire.

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

USEFORMSTATUS : SUIVRE L'ÉTAT DU FORMULAIRE

Accédez aux états du formulaire comme en attente, succès ou erreur.

const status = useFormStatus();

<button type = "submit" disabled = { status.pending }>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

USEOPTIMISTIC : MISES À JOUR OPTIMISTES DE L'UI

Simplifie les mises à jour optimistes pour une meilleure UX.

• AVANT REACT19 :

Vous avez mis à jour l'interface utilisateur avec optimisme, ils ont géré les retours.

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

• APRÈS REACT19 :

useOptimistic le rend déclaratif.

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

5. LE CROCHET USE()

Qu'est-ce que l'utilisation() ?

Le hook use() simplifie la récupération de données asynchrones et la consommation de contexte en gérant directement les promesses.

• AVANT REACT19 : UTILISER USEEFFECT

Gestion manuelle des états asynchrones.

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

• APRÈS REACT19 : LE CROCHET USE()

Récupérez directement les données asynchrones et résolvez les promesses

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

Avantages :

• Pas besoin de useEffect ou useState.
• Code plus propre et plus déclaratif.
• Gère les promesses de manière transparente.

6. COMPOSANTS DU SERVEUR

Que sont les composants du serveur ?

Les composants du serveur s'affichent sur le serveur et envoient des résultats légers au client, améliorant ainsi les performances.

• AVANT REACT19 : CLIENT TRADITIONNEL - RENDU CÔTÉ

Vous deviez utiliser useEffect pour la récupération de données et SSR nécessitait des outils complexes.

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

• APRÈS REACT19 : SERVEUR - RENDU CÔTÉ

Les composants du serveur React s'intègrent de manière transparente.

const status = useFormStatus();

<button type = "submit" disabled = { status.pending }>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

Avantages :

• Chargement des pages plus rapide (pas de JS lourd côté client).
• Référencement amélioré et taille du bundle réduite.

7. CHARGEMENT AMÉLIORÉ DES ACTIFS

React19 améliore la façon dont les ressources telles que les images et les scripts se chargent en arrière-plan.

• AVANT REACT19 :

Vous aviez besoin de configurations manuelles.

function handleClick() {
 setItems([...items, newItem]);
 saveItem(newItem).catch(() => setItems(items)); // Revert on error
}

• APRÈS REACT19 : CHARGEMENT PARESSEUX NATIF

Les actifs se chargent désormais efficacement sans intervention.

const [optimisticItems, addOptimisticItem] = useOptimistic(items);

function handleClick() {
 addOptimisticItem(newItem);
}

Avantages :

• Temps de chargement plus rapides.
• Meilleure expérience utilisateur avec des délais réduits.

CONCLUSION

React 19 apporte :

• Gestion simplifiée de l'état asynchrone avec Actions.
• De nouveaux hooks comme useActionState,
• useFormStatus et UseOptimistic.
• hook use() pour une gestion facile des données asynchrones.
• Composants de serveur transparents pour de meilleures performances.
• Gestion des références plus propre et chargement amélioré des actifs.

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!