Seit der Veröffentlichung von React 16.8 unterstützt das bekannte Framework sogenannte Hooks. Wir geben Ihnen einen kurzen Überblick über einige Vor- und Nachteile der neuen Funktionalität.
Mit React Hooks haben Sie grundsätzlich die Möglichkeit, sog. „state“ zu verwenden, ohne extra eine Klasse zu schreiben. Diese Möglichkeit reduziert den zu schreibenden Code, der zum Erstellen einer statusbezogenen Komponente erforderlich ist.
Nachfolgend einige Beispiele:
The old-school way:
The new React Hooks way:
Wie Sie sehen, brauchen Sie mit den Hooks deutlich weniger Code, was das Arbeiten effizienter macht.
Kann man React Klassenfunktionen wie componentDidMount, componentDidUpdate und componentWillUnmount in React Hooks nutzen?
Ja, Sie können! Hooks vereint diese Funktionen. Zukünftig können Sie die sogenannten „useEffect“ Funktion zum Verwalten Ihres kompletten Komponentenlebenszyklus verwenden. Nachfolgend sehen Sie auch hierfür ein kurzes Beispiel:
Der gezeigte “useEffect” ist zu vergleichen mit folgendem Part:
Der folgende Effekt wird nur ausgelöst, wenn die Zählvariable geändert wird:
Der folgende Effekt wird nur ausgelöst, wenn die Komponente bereitgestellt wurde:
Wie kann ich einen Aufruf von componentWillUnmount zum Aufräumen der Events im Falle des Komponenten Unmounts verwenden?
Auch hierfür gibt es ein gutes Beispiel, welches Sie im folgenden sehen:
Unser Fazit:
Wenn Sie sich sicher mit React, den Lifecycle-Methoden und den zugehörigen Klassen fühlen, Ihren Code aber grundsätzlich einfacher und effizienter schreiben wollen, sind Sie mit React Hooks gut bedient. Die zugehörige Dokumentation ist bereits sehr umfangreich und gut geschrieben. Alle gängigen Hooks sind gut erklärt. Probieren Sie es doch einfach selbst mal aus. Wir nutzen es bereits sehr erfolgreich in unseren Kundenprojekten.
Melden Sie sich bei uns. Wir helfen Ihnen in einem unverbindlichen und persönlichen Gespräch gerne weiter.
Rufen Sie uns jetzt an +49 89 9438432-0 oder schreiben Sie uns service@arksolutions.de
