UseState-Hook

Der useState Hook ist ein grundlegender React Hook, der es funktionalen Komponenten ermöglicht, einen Zustand zu haben. Er bietet eine Möglichkeit, Zustandsvariablen innerhalb einer Komponente zu deklarieren und zu aktualisieren.

Syntax:

Um den useState Hook zu verwenden, rufen wir ihn auf und übergeben den Anfangszustand (initialState) als Argument. Er gibt ein Array mit zwei Elementen zurück: den aktuellen Zustandswert (state) und eine Funktion (setState), um den Zustand zu aktualisieren.

• Wir können jedes beliebige Wort als Namen für eine state Variable wählen. Es wird empfohlen, einen Variablennamen zu verwenden, der genau beschreibt, welcher Zustand gespeichert oder aktualisiert wird, wie inputValue, page, number, name und so weiter;

• Ebenso haben wir bei der Verwendung der setState Funktion Flexibilität bei der Wahl des Funktionsnamens. Es ist jedoch eine gängige Konvention, einem bestimmten Muster zu folgen: Der setState Funktionsname sollte mit "set" beginnen, gefolgt vom Namen der entsprechenden Zustandsvariablen. Zum Beispiel, wenn die state Variable mail ist, würde die entsprechende setState Funktion typischerweise setMail genannt werden.

Hinweis

Wenn wir setState aufrufen, rendert React die Komponente neu und aktualisiert den Zustand mit dem neuen Wert. Es ist wichtig zu beachten, dass bei der Verwendung von useState die Zustandsvariable kein Objekt sein muss. Sie kann ein primitiver Wert (wie eine Zahl, ein String oder ein Boolean) oder ein komplexer Wert (wie ein Array oder Objekt) sein.

Beispiel 1:

Lassen Sie uns die Counter Komponente erstellen, die ihren eigenen Zustand beibehält. Wenn die Schaltfläche Increment geklickt wird, aktualisieren wir den Zustand und lösen ein Neurendern der Komponente aus.

In diesem Beispiel wird der useState Hook verwendet, um eine Zustandsvariable count mit einem Anfangswert von 0 zu deklarieren. Die setCount Funktion wird verwendet, um die count Variable zu aktualisieren, wann immer die Schaltfläche geklickt wird.

Zeilenweise Erklärung:

• Zeile 1: Wir importieren den useState Hook aus der React-Bibliothek, um seine Funktionalität zu nutzen;
• Zeile 3: Wir definieren die Counter-Komponente mit der konventionellen Funktionssyntax;
• Zeile 4: Wir initialisieren den Zustand mit dem useState Hook;
  1. count repräsentiert den Wert des Zählers. Sein Anfangswert ist 0, der innerhalb der Klammern von useState(0) angegeben ist;
  2. setCount ist die Funktion, die den Zustand bei Bedarf aktualisiert.
• Zeilen 6-8: Diese JavaScript-Pfeilfunktion behandelt die Logik zur Aktualisierung des Zustands. Sie wird ausgeführt, wenn der "increment"-Button geklickt wird. Innerhalb der Funktion verwenden wir die setCount Funktion, um den Zustand zu aktualisieren;
• Zeilen 10-15: rendert das Markup der Komponente. In Zeile 12 wird der aktuelle Zustandswert (count) angezeigt. Der Button in Zeile 13 nutzt das onClick Attribut, um die Funktion zu definieren, die beim Klicken ausgeführt werden soll. In diesem Fall übergeben wir die increment Funktion.

Vollständiger App-Code:

Beispiel 2:

Konstruiere die Form-Komponente mit ihrem unabhängigen Zustand. Wir fordern den Benutzer auf, seinen Namen in das Eingabefeld einzugeben, und je nach Eingabe werden wir den angezeigten Inhalt ändern.

In diesem Beispiel wird der useState Hook verwendet, um eine Zustandsvariable userName mit einem Anfangswert eines leeren Strings zu deklarieren. Die setUserName Funktion aktualisiert die userName Variable, wann immer wir es benötigen.

Zeilenweise Erklärung:

• Zeile 1: Wir importieren den useState Hook aus der React-Bibliothek, um seine Funktionalität zu nutzen;
• Zeile 3: Wir definieren die Form Komponente mit der Standardfunktionssyntax;
• Zeile 4: Wir setzen den Anfangszustand mit dem useState Hook;
  1. userName repräsentiert den Wert des Eingabefeldes, der anfänglich als leerer String ("") festgelegt ist, angegeben innerhalb der Klammern von useState("");
  2. setUserName ist die Funktion, die es uns ermöglicht, den Zustand bei Bedarf zu aktualisieren.
• Zeilen 6-9: Diese JavaScript-Pfeilfunktion behandelt die Logik zur Aktualisierung des Zustands. Sie wird ausgelöst, wenn ein Benutzer etwas in das Feld eingibt. Wir rufen den Eingabewert innerhalb der Funktion mit event.target.value ab. Dann nutzen wir die setUserName Funktion, um den Zustand mit dem Wert aus dem Eingabefeld zu aktualisieren;
• Zeilen 11-21: Das Markup der Komponente wird gerendert.
  1. In Zeile 15 weisen wir userName als Anfangswert für die Eingabe mit dem value Attribut zu;
  2. In Zeile 16 verwenden wir das onChange Attribut, um die Funktion anzugeben, die aufgerufen werden soll, wenn sich die Eingabe ändert.

Vollständiger App-Code: