Optimiser les performances avec useMemo Hook de React : mémoriser des calculs coûteux

utilisezMemo Hook dans React

Le hook useMemo est un hook React intégré qui permet d'optimiser les performances de votre application en mémorisant des calculs coûteux. Cela garantit que certains calculs ne sont réexécutés que lorsque leurs dépendances changent, plutôt qu'à chaque rendu. Cela peut être particulièrement utile pour éviter les recalculs inutiles des valeurs lors du nouveau rendu du composant.

---

Qu'est-ce que useMemo ?

useMemo est utilisé pour mémoriser le résultat d'un appel de fonction coûteux et le recalculer uniquement lorsqu'une de ses dépendances a changé. Cela peut améliorer les performances en évitant des recalculs coûteux à chaque rendu.

---

Syntaxe de useMemo

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• expensiveFunction(param1, param2) : La fonction qui effectue un calcul coûteux.
• memoizedValue : Le résultat de la coûteuseFonction, qui sera recalculé uniquement lorsque les dépendances changent.
• [param1, param2] : Le tableau de dépendances. La valeur mémorisée ne sera recalculée que si l'une de ces valeurs change.

---

Comment fonctionne useMemo

1. Mémoisation : Le hook useMemo stocke le résultat du calcul et renvoie le résultat stocké si les dépendances n'ont pas changé depuis le dernier rendu.
2. Recalcul : Si l'une des dépendances change, le calcul sera réexécuté et le nouveau résultat sera renvoyé.

---

Exemple d'utilisationMemo Hook

Considérons un exemple simple où nous avons un calcul lent :

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [toggle, setToggle] = useState(false);

  const calculateExpensiveValue = (num) => {
    console.log('Calculating expensive value...');
    return num * 2;
  };

  // Memoizing the expensive function result
  const memoizedValue = useMemo(() => calculateExpensiveValue(count), [count]);

  return (
    <div>
      <h2>Expensive Calculation: {memoizedValue}</h2>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

export default ExpensiveComponent;

• Explication :

  • useMemo est utilisé pour mémoriser le résultat de calculateExpensiveValue(count).
  • La fonction calculateExpensiveValue n'est réexécutée que lorsque le nombre change. Lorsque l'état de la bascule change, la valeur mémorisée n'est pas recalculée car la bascule ne fait pas partie du tableau de dépendances.

• Pourquoi utiliser useMemo ici ?

  • Sans useMemo, la fonction coûteuse calculateExpensiveValue serait appelée à chaque rendu, même lorsque l'état de la bascule change et n'affecte pas le calcul. L'utilisation de useMemo garantit que le calcul coûteux n'est effectué que lorsque cela est nécessaire.

---

Quand utiliser useMemo

Vous devez utiliser useMemo lorsque :

1. Calculs coûteux : Lorsque vous avez des fonctions ou des opérations coûteuses à exécuter et que vous souhaitez éviter de les recalculer à moins que cela ne soit absolument nécessaire (par exemple, trier un grand tableau ou des calculs complexes).

2. Éviter les rendus inutiles : la mémorisation des valeurs transmises aux composants enfants peut empêcher les rendus inutiles du composant enfant. Si la valeur mémorisée ne change pas, React peut ignorer le rendu du composant enfant.

3. Optimisation des performances : Si un élément de logique spécifique implique des calculs qui ne dépendent que de certains accessoires ou états, useMemo peut garantir que la fonction s'exécute uniquement lorsque ses dépendances changent, optimisant ainsi les performances.

---

Cas d'utilisation courants pour useMemo

1. Calculs coûteux

Par exemple, imaginez que vous restituez une liste d'éléments qui nécessitent un tri ou un filtrage, et que cette opération coûte cher.

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• Explication : Ici, l'opération de filtrage ne s'exécutera que lorsque le tableau de données change, évitant ainsi les nouveaux rendus ou calculs inutiles lorsque d'autres valeurs d'état changent.

1. Accessoires de composants de mémorisation pour enfants

Si vous avez un composant enfant qui accepte un accessoire résultant d'un calcul coûteux, vous pouvez mémoriser le calcul et transmettre le résultat comme accessoire.

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [toggle, setToggle] = useState(false);

  const calculateExpensiveValue = (num) => {
    console.log('Calculating expensive value...');
    return num * 2;
  };

  // Memoizing the expensive function result
  const memoizedValue = useMemo(() => calculateExpensiveValue(count), [count]);

  return (
    <div>
      <h2>Expensive Calculation: {memoizedValue}</h2>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

export default ExpensiveComponent;

1. Empêcher les recalculs sur les rendus inutiles

Si votre composant a plusieurs valeurs d'état mais qu'une seule affecte un calcul coûteux, vous pouvez utiliser useMemo pour éviter de recalculer cette valeur à moins que son état pertinent n'ait changé.

---

Différence entre useMemo et useCallback

Bien que useMemo et useCallback soient utilisés pour la mémorisation, leurs objectifs diffèrent :

• useMemo est utilisé pour mémoriser le résultat d'un calcul coûteux ou d'un appel de fonction.
• useCallback est utilisé pour mémoriser la fonction réelle elle-même afin d'empêcher la recréation de la fonction à chaque rendu.

Crochet Objectif Exemple d'utilisation ête>

Hook	Purpose	Example Usage
useMemo	Memoizes the result of a function call or calculation	Memoizing a computed value
useCallback	Memoizes the function itself	Preventing the creation of a new function on each render

useMemo Mémoire le résultat d'un appel de fonction ou d'un calcul Mémoriser une valeur calculée useCallback Mémoire la fonction elle-même Empêcher la création d'une nouvelle fonction à chaque rendu

---

Considérations relatives aux performances

• Évitez d'abuser de useMemo : bien que useMemo puisse optimiser les performances, cela a son propre coût car React doit garder une trace des dépendances et des valeurs mémorisées. Dans certains cas, l'utilisation de useMemo peut ne pas entraîner d'amélioration notable des performances, en particulier pour les calculs simples.
• Analyse comparative : Il est important de comparer vos composants avant et après l'utilisation de useMemo pour vous assurer qu'il améliore réellement les performances dans votre cas spécifique.

---

Exemple d'utilisationMémo avec tri

Voici un exemple d'utilisation de useMemo pour mémoriser une liste triée :

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• Explication :
  • Dans cet exemple, sortedItems est mémorisé à l'aide de useMemo. L'opération de tri n'est recalculée que lorsque le tableau items ou l'état sortOrder change.
  • Sans useMemo, le tri aurait lieu à chaque rendu, même si ni les éléments ni sortOrder ne changeaient.

---

Résumé d'utilisationMemo Hook

• useMemo est utilisé pour mémoriser des calculs coûteux et les recalculer uniquement lorsque les dépendances changent.
• Cela peut améliorer considérablement les performances en évitant les recalculs inutiles.
• useMemo doit être utilisé pour des calculs ou des calculs coûteux et qui ne doivent être recalculés que lorsque cela est nécessaire.

---

Conclusion

Le hook useMemo est un outil essentiel pour optimiser les performances dans les applications React. Il garantit que les calculs coûteux ne sont effectués que lorsque cela est nécessaire, ce qui rend vos composants plus efficaces. Cependant, il doit être utilisé de manière réfléchie, car une utilisation excessive peut entraîner une complexité inutile et une dégradation potentielle des performances.

---

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!