React: So verwenden Sie die neue Hooks-Schnittstelle des JavaScript-Frameworks
Mit Version 16.8 hat die Hooks-API Einzug in React gehalten. Dieses Feature könnte die Art der Entwicklung von React-Applikationen nachhaltig verändern.
- Sebastian Springer
Bisher spielten Klassen und Klassenkomponenten eine Hauptrolle in der Anwendungsentwicklung mit Facebooks JavaScript-Framework React. Abhängig vom jeweiligen Projekt tauchten allerdings immer wieder Probleme auf. Wer beispielsweise State in Klassenkomponenten einsetzt, muss damit rechnen, dass der State und die zugehörige Logik wachsen. Das Ergebnis ist Unübersichtlichkeit. Die Hooks-API bringt Funktionen mit und will so für mehr Klarheit sorgen.
Bevor es um die Hooks-API geht, lohnt sich ein Blick auf eine weitere, häufig verwendete Schnittstelle: die Context-API. Sie gibt einen Vorgeschmack darauf, in welche Richtung sich React (Download) entwickeln wird. Zahlreiche Bibliotheken bauen auf dieser Schnittstelle auf und sie verfolgt ein ähnliches Ziel wie die Hooks-API: Entwicklern mehr Möglichkeiten und Freiheiten beim Bau einer Anwendung verschaffen. Schließlich erlaubt ein Teil der Hooks-API den Zugriff auf die Context-API.
Die Context-API bezeichnet in React ein Konstrukt zur Definition von global in der Applikation verfügbaren Objekten. Diese Schnittstelle kommt häufig zum Einsatz, wenn auf ein Objekt an vielen Stellen in der Applikation zugegriffen werden muss. Ohne die Context-API muss der Entwickler ein solches globales Objekt in einer gemeinsamen Elternkomponente, meist ist dies die Wurzelkomponente, definieren und durch alle Kindkomponenten reichen. Das führt gerade bei mehreren globalen Objekten schnell zu Unübersichtlichkeiten und unnötigem Overhead. Bei der Context-API definiert man den Context an zentraler Stelle und er lässt sich an einer beliebigen Stelle innerhalb der Applikation konsumieren. Klassische Beispiele für den Einsatz sind die Bibliotheken Redux für State-Management in einer React-Applikation und React Intl für die Internationalisierung. Beide stellen Funktionalität für die gesamte Applikation über den Context zur Verfügung.
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Wie eine lokale KI die Fotosammlung auf dem NAS verschlagworten kann
Fujifilm X100VI im Test: Neuauflage der beliebten Edelkompaktkamera
Günstiges Display samt Einplatinencomputer für Bastelanfänger im Kurztest
Proxmox VE: Was es kann und was man dafür braucht
Elektroauto MG4 Trophy im Test: Bestseller mit Batterie-Upgrade
OpenCore Legacy Patcher: Wie Sie alte Macs mit jungem macOS aufbrezeln
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Wie eine lokale KI die Fotosammlung auf dem NAS verschlagworten kann
Fujifilm X100VI im Test: Neuauflage der beliebten Edelkompaktkamera
Günstiges Display samt Einplatinencomputer für Bastelanfänger im Kurztest
Proxmox VE: Was es kann und was man dafür braucht
Elektroauto MG4 Trophy im Test: Bestseller mit Batterie-Upgrade