Aide-mémoire pour la mémorisation de réaction

React fournit trois outils principaux de mémorisation afin d'optimiser les performances des composants en minimisant les nouveaux rendus et recalculs inutiles :

1. useMemo – Mémoriser les valeurs calculées

• Objectif : met en cache le résultat d'un calcul, en recalculant uniquement si les dépendances changent.

• Utilisation : à utiliser pour des calculs coûteux ou des données dérivées qui ne doivent être mises à jour qu'avec des dépendances spécifiques.
  

  const memoizedValue = useMemo(() => complexCalculation(), [dependencies]);
  
  

  Copier après la connexion

• Bonnes pratiques :

  • Incluez toutes les dépendances utilisées dans la fonction dans le tableau de dépendances.
  • Évitez de créer de nouvelles références (tableaux, objets) ou fonctions en ligne dans useMemo.
  • Remarque : N'utilisez pas useMemo pour les fonctions ; il met en cache les valeurs, pas les références de fonctions.

2. useCallback – Références des fonctions Memoize

• Objectif : met en cache une référence de fonction, empêchant la recréation à chaque rendu.

• Utilisation : à utiliser pour les références de fonctions stables, en particulier pour les rappels (par exemple, les gestionnaires d'événements) transmis aux composants enfants.
  

  const memoizedFunction = useCallback(() => { /* logic */ }, [dependencies]);
  
  

  Copier après la connexion

• Bonnes pratiques :

  • Incluez toutes les dépendances utilisées dans la fonction dans le tableau de dépendances pour éviter les valeurs obsolètes.
  • Évitez de déclarer des fonctions en ligne dans useCallback, car cela peut interrompre la mémorisation.
  • Remarque : utilisez useCallback pour les fonctions uniquement. Une mauvaise utilisation de useCallback pour les valeurs entraîne un code inefficace avec des appels de fonction inutiles.

3. React.memo – Mémorisez des composants entiers

• Objectif : empêche un nouveau rendu d'un composant fonctionnel si ses accessoires n'ont pas changé.

• Utilisation : à utiliser pour optimiser les composants enfants qui n'ont pas besoin d'être restitués lorsque le parent change.
  

  const MemoizedComponent = React.memo(ChildComponent);
  
  

  Copier après la connexion

• Bonnes pratiques :

  • À utiliser avec des composants recevant des accessoires stables ou des accessoires qui changent rarement.
  • Évitez les changements fréquents d'accessoires (comme les nouveaux objets/tableaux) pour maximiser l'efficacité de React.memo.
  • Remarque : Fonctionne bien avec les fonctions useCallbackmemoized pour maintenir les accessoires stables transmis aux composants enfants.

Points clés à retenir

• Utilisez useMemo pour les valeurs et useCallback pour les fonctions.
  • L'utilisation de useMemo pour les fonctions entraîne une exécution immédiate, et non une référence de fonction stable.
  • L'utilisation de useCallback pour les valeurs renvoie une fonction, ce qui conduit à un code inefficace avec des appels de fonction supplémentaires.
• Résumé de la mémorisation :
  • useMemo : met en cache les valeurs calculées (valeurs de retour des fonctions).
  • useCallback : met en cache les références de fonction (rappels).
  • React.memo : met en cache des composants entiers en fonction des accessoires pour empêcher les nouveaux rendus à partir des mises à jour parent.
• Utiliser sélectivement la mémorisation : la mémorisation améliore les performances lorsqu'elle est utilisée correctement, mais peut ajouter de la complexité en cas de surutilisation ou de mauvaise utilisation.

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!