Dites adieu aux rendus inutiles avec React Memo : didacticiel étape par étape

React Memo : améliorer les performances de React avec une mémorisation simple

Introduction

Les applications React traitent souvent de grands ensembles de données et des composants complexes, où les rendus inutiles peuvent avoir un impact significatif sur les performances. Pour résoudre ce problème, React propose React.memo, un outil simple mais puissant pour optimiser les composants et réduire les temps de rendu. Dans ce guide, nous explorerons le fonctionnement de React Memo, pourquoi il est utile et comment le mettre en œuvre étape par étape.

---

Qu'est-ce que React Mémo ?

React.memo est un composant d'ordre supérieur (HOC) dans React qui aide à mémoriser les composants fonctionnels. La mémorisation est le processus de mise en cache de la sortie d'une fonction en fonction de ses entrées, de sorte que la fonction n'a pas besoin de recalculer le résultat pour les mêmes entrées. React Memo fonctionne de la même manière : il « se souvient » de la dernière sortie rendue d'un composant et ne la restitue que lorsque ses accessoires changent.

Pourquoi React Mémo ?

Dans React, les composants sont restitués chaque fois que leurs composants parents sont restitués. Cela peut entraîner des inefficacités si la sortie d'un composant ne dépend pas des modifications apportées à son parent. Par exemple, dans les interfaces utilisateur complexes comportant de nombreux composants, vous pourriez constater un décalage dû à des rendus excessifs. L'utilisation de React Memo peut optimiser cela en mettant à jour les composants uniquement lorsque cela est nécessaire.

---

Problèmes que React Memo résout

1. Re-rendus inutiles

Lorsqu'un composant parent est restitué, ses composants enfants sont également restitués. Cela peut entraîner des goulots d'étranglement en termes de performances, en particulier lorsque les composants affichent des données statiques ou s'appuient sur des accessoires immuables.

2. Performances lentes ou lentes dans les interfaces utilisateur complexes

Les applications avec des composants profondément imbriqués peuvent être confrontées à des performances lentes en raison des rendus cumulatifs. La mémorisation, avec React Memo, permet d'éviter les nouveaux rendus de composants qui ne nécessitent pas de mises à jour, améliorant ainsi la réactivité de l'application.

---

Comment fonctionne React Memo : exemple étape par étape

Passons en revue une implémentation de base de React Memo. Nous commencerons par un composant simple qui n'utilise pas la mémorisation et verrons comment l'ajout de React Memo fait la différence.

Étape 1 : configurer un composant de compteur simple sans mémo React

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

Explication

Dans cet exemple, chaque fois que vous tapez dans le champ de saisie, le composant Counter s'affiche à nouveau, même si la valeur de comptage reste la même. Il s'agit d'un nouveau rendu inutile que nous pouvons éviter avec React Memo.

Étape 2 : Optimisation avec React Memo

Maintenant, enveloppons le composant Counter avec React.memo pour l'optimiser.

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

Explication

Avec React.memo, le composant Counter n'est restitué que si son accessoire de comptage change. Désormais, la saisie dans le champ de saisie ne déclenche plus un nouveau rendu de Counter, optimisant considérablement les performances.

---

React Memo en action : un scénario pratique avec des listes

Plongeons dans un exemple plus complexe pour voir les réels avantages de React Memo. Supposons que nous ayons une liste d'éléments avec un bouton « J'aime » à côté de chaque élément. Nous montrerons comment React Memo peut empêcher les rendus excessifs lorsque vous aimez des éléments individuels.

Étape 1 : créer le composant de liste sans mémo

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

Problème

Dans le code ci-dessus, lorsque vous aimez un élément, tous les éléments s'affichent à nouveau, même si les likes d'un seul élément changent.

Étape 2 : optimiser le composant d'article avec React Memo

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    <div>
      <h2>{item.name}</h2>
      <button onClick={() => onLike(item.id)}>Like</button>
    </div>
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes + 1 } : item
      )
    );
  };

  return (
    <div>
      {items.map((item) => (
        <Item key={item.id} item={item} onLike={handleLike} />
      ))}
    </div>
  );
}

export default ItemList;

Résultat

Désormais, seul l'élément sur lequel vous cliquez pour aimer sera restitué, ce qui rendra l'interface utilisateur beaucoup plus rapide et plus efficace.

---

Quand utiliser React Memo ?

React Memo est utile dans des scénarios spécifiques, mais son utilisation partout peut compliquer votre code sans apporter de réel avantage. Voici quelques situations clés où cela peut être particulièrement efficace :

1. Composants statiques : composants qui ne changent pas souvent, comme les en-têtes ou les pieds de page.
2. Composants fonctionnels purs : composants qui dépendent uniquement des accessoires pour le rendu.
3. Grandes listes de composants : listes contenant de nombreux éléments qui doivent éviter de nouveaux rendus inutiles.

---

Pièges potentiels et meilleures pratiques

1. Comparaison superficielle : React Memo effectue une comparaison superficielle, ce qui signifie qu'il ne détectera pas les changements dans les objets ou les tableaux profondément imbriqués. Pensez à utiliser useMemo ou useCallback si vous transmettez des accessoires complexes.

2. Surveillance des performances : utilisez React DevTools pour identifier les composants qui bénéficient réellement de la mémorisation. Une utilisation excessive de React Memo peut entraîner une complexité du code avec des gains de performances négligeables.

---

Foire aux questions (FAQ)

Q1 : En quoi React Memo est-il différent de useMemo et useCallback ?

• React Memo optimise les rendus de composants en fonction des accessoires.
• useMemo met en cache les valeurs calculées dans un composant.
• useCallback met en cache les fonctions, les empêchant d'être recréées à chaque rendu.

Q2 : Puis-je utiliser React Memo avec des composants de classe ?

Non, React Memo est uniquement destiné aux composants fonctionnels. Cependant, pour les composants de classe, un comportement similaire peut être obtenu avec PureComponent.

---

Conclusion

React Memo est un outil précieux pour réduire les rendus inutiles et améliorer les performances des applications React. En l'utilisant de manière sélective sur des composants fonctionnels purs ou des éléments statiques de l'interface utilisateur, vous pouvez optimiser votre application React sans compliquer sa structure. Suivez ces étapes, essayez les exemples et continuez à expérimenter pour trouver les meilleures stratégies de mémorisation pour votre projet !

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!