React State mit Hooks

Einführung

In React bezieht sich "State" (Zustand) auf Daten, die sich innerhalb einer Komponente im Laufe der Zeit ändern können. Wenn sich der State einer Komponente ändert, rendert React die Komponente automatisch neu, um den neuen State widerzuspiegeln. Hooks sind Funktionen, die es Ihnen ermöglichen, auf React-State- und Lifecycle-Funktionen aus Funktionskomponenten zuzugreifen ("hook into").

In diesem Lab lernen Sie, wie Sie einen der grundlegendsten Hooks, useState, verwenden, um den State in einer React-Funktionskomponente zu verwalten. Wir werden eine einfache Zähleranwendung erstellen, um zu demonstrieren, wie der State als Reaktion auf Benutzerinteraktionen initialisiert, angezeigt und aktualisiert wird.

Importiere useState aus react in die Komponentendatei

Zuerst bereiten wir unsere Entwicklungsumgebung vor. Das Setup-Skript hat bereits ein neues React-Projekt für Sie unter ~/project/my-app mit Vite erstellt.

Ihre erste Aufgabe ist es, die notwendigen Abhängigkeiten zu installieren und den Entwicklungsserver zu starten. Öffnen Sie ein Terminal in der WebIDE und führen Sie die folgenden Befehle nacheinander aus.

Navigieren Sie in Ihr Projektverzeichnis:

cd my-app

Installieren Sie die Projekt-Abhängigkeiten:

npm install

Starten Sie den Entwicklungsserver:

npm run dev -- --host 0.0.0.0 --port 8080

Nachdem Sie den letzten Befehl ausgeführt haben, sehen Sie eine Ausgabe, die anzeigt, dass der Server läuft. Sie können Ihre Live-Anwendung nun anzeigen, indem Sie auf den Tab "Web 8080" in der LabEx-Oberfläche klicken. Im Laufe dieses Labs werden wir die Datei ~/project/my-app/src/App.jsx ändern.

In diesem Schritt beginnen wir damit, den useState Hook aus der React-Bibliothek zu importieren. Hooks sind spezielle Funktionen, und um sie zu verwenden, müssen Sie sie zuerst aus dem react-Paket importieren.

Navigieren Sie über den Dateiexplorer in der WebIDE zur Datei ~/project/my-app/src/App.jsx und öffnen Sie diese.

Zuerst räumen wir den Standardinhalt auf, um einen minimalen Ausgangspunkt zu haben. Ersetzen Sie den gesamten Inhalt von App.jsx durch den folgenden Code:

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Fügen Sie nun die Importanweisung ganz oben in die Datei ein, um den useState Hook innerhalb unserer Komponente verfügbar zu machen.

import { useState } from "react";

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Diese Zeile teilt JavaScript mit, dass wir die Funktion useState verwenden möchten, die ein benannter Export aus der 'react'-Bibliothek ist.

Initialisiere den State mit const [count, setCount] = useState(0)

In diesem Schritt rufen wir den useState Hook auf, um ein neues State-Element in unserer Komponente zu erstellen.

Die Funktion useState nimmt ein Argument entgegen: den Anfangswert des States. Sie gibt ein Array zurück, das zwei Elemente enthält:

1. Den aktuellen Wert des States.
2. Eine Funktion, mit der Sie den State aktualisieren können.

Wir verwenden eine Syntax namens "Array-Destrukturierung", um diese beiden Werte in separate Variablen zu extrahieren. Es ist üblich, diese Variablen wie folgt zu benennen: [etwas, setEtwas].

Fügen Sie innerhalb der App-Komponentenfunktion, vor der return-Anweisung, die folgende Zeile hinzu, um unseren State zu initialisieren. Wir nennen unsere State-Variable count und setzen ihren Anfangswert auf 0.

Aktualisieren Sie Ihre Datei ~/project/my-app/src/App.jsx mit dem folgenden Code:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Nun verfügt unsere Komponente über ein State-Element namens count, das mit 0 initialisiert wurde, und eine Funktion setCount, mit der wir seinen Wert später ändern können.

Zeige den State-Wert in JSX mit {count} an

In diesem Schritt werden wir den aktuellen Wert unserer State-Variable count in der Benutzeroberfläche anzeigen.

