Hooks in React können Sie mit dem Status und anderen React-Funktionen in Funktionskomponenten arbeiten. useCallback-Haken - einer der bemerkenswertesten Haken, mit dem Sie die Leistung von Komponenten optimieren können, indem Sie unnötige Renderings vermeiden.
Wenn eine Funktionskomponente gerendert wird, werden alle internen Funktionen neu erstellt. Dies kann zu Problemen führen, wenn diese Funktionen in der Komponentenhierarchie nach unten übergeben werden, da jede Komponente, die diese Funktionen als Prop erhält, erneut gerendert wird, selbst wenn sich der Status der Komponente nicht geändert hat.
Hier kommt der Haken zur Rettung useCallback. Es ermöglicht uns, stabile Wurstfunktionen zu erstellen, die sich bei jedem Rendern der Komponente nicht ändern, solange genau die gleichen Parameter an den Haken übergeben werden. Dies verhindert unnötige Renderings und erhöht die Leistung.
Wie der useCallback-Haken funktioniert
Wenn wir eine Funktion innerhalb einer untergeordneten Komponente übergeben, erstellt React bei jedem Rendern der übergeordneten Komponente eine neue Version dieser Funktion. Dies kann zu Ineffizienzen führen, insbesondere wenn die Funktion in eine Komponente übertragen wird, die häufig neu gezeichnet wird.
Der useCallback-Hook löst dieses Problem, indem er eine memoisierte Version der Funktion erstellt, die zurückgegeben und verwendet wird, anstatt bei jedem Render eine neue Funktion zu erstellen. Beim ersten Aufruf merkt sich useCallback die übergebene Funktion und gibt sie zurück. Bei den nächsten Aufrufen prüft es, ob sich die Abhängigkeiten geändert haben, und nur bei der Änderung wird eine neue Funktion erstellt.
Um den useCallback-Hook zu verwenden, müssen Sie ihn aus der React-Bibliothek importieren:
import React, < useCallback >from 'react';
const MyComponent = () => < const handleClick = useCallback(() =>< console.log('Button clicked!'); >, []); // es gibt keine Abhängigkeiten, die Funktion wird memoisiert und ändert sich nicht bei Aktualisierungen der return ( ); >;
In diesem Beispiel wird die handleClick-Funktion nur einmal erstellt, wenn die MyComponent-Komponente zum ersten Mal gerendert wird. Bei nachfolgenden Renderings wird es wiederverwendet, obwohl es viele andere Änderungen an der Komponente geben kann. Dies erhöht die Anwendungsleistung erheblich.
Der useCallback-Hook hat auch einen zusätzlichen Parameter - ein Array von Abhängigkeiten ([]). Dieses Array gibt an, welche Variablen oder Werte useCallback und seine interne Funktion aktualisieren sollen. Wenn sich einer der Werte im Array ändert, werden der useCallback und seine interne Funktion neu erstellt.
Zusammenfassend können Sie mit dem useCallback-Haken verhindern, dass Komponenten unnötig neu gezeichnet werden und die Anwendungsleistung erheblich verbessert wird. Es wird verwendet, um komplexe Berechnungen zwischenzuspeichern und memoisierte Funktionen zu erstellen, die sich bei Aktualisierungen nicht ändern.
Ausführliche Erklärung
Wenn eine Funktionskomponente gerendert wird, werden alle internen Funktionen neu erstellt, selbst wenn sie je nach useCallback definiert wurden, was zu unnötigen Neuzeichnungen führen kann. Wenn wir unsere Funktion jedoch in einen useCallback einfügen, wird sie optimiert und bei wiederholten Aufrufen nur dann dieselbe Funktion zurückgegeben, wenn sich die Abhängigkeiten nicht geändert haben.
Ein Beispiel für die Verwendung von useCallback könnte wie folgt sein:
const MyComponent = () => , [count]);return ( In diesem Beispiel verwenden wir den useState-Hook, um den count-Status zu erstellen, und die setCount-Funktion, um ihn zu aktualisieren. Wir verwenden auch den useCallback-Hook, um eine Increment-Funktion zu erstellen, die den Count-Wert bei jedem Klick auf eine Schaltfläche um 1 erhöht.
Es ist jedoch wichtig zu beachten, dass useCallback nur verwendet werden sollte, wenn eine Funktion tatsächlich Leistungsoptimierungen erfordert, da dies die Komplexität des Codes erhöhen und ihn weniger lesbar machen kann.
