Comprendre React.memo pour l'optimisation des performances dans React

React.memo est un composant d'ordre supérieur (HOC) qui permet d'optimiser les performances des composants React en évitant les nouveaux rendus inutiles. Il est utilisé pour mémoriser les composants fonctionnels, ce qui signifie que React ignorera le rendu du composant si ses accessoires n'ont pas changé. Ceci est particulièrement utile pour l'optimisation des performances dans les grandes applications React où le nouveau rendu peut être coûteux.

Comment fonctionne React.memo

React.memo fonctionne en effectuant une comparaison superficielle des accessoires du composant. Si les accessoires sont les mêmes que ceux du rendu précédent, React ignorera le rendu du composant et utilisera à la place le résultat du rendu précédent. Cela peut réduire considérablement le nombre de nouveaux rendus et améliorer les performances, en particulier lors du rendu de listes volumineuses ou de composants coûteux.

Syntaxe

const MemoizedComponent = React.memo(Component);

Où :

• Le composant est le composant fonctionnel que vous souhaitez mémoriser.
• MemoizedComponent est la nouvelle version mémorisée du composant.

Exemple : utilisation de base de React.memo

Regardons un exemple simple de la façon dont React.memo peut être utilisé :

import React, { useState } from 'react';

const ChildComponent = React.memo(({ name }) => {
  console.log("Child component re-rendered");
  return <div>Hello, {name}!</div>;
});

function App() {
  const [name, setName] = useState('John');
  const [count, setCount] = useState(0);

  return (
    <div>
      <ChildComponent name={name} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default App;

Explication:

• ChildComponent est enveloppé dans React.memo. Il n'est restitué que lorsque le nom de l'accessoire change.
• App a deux éléments d'état : le nom et le compte. Cliquer sur le bouton « Incrémenter le nombre » ne modifie pas le nom de l'accessoire, donc le ChildComponent ne s'affiche pas à nouveau lorsque l'état du nombre est mis à jour.
• Si vous cliquez sur "Modifier le nom", l'accessoire de nom change, provoquant le nouveau rendu de ChildComponent.

Sortir:

• Lorsque vous cliquez sur le bouton "Incrémenter le nombre", le ChildComponent ne sera pas restitué, mais il enregistrera le "Composant enfant restitué" lorsque le nom de l'accessoire change.

Comparaison personnalisée avec React.memo

Par défaut, React.memo effectue une comparaison superficielle des accessoires, mais vous pouvez fournir une fonction de comparaison personnalisée si vous avez besoin de plus de contrôle sur la façon dont les accessoires sont comparés.

La fonction de comparaison personnalisée doit renvoyer true si le composant ne doit pas être restitué et false s'il le doit.

Exemple : fonction de comparaison personnalisée

const ChildComponent = React.memo(
  ({ name, age }) => {
    console.log("Child component re-rendered");
    return <div>Hello, {name}, {age}!</div>;
  },
  (prevProps, nextProps) => {
    // Custom comparison: only re-render if name changes
    return prevProps.name === nextProps.name;
  }
);

function App() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);

  return (
    <div>
      <ChildComponent name={name} age={age} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setAge(age + 1)}>Increment Age</button>
    </div>
  );
}

Dans cet exemple, le ChildComponent ne sera restitué que lorsque la prop de nom change, même si la prop d'âge change, grâce à la fonction de comparaison personnalisée.

Quand utiliser React.memo

• Optimisation des performances : Si vous disposez de composants fonctionnels qui reçoivent des accessoires et ne changent pas souvent, React.memo peut vous aider à éviter les rendus inutiles.
• Rendu de liste : Pour les grandes listes où seuls quelques éléments changent, React.memo peut être très utile. Par exemple, lors du rendu d'une liste d'éléments, la mémorisation de chaque composant d'élément de liste empêchera le rendu d'éléments inchangés.
• Composants coûteux : si un composant a une logique de rendu coûteuse (par exemple, des calculs complexes ou un rendu de données volumineuses), l'utilisation de React.memo peut améliorer les performances globales en évitant les recalculs inutiles.

Quand ne pas utiliser React.memo

• Petits composants : pour les petits composants avec peu d'accessoires, l'utilisation de React.memo peut ajouter une surcharge sans fournir une amélioration significative des performances.
• Changement fréquent des accessoires : Si un composant reçoit des accessoires qui changent fréquemment, React.memo peut ne pas offrir beaucoup d'avantages puisque le composant sera de toute façon restitué.
• Logique de comparaison complexe : une logique de comparaison personnalisée peut être plus coûteuse que de simplement permettre au composant de restituer normalement. Utilisez-le uniquement lorsque cela est nécessaire.

Conclusion

React.memo est un outil d'optimisation simple mais puissant dans React pour éviter les nouveaux rendus inutiles des composants fonctionnels. En mémorisant les composants et en utilisant une comparaison d'accessoires superficielle (ou une fonction de comparaison personnalisée), React peut ignorer le rendu de ces composants lorsque leurs accessoires n'ont pas changé, ce qui entraîne des améliorations de performances, en particulier dans les applications volumineuses ou complexes.

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!