useMemo und useCallback sind zwei leistungsstarke React-Hooks, die eine entscheidende Rolle dabei spielen, unnötige erneute Renderings zu verhindern, was zu einer Optimierung der Komponentenleistung führt. Sie sind wesentliche Werkzeuge für Entwickler, um reaktionsfähige und effiziente React-Anwendungen zu erstellen.

In diesem Leitfaden wird erläutert, welche Ähnlichkeiten zwischen useMemo und useCallback bestehen und wie sie sich voneinander unterscheiden. Wir werden verstehen, wie man sie umsetzt und wann man sie jeweils verwendet.

Warum sollten Sie useMemo oder useCallback verwenden?

Normalerweise sind in React die meisten Berechnungen schnell, aber manchmal haben Sie eine Berechnung auf einem sehr großen Array oder eine teure Berechnung, die nicht bei jedem erneuten Rendern ausgeführt werden muss.

useMemo- und useCallback-Hooks können helfen, dieses Problem zu lösen, indem sie diese teuren Berechnungen zwischen erneuten Renderings zwischenspeichern.

Was ist useMemo und wie wird es verwendet?

useMemo ist ein React-Hook, der das Ergebnis einer Berechnung zwischen erneuten Renderings zwischenspeichert und zwei Argumente benötigt:

• CalculatedValue: Die Funktion, die den Wert berechnet, den Sie zwischenspeichern möchten. Die Funktion sollte keine Parameter akzeptieren, rein sein und jede Art von Wert zurückgeben. React gibt dasselbe berechnete Ergebnis zurück, wenn sich die Abhängigkeiten nicht geändert haben. Andernfalls berechnet es ein neues Ergebnis und speichert es zwischen.
• Abhängigkeiten: Die Liste aller reaktiven Wertreferenzen, die sich in Ihrem CalculatedValue befinden, von Zustandsvariablen, Konstanten und Funktionsaufrufen. React versucht, jeden reaktiven Wert mithilfe des Object.it-Vergleichs mit dem vorherigen Wert zu vergleichen.

useMemo-Nutzung

Um eine Berechnung zwischen erneuten Renderings zwischenzuspeichern, schließen Sie sie mit einem useMemo-Hook auf der obersten Ebene der Komponente ein.

useMemo(fn, dependencies)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

Beachten Sie, dass der erste Parameter von useMemo eine Funktion ohne Parameter ist.

Beim ersten Mal berechnet React den Ergebniswert des ersten Parameters von useMemo und merkt sich dann den zweiten Parameter, der die Liste der Abhängigkeiten darstellt. React speichert das berechnete Ergebnis zwischen erneuten Renderings zwischen und berechnet das Ergebnis nur dann neu, wenn sich einer der Abhängigkeitswerte ändert.

Was ist useCallback und wie wird es verwendet?

useCallback-Hook ist derselbe wie der useMemo-Hook mit dem einzigen Unterschied, dass dieser Hook die Funktion (erster Parameter für useCallback) zwischenspeichert, ohne den Wert zu berechnen. Außerdem kann die Funktion im Gegensatz zu useMemo Parameter akzeptieren.

Um useCallback zu verwenden, müssen Sie Parameter übergeben:

• Eine Funktionsdefinition, die zwischengespeichert werden muss.
• Liste der Abhängigkeiten

const cachedFn = useCallback(fn, dependencies)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/'   productId   '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

Wann sollte useMemo anstelle von useCallback verwendet werden?

Wenn es Ihnen in erster Linie um die Optimierung des Berechnungsergebnisses geht, nutzen Sie useMemo.
Wenn es Ihnen in erster Linie darum geht, unnötige erneute Renderings aufgrund von Funktionsänderungen zu verhindern, verwenden Sie useCallback.

Überspringen von erneuten Renderings einer Komponente

Manchmal muss eine übergeordnete Komponente neu gerendert werden, was auch dazu führt, dass die untergeordnete Komponente neu gerendert wird. Es ist möglich, eine Komponente mithilfe von Memo zwischenzuspeichern.

Nehmen wir an, wir haben eine Todolist-Komponente mit Themenstatus und eine List-Komponente als untergeordnetes Element. Immer wenn sich der Status des Themas ändert, wird die Listenkomponente erneut gerendert, was nicht erforderlich ist. Um dieses Problem zu lösen, verwenden Sie memo.

Wir verpacken die funktionale Komponente von List mit Memo.

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    

      
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

Abschluss

In diesem umfassenden Leitfaden haben wir die Hooks „useMemo“ und „useCallback“ verstanden, wie man sie jeweils verwendet, wann man sie verwendet und welche Vorteile sie für die Optimierung der Leistung der React-Anwendung haben.