React Hooks und Vorteile

Reagieren

Als Front-End-JavaScript-Bibliothek zum Erstellen von Schnittstellen basierend auf Komponenten hat React bei Front-End-Entwicklern an Popularität gewonnen. Es wurde 2013 von Facebook gestartet und wird jetzt von Meta gepflegt. React ist Open Source und sein Hauptanwendungsfall ist die Entwicklung von Single-Page-Webanwendungen mit Schwerpunkt auf der Benutzeroberfläche und dem Rendern von Komponenten im DOM.

React-Anwendungen basieren auf Bibliotheken für Routing und andere clientseitige Funktionen. Ein wesentlicher Vorteil von React besteht darin, dass es nur die Teile einer Seite neu rendert, die sich geändert haben, wodurch unnötiges erneutes Rendern unveränderter DOM-Elemente vermieden wird.

Hauptmerkmale

Deklarativ
Dem deklarativen Programmierparadigma folgend entwerfen Entwickler in React Ansichten für jeden Zustand einer Anwendung, die dann aktualisiert und Komponenten als Datenänderungen gerendert werden. Im Vergleich zur imperativen Programmierung liegt der Fokus darauf, „was“ getan werden soll und wie die endgültige Seite aussehen soll, und nicht darauf, „wie“ es Schritt für Schritt gemacht wird.

Komponenten
Der Code in React besteht aus Komponenten, die modulare und wiederverwendbare Einheiten sind. Anwendungen bestehen in der Regel aus mehreren Schichten von Komponenten und werden in einem sogenannten Root-Element im DOM gerendert. Beim Rendern einer Komponente werden Werte zwischen Komponenten über Eigenschaften, auch bekannt als Requisiten, weitergegeben. Werte innerhalb einer Komponente werden als Zustand bezeichnet.

React Hooks
React Hooks sind seit React 16.8 (2019) verfügbar und sind Funktionen, die es Entwicklern ermöglichen, sich über Funktionskomponenten in React-Status- und Lebenszyklusfunktionen einzubinden. Wichtig ist, dass Hooks es Entwicklern ermöglichen, Funktionen von React zu nutzen, ohne Klassen verwenden zu müssen. Dies wird als großer Vorteil angesehen, da sich Programmierer weniger auf Klassenkomponenten verlassen müssen.

Klassenkomponenten
Klassen verhalten sich ähnlich wie funktionale Komponenten. Anstatt jedoch Hooks zum Verwalten von Status- und Lebenszyklusereignissen zu verwenden, verwenden sie Lebenszyklusmethoden für React.Component-Basisklassen.

Routenführung
Da React über keine integrierte Routing-Unterstützung verfügt, können für das Routing Bibliotheken von Drittanbietern verwendet werden. Dadurch kann der Entwickler ganz einfach Routen definieren, die Navigation verwalten und URL-Änderungen verarbeiten.

Virtuelles DOM
Das Virtual Document Object Model (DOM) ist eine wichtige Funktion, da React eine interne Datenstruktur verwendet, die resultierenden Unterschiede berechnet und das angezeigte DOM effizient aktualisiert. Dadurch kann der Entwickler Code so schreiben, als würde bei jeder Änderung die gesamte Seite gerendert, während React nur Komponenten rendert, die sich tatsächlich ändern. Dies sorgt für eine Leistungssteigerung.

Reagieren Sie auf Hooks

Wie bereits erwähnt, sind Hooks eine neue Ergänzung in React 16.8. Sie ermöglichen die Nutzung von Status- und anderen React-Funktionen, ohne eine Klasse zu schreiben.

Referenz:
React Docs

useState
useState ist ein React Hook, mit dem Sie Ihrer Komponente eine Statusvariable hinzufügen können.

Referenz:
useState

Beispiel

import { useState } from ‚react‘;
Funktion MyComponent() {
const [age, setAge] = useState(28);
const [name, setName] = useState('Taylor');
const [todos, setTodos] = useState(() => createTodos());
// …

Die Konvention besteht darin, Zustandsvariablen wie [something, setSomething] mithilfe der Array-Destrukturierung zu benennen.

Zu den Parametern gehört „initialState“, also der Wert, den der Status anfänglich haben soll. Es kann ein Wert beliebiger Art sein, es gibt jedoch ein besonderes Verhalten für Funktionen. Dieses Argument wird nach dem ersten Rendern ignoriert.

useState gibt ein Array mit genau zwei Werten zurück:

1. Der aktuelle Stand. Beim ersten Rendern stimmt es mit dem initialState überein, den Sie übergeben haben.
2. Die Set-Funktion, mit der Sie den Status auf einen anderen Wert aktualisieren und ein erneutes Rendern auslösen können.

useEffect
useEffect ist ein React Hook, mit dem Sie eine Komponente mit einem externen System synchronisieren können.

Beispiel
useEffect(setup, dependencies)

Es wird auf der obersten Ebene Ihrer Komponente aufgerufen, einen Effekt zu deklarieren.

Setup ist die Funktion mit der Logik des Effekts. Die Setup-Funktion kann optional auch eine Bereinigungsfunktion zurückgeben. Wenn Ihre Komponente zum DOM hinzugefügt wird, führt React Ihre Setup-Funktion aus. Nach jedem erneuten Rendern mit geänderten Abhängigkeiten führt React zunächst die Bereinigungsfunktion mit den alten Werten und dann Ihre Setup-Funktion mit den neuen Werten aus.

Abhängigkeiten sind optional und dies ist eine Liste aller reaktiven Werte, auf die im Setup-Code verwiesen wird. Zu den reaktiven Werten gehören Requisiten, Status und alle Variablen und Funktionen, die direkt in Ihrem Komponentenkörper deklariert werden.

Wichtige Erkenntnisse

Ein wesentlicher Vorteil von React ist die Verwendung von JavaScript, einer der weltweit beliebtesten Programmiersprachen. React ist einfach zu verwenden, im Allgemeinen leicht zu erlernen und verbessert die Leistung und Interoperabilität Ihrer Webanwendungen.

Das obige ist der detaillierte Inhalt vonReact Hooks und Vorteile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!