In JSX können Sie jeden gültigen JavaScript-Ausdruck direkt in Ihr Markup einbetten, indem Sie ihn in geschweifte Klammern {} einschließen. Dies ermöglicht es uns, dynamische Daten wie unsere State-Variable zu rendern.

Fügen wir ein Absatz-Tag <p> hinzu, um eine Nachricht anzuzeigen, die den aktuellen Wert von count enthält.

Ändern Sie das JSX innerhalb der return-Anweisung in ~/project/my-app/src/App.jsx:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

Nachdem Sie die Datei gespeichert haben, wechseln Sie zum Tab "Web 8080". Sie sollten den Text "The current count is: 0" auf der Seite sehen, was bestätigt, dass unser anfänglicher State-Wert korrekt gerendert wird.

Aktualisiere den State mit setCount(count + 1)

In diesem Schritt definieren wir die Logik zur Aktualisierung unseres States. Es ist wichtig zu beachten, dass Sie den State niemals direkt ändern sollten (z. B. count = count + 1). Stattdessen müssen Sie immer die vom useState bereitgestellte Setter-Funktion verwenden, die in unserem Fall setCount ist.

Das Aufrufen der Setter-Funktion teilt React mit, dass sich der State geändert hat. React plant dann ein erneutes Rendern der Komponente mit dem neuen State-Wert.

Erstellen wir eine einfache Funktion innerhalb unserer App-Komponente, die die Logik zum Erhöhen des Zählers handhabt. Wir werden diese Funktion incrementCount nennen.

Fügen Sie die Funktion incrementCount zu Ihrer Datei ~/project/my-app/src/App.jsx hinzu:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

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

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

Diese Funktion wird, wenn sie aufgerufen wird, den aktuellen count-Wert nehmen, 1 dazu addieren und dann den neuen Wert an setCount übergeben. Dies löst ein erneutes Rendern der App-Komponente aus.

Löse die Aktualisierung bei einem Button-Klick-Ereignis aus

In diesem letzten Schritt verbinden wir unsere State-Update-Logik mit einer Benutzeraktion. Wir fügen unserer Komponente einen Button hinzu, und wenn der Benutzer darauf klickt, rufen wir die Funktion incrementCount auf, die wir im vorherigen Schritt erstellt haben.

In React können Sie Ereignisse wie Klicks behandeln, indem Sie eine Funktion speziellen Attributen wie onClick zuweisen.

Fügen wir ein <button>-Element zu unserem JSX hinzu und setzen seinen onClick-Handler auf unsere incrementCount-Funktion.

Aktualisieren Sie Ihre Datei ~/project/my-app/src/App.jsx mit dem endgültigen Code:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

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

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </>
  );
}

export default App;

Beachten Sie, dass wir die Funktion selbst (incrementCount) an onClick übergeben, nicht das Ergebnis ihres Aufrufs (incrementCount()). React ruft diese Funktion für uns auf, wann immer der Button geklickt wird.

Gehen Sie nun zum Tab "Web 8080". Sie sollten den Button "Increment" sehen. Klicken Sie darauf und beobachten Sie, wie der Zähler auf dem Bildschirm bei jedem Klick steigt!

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich eine zustandsbehaftete React-Komponente mit dem useState Hook erstellt.

In diesem Lab haben Sie die grundlegenden Prinzipien des State-Managements im modernen React gelernt:

• Was "State" in einer React-Komponente ist und warum er für die Erstellung interaktiver Benutzeroberflächen unerlässlich ist.
• Wie man den useState Hook aus der react-Bibliothek importiert.
• Wie man ein State-Element initialisiert, indem man useState mit einem Anfangswert aufruft.
• Wie man Array-Destrukturierung verwendet, um die State-Variable und die State-Setter-Funktion zu erhalten.
• Wie man die State-Variable in Ihrem JSX mithilfe von geschweiften Klammern {} anzeigt.
• Wie man den State als Reaktion auf ein Benutzerereignis (wie einen Button-Klick) durch Aufrufen der Setter-Funktion aktualisiert.

Das Verständnis des useState Hooks ist ein entscheidender erster Schritt zur Beherrschung von React. Sie können dieses Muster nun verwenden, um Ihren eigenen React-Komponenten dynamisches, interaktives Verhalten hinzuzufügen.