Was sind Hooks und wofür werden sie verwendet?
Hooks und Verwendungen sind zwei wichtige Konzepte in React, einer beliebten JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. In diesem Artikel werden wir untersuchen, was Hooks sind, wie sie funktionieren und welche häufigen Verwendungen von Hooks in React-Anwendungen vorkommen.
Was sind Hooks?
Hooks sind eine Möglichkeit, funktionalen Komponenten in React Funktionalität hinzuzufügen. Traditionell waren funktionale Komponenten in React darauf beschränkt, nur ein UI-Element zu definieren und hatten keinen Zugriff auf Status- oder Lebenszyklusmethoden. Mit der Einführung von Hooks können funktionale Komponenten jetzt Status- und Lebenszyklusmethoden haben, was sie leistungsfähiger und flexibler macht.
Wie funktionieren Hooks?
Hooks sind Funktionen, mit denen Sie React-Funktionen wie Status-, Kontext- und Lebenszyklusmethoden in funktionalen Komponenten verwenden können. Sie werden innerhalb der Komponente aufgerufen und müssen den Hook-Regeln entsprechen, was bedeutet, dass sie nicht bedingt oder in Schleifen aufgerufen werden können.
Es gibt mehrere integrierte Hooks in React, darunter useState, useEffect, useContext und useMemo. Jeder Hook hat einen bestimmten Zweck und kann verwendet werden, um einer Komponente bestimmte Funktionen hinzuzufügen.
Häufige Verwendung von Hooks in React
1. useState-Hook
Der useState-Hook wird verwendet, um funktionalen Komponenten Status hinzuzufügen. Status ist ein Objekt, das Daten speichert und Änderungen in der Benutzeroberfläche widerspiegelt. Der useState-Hook verwendet einen Anfangswert als Argument und gibt ein Array mit zwei Elementen zurück: den aktuellen Statuswert und eine Funktion zum Aktualisieren des Status.
```
importiere React, { useState } von ''react'';
Funktion Zähler() {
const [Anzahl, Anzahl festlegen] {{0}} useState(0);
zurückkehren (
Du hast {count} Mal geklickt
);
}
```
In diesem Beispiel wird der useState-Hook verwendet, um der Komponente einen Zähler hinzuzufügen. Die Variable count wird auf 0 initialisiert und von der Funktion setCount aktualisiert, wenn auf die Schaltfläche geklickt wird.
2. useEffect-Hook
Der useEffect-Hook wird verwendet, um Nebeneffekte in Funktionskomponenten auszuführen, wie z. B. das Abrufen von Daten, das Abonnieren von Ereignissen oder das Aktualisieren des Dokumenttitels. Nebeneffekte sind Aktionen, die außerhalb der Komponente stattfinden und die Benutzeroberfläche oder den Anwendungsstatus beeinflussen können.
```
importiere React, { useState, useEffect } von „react“;
Funktion Benutzerprofil({ Benutzer-ID }) {
const [Benutzer, setUser]=useState(null);
useEffect(() => {
holen(`https://api.example.com/users/${userId}`)
.then(response =>Antwort.json ())
.then(data =>setUser(Daten));
}, [Benutzer-ID]);
wenn (!Benutzer) {
zurückkehren
Laden...
;}
zurückkehren (
{Benutzername}
{Benutzer.email}
);
}
```
In diesem Beispiel wird der useEffect-Hook verwendet, um ein Benutzerprofil von einer API abzurufen und den Komponentenstatus zu aktualisieren. Der useEffect-Hook verwendet eine Funktion und ein Array von Abhängigkeiten als Argumente. Die Funktion wird ausgeführt, nachdem die Komponente gerendert wurde, und die Abhängigkeiten bestimmen, wann die Funktion erneut ausgeführt werden soll.
3. useContext-Hook
Der useContext-Hook wird verwendet, um Daten zwischen Komponenten auszutauschen, ohne Props oder eine globale Statusverwaltungsbibliothek zu verwenden. Kontext ist eine Möglichkeit, Daten durch den Komponentenbaum zu leiten, ohne Props auf jeder Ebene manuell weitergeben zu müssen.
```
importiere React, { useContext } von ''react'';
importiere ThemeContext aus ''./ThemeContext'';
Funktion Button() {
const { Thema, Thema festlegen }=useContext(ThemeContext);
zurückkehren (
<>
onClick={() =>setTheme(Thema === ''hell'' ? ''dunkel'' : ''hell'')}
Stil={{ Hintergrundfarbe: Thema === ''hell'' ? ''weiß'' : ''schwarz'', Farbe: Thema === ''hell'' ? ''schwarz'' : ''weiß'' }}
>
{theme === ''hell'' ? ''Zum dunklen Modus wechseln'' : ''Zum hellen Modus wechseln''}
);
}
```
In diesem Beispiel wird der useContext-Hook verwendet, um auf die Designeigenschaft des Status der übergeordneten Komponente zuzugreifen und diese zu aktualisieren. Der useContext-Hook verwendet ein Kontextobjekt als Argument und gibt den aktuellen Kontextwert zurück.
4. verwenden Sie Memo Hook
Der useMemo-Hook wird verwendet, um aufwändige Berechnungen in Funktionskomponenten zu optimieren. Aufwändige Berechnungen sind Berechnungen, die lange dauern oder viele Ressourcen verbrauchen. Der useMemo-Hook verwendet eine Funktion und ein Array von Abhängigkeiten als Argumente und gibt das Ergebnis der Funktion zurück.
```
importiere React, { useState, useMemo } von „react“;
Funktion Fibonacci({ n }) {
const [Ergebnis, setzeErgebnis]=useState(null);
const fibonacci = useMemo(() => {
wenn (n<= 1) {
Rückkehr n;
}
gibt Fibonacci(n - 1) + Fibonacci(n - 2) zurück;
}, [n]);
useEffect(() => {
setzeErgebnis(Fibonacci);
}, [fibonacci]);
wenn (Ergebnis === null) {
zurückkehren
Berechnung…
;}
zurückkehren
Die {n}te Fibonacci-Zahl ist {result}.
;}
```
In diesem Beispiel wird der useMemo-Hook verwendet, um die n-te Fibonacci-Zahl zu berechnen. Der useMemo-Hook verwendet eine Funktion und ein Array von Abhängigkeiten als Argumente. Die Funktion wird nur ausgeführt, wenn sich die Abhängigkeiten ändern, wodurch die Leistung der Komponente optimiert wird.
Abschluss
Hooks und Verwendungen sind ein wesentlicher Bestandteil der API für funktionale Komponenten von React. Sie ermöglichen Entwicklern, funktionalen Komponenten Status-, Kontext- und Lebenszyklusmethoden hinzuzufügen, wodurch sie leistungsfähiger und flexibler werden. Einige der gängigen Verwendungen von Hooks in React-Anwendungen umfassen Statusverwaltung, Nebeneffektbehandlung, Kontextfreigabe und Leistungsoptimierung. Durch das Erlernen und Verwenden von Hooks in React-Anwendungen können Entwickler effizienteren und handlicheren Code erstellen.