Maison interface Web js tutoriel Réagir : useCallback vs useMemo

Réagir : useCallback vs useMemo

Aug 26, 2024 pm 09:30 PM

React : 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]
   );
Copier après la connexion

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>;
});
Copier après la connexion

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>
  );
};
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

8 Superbes plugins de mise en page JQuery Page

10 Highlighters de syntaxe jQuery 10 Highlighters de syntaxe jQuery Mar 02, 2025 am 12:32 AM

10 Highlighters de syntaxe jQuery

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Qu'est-ce que & # x27; ceci & # x27; en javascript?

10 tutoriels JavaScript & jQuery MVC 10 tutoriels JavaScript & jQuery MVC Mar 02, 2025 am 01:16 AM

10 tutoriels JavaScript & jQuery MVC

See all articles