Wenn Sie neu bei React sind, fragen Sie sich vielleicht, was React Hooks sind und wann Sie sie verwenden sollten. React hat Hooks erst in seiner Version 16.8 eingeführt, aber sie sind schnell zu einem wesentlichen Merkmal der Bibliothek geworden.

Erfahren Sie alles über die Grundlagen von React Hooks und entdecken Sie einige Best Practices für deren Verwendung in Ihren React-Anwendungen.

Was sind Reaktionshaken?

Mit React Hooks können Sie Status- und andere React-Funktionen verwenden, ohne zusätzlichen Code schreiben zu müssen. Hooks sind eine großartige Möglichkeit, Ihren Code lesbarer und wartbarer zu machen.

Es gibt ein paar verschiedene Hooks in React, aber die am häufigsten verwendeten sind useState und useEffect. Mit dem Hook useState können Sie Ihren Komponenten einen Zustand hinzufügen. Dies ist nützlich, um beispielsweise die Eingaben eines Benutzers oder Änderungen an einem Formular zu verfolgen. Mit dem Hook useEffect können Sie eine Funktion immer dann ausführen, wenn eine Komponente gerendert wird. Dies ist nützlich für Dinge wie das Abrufen von Daten von einer API oder das Einrichten eines Abonnements.

instagram viewer

Wann sollten Sie Reaktionshaken verwenden?

Sie sollten React Hooks immer dann verwenden, wenn Sie einer Komponente zusätzliche Funktionen hinzufügen müssen. Wenn Sie beispielsweise die Eingaben eines Benutzers verfolgen müssen, würden Sie den useState-Hook verwenden. Wenn Sie Daten von einer API abrufen müssen, würden Sie den useEffect-Hook verwenden. Du kannst auch Erstellen Sie benutzerdefinierte Hooks für API-Aufrufe.

Wenn Sie gerade erst mit der Verwendung von React begonnen haben, müssen Sie Hooks möglicherweise noch nicht verwenden. Aber wenn Sie komplexere Apps erstellen, werden Sie feststellen, dass Hooks eine großartige Möglichkeit sind, Ihren Komponenten zusätzliche Funktionen hinzuzufügen.

Best Practices mit React Hooks

Nachdem Sie nun wissen, was React Hooks sind und wann sie verwendet werden, lassen Sie uns über einige Best Practices sprechen.

1. Nur Hooks von React-Funktionen aufrufen

Sie sollten React-Hooks nur von React-Funktionen aufrufen. Wenn Sie versuchen, Hooks von einer Klassenkomponente aufzurufen, erhalten Sie eine Fehlermeldung.

Dies liegt daran, dass Sie einen React-Hook nur von einer React-Funktion aufrufen können. Reaktionsfunktionen sind Komponenten, die Sie mit einem Funktionsschlüsselwort deklarieren.

Hier ist ein Beispiel für eine React-Funktionskomponente:

importieren Reagieren, { useState } aus 'reagieren';
FunktionApp() {
konst [count, setCount] = useState(0);
zurückkehren (
<div>
<P>{zählen}</P>
<Schaltfläche onClick={() => setCount (Anzahl + 1)}>
 Klick mich
</button>
</div>
 );
}

Und hier ist ein Beispiel für eine Klassenkomponente:

importieren Reagieren, {Komponente} aus 'reagieren';
KlasseApperweitertKomponente{
 Zustand = {
 zählen: 0
 };
rendern() {
zurückkehren (
<div>
<P>{this.state.count}</P>
<Schaltfläche onClick={() => this.setState({ count: this.state.count + 1 })}>
 Klick mich
</button>
</div>
 );
 }
}

Das erste Beispiel deklariert die App-Komponente mit dem Schlüsselwort function, während das zweite das Schlüsselwort class verwendet.

2. Verwenden Sie nur einen useEffect-Hook

Wenn Sie den useEffect-Hook verwenden, sollten Sie nur einen pro Komponente verwenden. Dies liegt daran, dass useEffect immer dann ausgeführt wird, wenn eine Komponente gerendert wird.

Wenn Sie mehrere useEffect-Hooks haben, werden sie alle ausgeführt, wenn eine Komponente gerendert wird. Dies kann zu unerwartetem Verhalten und Leistungsproblemen führen. Im folgenden Beispiel werden beide useEffects immer dann ausgeführt, wenn die App-Komponente gerendert wird.

