React lernen, 2. Auflage

Kapitel 7. Erweitern von Komponenten mit Hooks

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Das Rendering ist das Herzstück einer React-Anwendung. Wenn sich etwas ändert (Requisiten, Status), wird der Komponentenbaum neu gerendert und spiegelt die neuesten Daten auf der Benutzeroberfläche wider. Bis jetzt war useState unser Arbeitspferd, um zu beschreiben, wie unsere Komponenten gerendert werden sollen. Aber wir können noch mehr tun. Es gibt weitere Hooks, die festlegen, warum und wann das Rendering stattfinden soll. Es gibt weitere Hooks, die die Rendering-Leistung verbessern. Es gibt immer mehr Hooks, die uns helfen können.

Im letzten Kapitel haben wir useState, useRef und useContext vorgestellt und gesehen, dass wir diese Hooks zu unseren eigenen benutzerdefinierten Hooks zusammenstellen können: useInput und useColors. Aber das ist noch nicht alles. React wird mit noch mehr Hooks ausgeliefert. In diesem Kapitel werden wir uns useEffect, useLayoutEffect und useReducer genauer ansehen. Sie alle sind wichtig für die Entwicklung von Anwendungen. Außerdem schauen wir uns useCallback und useMemo an, mit denen wir unsere Komponenten für die Leistung optimieren können.

Einführung von useEffect

Wir haben jetzt ein gutes Gefühl dafür, was passiert, wenn wir eine Komponente rendern. Eine Komponente ist einfach eine Funktion, die eine Benutzeroberfläche rendert. Sie wird gerendert, wenn die App zum ...