Réagir : useCallback vs useMemo

Ce sont deux hooks d'optimisation dans React, mais ils servent des objectifs légèrement différents.

Décomposons-le :

1. Objectif :

• useCallback est utilisé pour mémoriser des fonctions.
• useMemo est utilisé pour mémoriser des valeurs.

2. Ce qu'ils retournent :

• useCallback renvoie une fonction de rappel mémorisée.
• useMemo renvoie une valeur mémorisée de n'importe quel type.

3. Cas d'utilisation :

• useCallback est généralement utilisé lors de la transmission de rappels à des composants enfants optimisés qui s'appuient sur l'égalité des références pour éviter les rendus inutiles.
• useMemo est utilisé pour éviter des calculs coûteux à chaque rendu.

4. Syntaxe :

   const memoizedCallback = useCallback(
     () => {
       doSomething(a, b);
     },
     [a, b],
   );

   const memoizedValue = useMemo(
     () => computeExpensiveValue(a, b),
     [a, b]
   );

5. Implications sur les performances :

• useCallback peut aider à éviter les rendus inutiles des composants enfants qui reçoivent le rappel en tant qu'accessoire.
• useMemo peut aider à éviter des recalculs coûteux lorsque les dépendances n'ont pas changé.

Regardons quelques exemples pour illustrer les différences :

Exemple d'utilisation de useCallback :

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

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

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

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Increment</button>;
});

Dans cet exemple, useCallback est utilisé pour mémoriser la fonction handleClick. Ceci est utile car ChildComponent est enveloppé dans React.memo, ce qui signifie qu'il ne sera restitué que si ses accessoires changent. En utilisant useCallback, nous garantissons que handleClick conserve la même référence entre les rendus (sauf si le nombre change), évitant ainsi les nouveaux rendus inutiles de ChildComponent.

Exemple d'utilisation de useMemo :

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

const ExpensiveComponent = ({ list }) => {
  const sortedList = useMemo(() => {
    console.log('Sorting list');
    return [...list].sort((a, b) => a - b);
  }, [list]);

  return (
    <div>
      <h2>Sorted List:</h2>
      {sortedList.map(item => <div key={item}>{item}</div>)}
    </div>
  );
};

const ParentComponent = () => {
  const [list] = useState([3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]);
  const [count, setCount] = useState(0);

  return (
    <div>
      <ExpensiveComponent list={list} />
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  );
};

Dans cet exemple, useMemo est utilisé pour mémoriser la liste triée. L'opération de tri coûteuse ne sera effectuée que lorsque la prop de liste change, et non à chaque rendu de ExpensiveComponent. Ceci est particulièrement utile ici car ParentComponent peut effectuer un nouveau rendu pour des raisons sans rapport avec la liste (comme lorsque le nombre change), et nous ne voulons pas re-trier la liste inutilement.

Principaux points à retenir :

1. Utilisez useCallback lorsque vous souhaitez éviter les rendus inutiles de composants enfants qui dépendent des références de fonction.
2. Utilisez useMemo lorsque vous souhaitez éviter des recalculs coûteux de valeurs.
3. Les deux hooks aident à optimiser les performances, mais ils doivent être utilisés judicieusement. Une utilisation excessive peut entraîner une complexité accrue sans gains de performances significatifs.
4. Le tableau de dépendances dans les deux hooks est crucial. La valeur/fonction mémorisée ne sera mise à jour que si l'une des dépendances change.

suivez pour plus de contenu comme celui-ci !

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!