Reagieren: useCallback vs. useMemo

Dies sind beides Optimierungs-Hooks in React, aber sie dienen leicht unterschiedlichen Zwecken.

Lassen Sie es uns aufschlüsseln:

1. Zweck:

• useCallback wird zum Merken von Funktionen verwendet.
• useMemo wird zum Speichern von Werten verwendet.

2. Was sie zurückgeben:

• useCallback gibt eine gespeicherte Rückruffunktion zurück.
• useMemo gibt einen gespeicherten Wert eines beliebigen Typs zurück.

3. Anwendungsfälle:

• useCallback wird normalerweise verwendet, wenn Rückrufe an optimierte untergeordnete Komponenten übergeben werden, die auf Referenzgleichheit angewiesen sind, um unnötige Renderings zu verhindern.
• useMemo wird verwendet, um teure Berechnungen bei jedem Rendern zu vermeiden.

4. Syntax:

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

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

5. Auswirkungen auf die Leistung:

• useCallback kann dazu beitragen, unnötige erneute Renderings von untergeordneten Komponenten zu verhindern, die den Rückruf als Requisite erhalten.
• useMemo kann helfen, teure Neuberechnungen zu vermeiden, wenn sich die Abhängigkeiten nicht geändert haben.

Sehen wir uns einige Beispiele an, um die Unterschiede zu veranschaulichen:

Beispiel für die Verwendung von 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>;
});

In diesem Beispiel wird useCallback verwendet, um die handleClick-Funktion zu speichern. Dies ist nützlich, da ChildComponent in React.memo eingeschlossen ist, was bedeutet, dass es nur dann erneut gerendert wird, wenn sich seine Requisiten ändern. Durch die Verwendung von useCallback stellen wir sicher, dass handleClick zwischen den Renderings die gleiche Referenz beibehält (es sei denn, die Anzahl ändert sich), wodurch unnötige erneute Renderings von ChildComponent verhindert werden.

Beispiel für die Verwendung von 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>
  );
};

In diesem Beispiel wird useMemo verwendet, um die sortierte Liste zu speichern. Der teure Sortiervorgang wird nur ausgeführt, wenn sich die Listenstütze ändert, nicht bei jedem Rendern von ExpensiveComponent. Dies ist hier besonders nützlich, da ParentComponent aus Gründen, die nichts mit der Liste zu tun haben, möglicherweise erneut gerendert wird (z. B. wenn sich die Anzahl ändert) und wir die Liste nicht unnötig neu sortieren möchten.

Wichtige Erkenntnisse:

1. Verwenden Sie useCallback, wenn Sie unnötige erneute Renderings von untergeordneten Komponenten verhindern möchten, die von Funktionsreferenzen abhängen.
2. Verwenden Sie useMemo, wenn Sie teure Neuberechnungen von Werten vermeiden möchten.
3. Beide Hooks helfen bei der Leistungsoptimierung, sollten aber mit Bedacht eingesetzt werden. Übermäßiger Gebrauch kann zu erhöhter Komplexität ohne nennenswerte Leistungssteigerungen führen.
4. Das Abhängigkeitsarray in beiden Hooks ist entscheidend. Der gespeicherte Wert/die gespeicherte Funktion wird nur aktualisiert, wenn sich eine der Abhängigkeiten ändert.

Folgen Sie uns für weitere Inhalte wie diesen!

Das obige ist der detaillierte Inhalt vonReagieren: useCallback vs. useMemo. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!