importieren Reagieren, { useState, useEffect } aus 'reagieren';
FunktionApp() {
konst [count, setCount] = useState(0);


useEffect(() => {
 Konsole.log ('Dies wird immer dann ausgeführt, wenn die App-Komponente gerendert wird!');
 }, []);


useEffect(() => {
 Konsole.log ('Dies wird auch ausgeführt, wenn die App-Komponente gerendert wird!');
 }, []);
zurückkehren (
<div>
<P>{zählen}</P>
<Schaltfläche onClick={() => setCount (Anzahl + 1)}>
 Klick mich
</button>
</div>
 );
}

Anstatt mehrere useEffect-Hooks zu verwenden, können Sie einen einzigen useEffect-Hook verwenden und Ihren gesamten Code darin ablegen. Im folgenden Beispiel wird nur ein useEffect-Hook ausgeführt, wenn die App-Komponente gerendert wird.

importieren Reagieren, { useState, useEffect } aus 'reagieren';
FunktionApp() {
konst [count, setCount] = useState(0);


useEffect(() => {
 Konsole.log ('Dies wird immer dann ausgeführt, wenn die App-Komponente gerendert wird!');
 Konsole.log ('Dies wird auch ausgeführt, wenn die App-Komponente gerendert wird!');
 }, []);
zurückkehren (
<div>
<P>{zählen}</P>
<Schaltfläche onClick={() => setCount (Anzahl + 1)}>
 Klick mich
</button>
</div>
 );
}

Das bedeutet, dass Sie nur React Hooks aus dem ersten Beispiel aufrufen können. Wenn Sie versuchen, React Hooks aus dem zweiten Beispiel aufzurufen, erhalten Sie eine Fehlermeldung.

3. Verwenden Sie Hooks auf der obersten Ebene

Eine der Best Practices mit React Hooks ist es, sie auf der obersten Ebene zu verwenden. Sie sollten die Verwendung von Hooks innerhalb von Schleifen, Bedingungen oder verschachtelten Funktionen vermeiden. Wenn Sie beispielsweise State innerhalb einer for-Schleife verwenden, erstellt React jedes Mal, wenn die Schleife ausgeführt wird, eine neue Zustandsvariable. Dies kann zu unerwartetem Verhalten führen.

importieren Reagieren, { useState } aus 'reagieren';
FunktionApp() {
für (lassen ich = 0; ich < 10; i++) {
// Tu das nicht!
konst [count, setCount] = useState(0);
 }
zurückkehren (
<div>
<P>{zählen}</P>
<Schaltfläche onClick={() => setCount (Anzahl + 1)}>
 Klick mich
</button>
</div>
 );
}

Im obigen Beispiel rendert die App-Komponente immer nur die Anzahl und die Schaltfläche aus der letzten Iteration der Schleife. Dies liegt daran, dass React nur die Zustandsvariable der letzten Iteration aktualisiert.

Anstatt State innerhalb einer Schleife zu verwenden, können Sie eine Zustandsvariable außerhalb der Schleife deklarieren. Auf diese Weise erstellt React nur eine Zustandsvariable und aktualisiert sie entsprechend.

importieren Reagieren, { useState } aus 'reagieren';
FunktionApp() {
// Dies ist die korrekte Art, useState innerhalb einer Schleife zu verwenden
konst [count, setCount] = useState(0);


für (lassen ich = 0; ich < 10; i++) {
// ...
 }
zurückkehren (
<div>
<P>{zählen}</P>
<Schaltfläche onClick={() => setCount (Anzahl + 1)}>
 Klick mich
</button>
</div>
 );
}

4. Haken nicht überbeanspruchen

React Hooks sind ein mächtiges Werkzeug, aber Sie sollten sie nicht überbeanspruchen. Wenn Sie feststellen, dass Sie in jeder Komponente mehrere Hooks verwenden, überbeanspruchen Sie sie möglicherweise.

React Hooks sind am nützlichsten, wenn Sie den Zustand zwischen mehreren Komponenten teilen müssen. Vermeiden Sie die Verwendung unnötiger Hooks, da sie Ihren Code schwer lesbar machen und die Leistung beeinträchtigen können, wenn sie übermäßig verwendet werden.

Fügen Sie mit React 18 Hooks weitere Funktionen hinzu

Mit der Veröffentlichung von React 18 sind neue Hooks verfügbar. Jeder Hook ist spezifisch für eine bestimmte React-Funktion. Eine Liste aller verfügbaren Hooks finden Sie auf der React-Website. Aber die am häufigsten verwendeten Hooks sind immer noch useState und useEffect.