Verwaltung von Zustand mit useState

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

Syntax:

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

const [state, setState] = useState(initialState);

• Für die Benennung der state-Variable kann ein beliebiges Wort gewählt werden. Es wird empfohlen, einen Variablennamen zu verwenden, der genau beschreibt, welcher Zustand gespeichert oder aktualisiert wird, wie zum Beispiel inputValue, page, number, name usw.;

• Ebenso besteht bei der Verwendung der setState-Funktion Flexibilität bei der Namenswahl. Es ist jedoch gängige Konvention, dass der Name der setState-Funktion mit "set" beginnt, gefolgt vom Namen der zugehörigen Zustandsvariable. Wenn die state-Variable beispielsweise mail heißt, würde die entsprechende setState-Funktion typischerweise setMail genannt werden.

Beispiel 1:

Erstellung der Counter-Komponente, die ihren eigenen Zustand verwaltet. Beim Klicken auf den Increment-Button wird der Zustand aktualisiert und die Komponente neu gerendert.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

In diesem Beispiel wird der useState-Hook verwendet, um eine Zustandsvariable count mit dem Anfangswert 0 zu deklarieren. Die Funktion setCount wird genutzt, um die Variable count zu aktualisieren, sobald der Button geklickt wird.

Erklärung Zeile für Zeile:

• Zeile 1: Import des useState-Hooks aus der React-Bibliothek zur Nutzung der Funktionalität;
• Zeile 3: Definition der Counter-Komponente mit der üblichen Funktionssyntax;
• Zeile 4: Initialisierung des Zustands mit dem useState-Hook;

1. count repräsentiert den Wert des Zählers. Der Anfangswert ist 0, festgelegt in den Klammern von useState(0);
2. setCount ist die Funktion, die den Zustand bei Bedarf aktualisiert.

• Zeilen 6-8: Diese JavaScript-Arrow-Funktion übernimmt die Logik zur Aktualisierung des Zustands. Sie wird ausgeführt, wenn der "Increment"-Button geklickt wird. Innerhalb der Funktion wird die Funktion setCount verwendet, um den Zustand zu aktualisieren;
• Zeilen 10-15: Rendert das Markup der Komponente. In Zeile 12 wird der aktuelle Zustand (count) angezeigt. Der Button in Zeile 13 verwendet das onClick-Attribut, um die auszuführende Funktion beim Klicken festzulegen. In diesem Fall wird die Funktion increment übergeben.

Beispiel 2:

Erstellung der Form-Komponente mit eigenem Zustand. Die Benutzerin oder der Benutzer wird aufgefordert, den Namen in das Eingabefeld einzugeben. Abhängig von der Eingabe wird der angezeigte Inhalt angepasst.

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

In diesem Beispiel wird der useState-Hook verwendet, um eine Zustandsvariable userName mit dem Anfangswert eines leeren Strings zu deklarieren. Die Funktion setUserName aktualisiert die Variable userName, wann immer dies erforderlich ist.

Zeilenweise Erklärung:

• Zeile 1: Import des useState-Hooks aus der React-Bibliothek zur Nutzung seiner Funktionalität;
• Zeile 3: Definition der Form-Komponente mit der Standard-Funktionssyntax;
• Zeile 4: Festlegung des Anfangszustands mit dem useState-Hook;

1. userName steht für den Wert des Eingabefelds und ist anfänglich als leerer String ("") gesetzt, wie in den Klammern von useState("") angegeben;
2. setUserName ist die Funktion, mit der der Zustand bei Bedarf aktualisiert werden kann.

• Zeilen 6-9: Diese JavaScript-Arrow-Funktion übernimmt die Logik zur Aktualisierung des Zustands. Sie wird ausgelöst, wenn ein Benutzer etwas in das Feld eingibt. Der Eingabewert wird innerhalb der Funktion mit event.target.value abgerufen. Anschließend wird die Funktion setUserName verwendet, um den Zustand mit dem Wert aus dem Eingabefeld zu aktualisieren;
• Zeilen 11-21: Das Markup der Komponente wird gerendert.
  1. In Zeile 15 wird userName als Anfangswert für das Eingabefeld über das value-Attribut zugewiesen;
  2. In Zeile 16 wird das onChange-Attribut verwendet, um die Funktion anzugeben, die bei einer Änderung im Eingabefeld aufgerufen wird.