React Memo

React.memoest un composant d'ordre supérieur (HOC) utilisé pour optimiser les performances des composants fonctionnels. Il améliore les performances en mémorisant la sortie de rendu du composant et en évitant les re-rendus lorsque les props du composant n'ont pas changé. Ce qui suit estReact.memol'introduction détaillée et les méthodes d'utilisation.

1. Utilisation de base

React.memoL'utilisation de base consiste à passer un composant fonction comme argument àReact.memoet retourne un composant mémoïsé.

Exemple

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = React.memo((props) => {
  console.log('Rendering MyComponent');
  return <div>{props.text}</div>;
});

const App = () => {
  const [count, setCount] = React.useState(0);
  const [text, setText] = React.useState('Hello, world!');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Incrémenter le compteur</button>
      <MyComponent text={text} />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Dans cet exemple, même sicountl'état change,MyComponentil ne sera pas re-rendu, car sonpropsn'a pas changé.

2. Utilisation d'une fonction de comparaison personnalisée

Par défaut,React.memone compare que les précédentes et les suivantesprops, et s'il n'y a aucun changement, il ne sera pas re-rendu. Vous pouvez contrôler plus précisément la logique de re-rendu en passant une fonction de comparaison personnalisée.

Signature de la fonction de comparaison personnalisée :

function areEqual(prevProps, nextProps) {
  // 返回 true 表示相等，不需要重新渲染
  // 返回 false 表示不相等，需要重新渲染
}

Exemple

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = React.memo((props) => {
  console.log('Rendering MyComponent');
  return <div>{props.text}</div>;
}, (prevProps, nextProps) => {
  return prevProps.text === nextProps.text;
});

const App = () => {
  const [count, setCount] = React.useState(0);
  const [text, setText] = React.useState('Hello, world!');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Incrémenter le compteur</button>
      <MyComponent text={text} />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Dans cet exemple, la fonction de comparaison personnalisée vérifietexts'il a changé. Sitextn'a pas changé,MyComponentil ne se re-rendra pas.

3. Scénarios d'application pratiques

React.memoIl est très adapté aux scénarios suivants :

  • Affichage de données statiques: les props reçues par le composantpropschangent rarement, mais le composant lui-même est relativement complexe, et le re-rendu est coûteux.
  • Optimisation des performances: Dans les grandes listes ou tableaux, chaque élément est un composant indépendant, l'utilisation deReact.memopeut éviter des re-rendus inutiles.
  • Éviter les vérifications d'égalité profonde: la fonction de comparaison personnalisée peut éviter les vérifications d'égalité profonde, surtout lorsquepropscontient une grande quantité de données.

4. Remarques

  • Comparaison superficielle: Par défaut,React.memoeffectue une comparaison superficielle, ce qui signifie qu'il ne compare quepropsle contenu de premier niveau. Les objets imbriqués nécessitent une fonction de comparaison personnalisée.
  • État et contexte：React.memose concentre uniquement surpropschangements. Les changements dans l'état interne et le contexte du composant ne déclencheront pas de re-rendu.

5. AvecuseMemoetuseCallbackla différence

  • React.memo: utilisé pour mémoriser l'ensemble du composant et optimiser le rendu du composant.
  • useMemo: utilisé pour mémoriser des valeurs ou des résultats calculés à l'intérieur des composants fonctionnels.
  • useCallback: utilisé pour mémoriser des fonctions de rappel à l'intérieur des composants fonctionnels afin d'éviter une recréation inutile.

Exemple

import React, { useState, useMemo, useCallback } from 'react';
import ReactDOM from 'react-dom';

const ChildComponent = React.memo(({ onClick, count }) => {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Count: {count}</button>;
});

const App = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const doubledCount = useMemo(() => count * 2, [count]);

  return (
    <div>
      <p>Compteur doublé: {doubledCount}</p>
      <ChildComponent onClick={increment} count={count} />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Dans cet exemple,useCallbacketuseMemoest utilisé pour optimiser les fonctions et les résultats calculés,React.memoest utilisé pour optimiser le rendu des composants enfants.

Résumé

React.memoest un outil puissant qui peut efficacement améliorer les performances des composants fonctionnels et éviter les re-rendus inutiles. En utilisantReact.memoet des fonctions de comparaison personnalisées, vous pouvez considérablement optimiser les performances de l'application sans affecter la logique de l'application.

Autres extensions