Top-Hooks

Was sind React-Hooks?
Hooks bieten Funktionskomponenten die Möglichkeit, Status und Nebenwirkungen zu verwalten. Sie wurden erstmals in React v16.8 eingeführt und seitdem wurden verschiedene Hooks hinzugefügt. Heute werden wir über MEINE Top-3-Haken sprechen, die ich am häufigsten verwende.

**

1. Der useState-Hook ** Damit können Sie einer Komponente eine Zustandsvariable hinzufügen.

const [age, setAge] = useState(18)

Das Obige ist ein einfaches Beispiel dafür, wie dieser Hook definiert ist.
Die useState-Hooks nehmen einen Parameter (18) als Anfangszustand für die definierte Variable (Alter) und stellen uns ein Array mit zwei Werten zur Verfügung:

1. (Alter), das den aktuellen Status zurückgibt
2. (setAge) ist eine Setter-Funktion Hier können Sie den Status aktualisieren.

So funktioniert eine Setter-Funktion:

Funktion incrementAge(){
setAge(a => a + 1)
}

Bei jedem Aufruf dieser Funktion aktualisiert die Setter-Funktion den Status basierend auf dem letzten Status.

2. Der useEffect-Hook
Damit können Sie Ihre Komponente mit einem externen System wie dem DOM, Netzwerken usw. synchronisieren.

useEffect(() => {
const Connection = createConnection(serverUrl, roomId);
Connection.connect();
return () => {
Connection.disconnect();
};
}, [serverUrl, roomId]);

Der useEffect-Hook benötigt zwei Parameter, eine Funktion und ein Abhängigkeitsarray. Die Funktion wird nur ausgeführt, wenn die Variablen im Abhängigkeitsarray, das auf die Funktion folgt, ihren Wert oder Zustand ändern. Wenn das Abhängigkeitsarray leer ist, wird die Funktion jedes Mal ausgeführt, wenn die Komponente gerendert wird.

Dies sind nur zwei von vielen anderen Hooks in React, sie sind die häufigsten und in verschiedenen Situationen am nützlichsten.

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