Aus dem Kurs: React Grundkurs
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.700 Kurse von Branchenfachleuten.
useMemo bzw. useCallback – Tutorial zu React.js
Aus dem Kurs: React Grundkurs
useMemo bzw. useCallback
In dieser Lektion lernen wir die Hooks useCallback und useMemo kennen. Ich zeige Ihnen außerdem, wie Sie analog zu shouldComponentUpdate das Update Ihrer Function Component steuern können. Wir bauen dazu unsere Countdown Component etwas um. In Schritt 1 wollen wir zuerst die Funktionslogik auslagern, die hier innerhalb von setTimeout steht. Der triviale Ansatz ist dazu einfach, die Funktion außen zu definieren und innen zu verwenden. Jedes Mal, wenn sich also der Countdown Value ändert, wird die Funktion innerhalb von useEffect aufgerufen und diese greift wiederum auf unsere timeoutFunc zu. Unsere timeoutFunc wird sowieso bei jedem Aufruf neu erzeugt und hat deswegen stets auch die korrekte Referenz. Das permanente neu Erzeugen können wir jedoch auch außerhalb vom eigentlichen useEffect optimieren. Dazu verwenden wir useCallback. useCallback nimmt, wie auch useEffect, eine Funktion entgegen. Im Gegensatz zu useEffect wird diese Funktion hier aber nicht jedes Mal aufgerufen, wenn…
Inhalt
-
-
-
-
-
-
-
Warum gibt es Function Components?4 Min. 16 Sek.
-
(Gesperrt)
Regeln von Hooks2 Min. 2 Sek.
-
(Gesperrt)
Keine schwarze Magie: React Hooks1 Min. 47 Sek.
-
(Gesperrt)
ButtonCounter mit useState4 Min. 17 Sek.
-
(Gesperrt)
Lifecycle mit useEffect: Countdown8 Min. 3 Sek.
-
(Gesperrt)
useMemo bzw. useCallback5 Min.
-
(Gesperrt)
React Hooks: Ausblick und Tipps2 Min. 19 Sek.
-
(Gesperrt)
Challenge: Stoppuhr56 Sek.
-
(Gesperrt)
Solution: Stoppuhr11 Min. 15 Sek.
-
-
-
-
-
-
-
-
-
-
-
-