React 的钩子和好处

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.

要点

React 的一个主要优点是它使用 JavaScript，这是世界上最流行的编程语言之一。 React 易于使用，通常也易于学习，并且可以提高 Web 应用程序的性能和互操作性。

以上是React 的钩子和好处的详细内容。更多信息请关注PHP中文网其他相关文章！