Wann useMemo und useCallback verwendet werden sollten: eine kurze Anleitung für React-Fans

Wenn Sie ein React-Entwickler sind, sind Sie möglicherweise bereits online auf Diskussionen über React useMemo vs. useCallback gestoßen und waren am Ende verwirrter als je zuvor. Es kann sehr schwierig sein, den Unterschied zwischen useMemo und useCallback herauszufinden. Das ist okay! Es kann anfangs schwierig sein, sich mit React-Hooks vertraut zu machen, aber sie können auf der ganzen Linie äußerst nützlich sein.

In diesem Artikel zeigen wir Ihnen den Unterschied zwischen useCallback und useMemo und wann Sie useCallback und useMemo verwenden sollten.

Der Unterschied zwischen useMemo und useCallback

Mit React 16.8 wurden zwei eingebaute Hooks eingeführt. Diese Funktionen wurden eingeführt, um die Leistung zu optimieren. Der Unterschied zwischen useMemo und useCallback scheint vernachlässigbar, also werden wir versuchen, die Verwirrung zu beseitigen.

Was sind Reaktionshaken?

Hooks sind neue Funktionen, die in React eingeführt wurden und den useState und andere React-Funktionen ermöglichen, ohne eine Klasse zu schreiben. Hooks sind Methoden und Funktionen, die sich in die Status- und Lebenszyklusfunktionen von React einklinken.

useCallback vs. useMemo

Der useCallback-Hook wird immer dann verwendet, wenn eine untergeordnete Komponente immer wieder neu gerendert wird, ohne dass dies wirklich erforderlich wäre. Wenn Sie useCallback verwenden, können Sie dieses unnötige erneute Rendern verhindern, indem Sie dieselbe Instanz dieser Funktion zurückgeben, die übergeben wird, anstatt jedes Mal eine neue Instanz zu erstellen. Dadurch kann viel Zeit (und Geld für Entwicklungsstunden) eingespart werden. Das Übergeben eines Arrays von Abhängigkeiten mit einem gespeicherten Rückruf führt zu einer gespeicherten Version, die nur geändert wird, wenn sich die Abhängigkeit ändert.

useMemo wird in der funktionalen Komponente von React verwendet. Es wird verwendet, um einen gespeicherten Wert zurückzugeben. Memoization bezieht sich auf den Vorgang, Zeit für die Neukompilierung zu sparen, indem ein zwischengespeichertes Ergebnis zurückgegeben wird, anstatt eine Funktion mit demselben Argument für die nächste Ausführung erneut zu kompilieren. Das zwischengespeicherte Ergebnis wird beim nächsten Aufruf zurückgegeben. useMemo-Hooks stellen speicherabgebildete Werte bereit.

Offensichtlich gibt es einige Ähnlichkeiten. Sowohl in useMemo als auch in useCallback akzeptiert der Hook eine Funktion sowie eine Reihe von Abhängigkeiten. useCallback merkt sich jedoch den zurückgegebenen Wert, und useMemo merkt sich die Funktion. Mit anderen Worten: Einer speichert einen Werttyp und der andere eine Funktion.

• LESEN SIE MEHR – Wie und warum Sie Ihre Dateien organisieren sollten
• Top 9 Wege, um elektronische Geräte im Klassenzimmer zu nutzen

Wann sollte useCallback vs. useMemo verwendet werden?

Wann sollten Sie also useCallback verwenden, und wann ist useMemo die beste Option? Schauen wir uns ein Beispiel an. Wenn ein rechenintensiver und teurer Code Argumente akzeptiert und einen Wert zurückgibt, ist useMemo die beste Option. Auf diese Weise können Sie den Wert zwischen den Renderings referenzieren, ohne den Code erneut auszuführen und Ihre Zeit und Rechenleistung zu verschwenden.

Wenn Sie eine Funktionsinstanz über mehrere Renderings hinweg persistent halten müssen, sollten Sie stattdessen useCallback verwenden, da es die Funktion im Wesentlichen außerhalb des Bereichs Ihrer React-Komponente platziert, um sie intakt zu halten.

Was ist useEffect?

Wir haben bereits das Abhängigkeitsarray erwähnt, auf das Sie möglicherweise gestoßen sind, wenn Sie useEffect verwenden. useEffect ist ein weiterer React-Hook. Es wird verwendet, um Nebenwirkungen in funktionalen Komponenten mithilfe der Callback-Argumentlogik zu behandeln. Abhängigkeiten sind die Liste der Abhängigkeiten des Nebeneffekts, z. B. Props oder Zustandswerte.

Dieser Hook zeigt React, dass die Komponente nach dem Rendern eine Aktion ausführen muss. Wenn das DOM aktualisiert wird, wird der von Ihnen übergebene Effekt gespeichert. Sie können auch Daten abrufen, um dieses Ergebnis zu erzielen.

Kurz gesagt, useCallback, useMemo und useEffect befassen sich alle mit der Verbesserung der Leistung zwischen dem erneuten Rendern von Komponenten in React-Anwendungen.

Es ist jedoch wichtig, Hooks nicht zu überbeanspruchen. Die Hooks führen eine neue und komplexe Logik ein und könnten möglicherweise den gegenteiligen Effekt haben, als Sie beabsichtigt haben, und Leistungsprobleme verursachen, anstatt sie zu lösen. useMemo sollte nur für wirklich aufwendige Berechnungen verwendet werden.

Verwenden Sie useMemo oder useCallback nicht, um grundlegende Probleme mit Ihrer Anwendung zu beheben. Irgendwann werden diese Probleme wieder auftauchen und Sie verfolgen, also kümmern Sie sich am besten zuerst um bekannte Fehler.

• LESEN SIE MEHR – So wählen Sie das beste CMS aus
• Was sind die Vor- und Nachteile kryptografischer Verfahren?

Fazit

Hoffentlich war dieser Artikel aufschlussreich und Sie verstehen die beiden Haken besser. Zusammenfassend:

• Beide akzeptieren eine Funktion und ein Array von Abhängigkeiten
• useMemo merkt sich den zurückgegebenen Wert, useCallback merkt sich die Funktion.

Der Unterschied zwischen useMemo und useCallback ist ziemlich klar! Diese Tools können Zeit und Geld sparen, aber nur, wenn sie im richtigen Kontext und Umfeld eingesetzt werden.

Ich hoffe, dieses Tutorial hat Ihnen geholfen, etwas über die Verwendung von useMemo und useCallback zu wissen: eine kurze Anleitung für React-Fans . Wenn Sie etwas sagen möchten, teilen Sie uns dies über die Kommentarbereiche mit. Wenn Ihnen dieser Artikel gefällt, teilen Sie ihn bitte und folgen Sie WhatVwant auf Facebook, Twitter und YouTube, um weitere technische Tipps zu erhalten.

Wann verwenden Sie useMemo und useCallback – Häufig gestellte Fragen