ReactJS useState Hook: Ein Leitfaden für Anfänger

Einführung

ReactJS, eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, führt Hooks ein, um die Komponentenlogik zu vereinfachen und zu verbessern. Einer der am häufigsten verwendeten Hooks in React ist der useState-Hook, der den Status einer Komponente verwaltet. Wenn Sie verstehen, wie das funktioniert, können Sie das volle Potenzial von React ausschöpfen.

In diesem Leitfaden für Einsteiger erläutern wir, was Hooks sind, wie man den Status mit useState initialisiert und aktualisiert, und tauchen in das Halten und Aktualisieren verschiedener Statustypen ein. Am Ende werden Sie in der Lage sein, den Zustand Ihrer Komponenten sicher zu verwalten. Lasst uns einsteigen!

Was sind Haken?

Haken in Reaktion

Hooks sind Funktionen, die es Ihnen ermöglichen, state und andere React-Funktionen zu verwenden, ohne eine Klassenkomponente zu schreiben. Vor Hooks war die Verwaltung des Komponentenstatus nur innerhalb von Klassenkomponenten möglich. Mit Hooks wie useState können Sie Status zu Funktionskomponenten hinzufügen und sie so vielseitiger machen.

React bietet mehrere Hooks, wie zum Beispiel:

• useState – zum Verwalten des Status.
• useEffect – für Nebeneffekte wie das Abrufen von Daten.
• useContext – zum Verwalten des Kontexts innerhalb Ihrer Anwendung.

Hooks vereinfachen die Zustandsverwaltung und reduzieren den Bedarf an komplexen klassenbasierten Komponenten. Das Schöne an Hooks liegt in ihrer Fähigkeit, die von Ihnen benötigte Funktionalität bereitzustellen und gleichzeitig saubereren und besser lesbaren Code beizubehalten.

So initialisieren Sie useState

Grundlegende Initialisierung

Das Initialisieren von useState in einer Funktionskomponente ist einfach. Zunächst wird der Hook aus React importiert und in Ihrer Komponente aufgerufen. Die Syntax sieht so aus:

import React, { useState } from 'react';

function Counter() {
  // Declare state variable and its updater function
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

Abbauen:

• useState(0) initialisiert den Zustand mit einem Anfangswert von 0.
• count ist die Statusvariable und setCount ist die Funktion, die zum Aktualisieren dieses Status verwendet wird.
• Jedes Mal, wenn auf die Schaltfläche geklickt wird, wird der Status aktualisiert und die Komponente wird mit dem neuen Wert neu gerendert.

So lesen Sie den Status

Zugriff auf den aktuellen Status

Das Lesen des aktuellen Status ist unkompliziert. Sie verwenden einfach die Statusvariable (Count im vorherigen Beispiel) direkt in Ihrem JSX. Da React die Komponente neu rendert, wenn sich der Status ändert, wird der aktualisierte Wert automatisch in der Benutzeroberfläche angezeigt.

Lassen Sie uns unser vorheriges Beispiel optimieren, um zu zeigen, wie wir auf den Status zugreifen können:

Current count: {count}

Dieser Code greift auf den Zählstatus zu und zeigt ihn dynamisch an.

So aktualisieren Sie den Status

Verwenden der State Setter-Funktion

Die Aktualisierung des Status in React erfolgt mithilfe des zweiten Elements von useState, der Setter-Funktion. Diese Funktion übernimmt den aktualisierten Wert und rendert die Komponente mit diesem neuen Status neu.

Hier ist ein Beispiel, wie man einen Zähler erhöht und verringert:

 setCount(count   1)}>Increment
 setCount(count - 1)}>Decrement

React stellt sicher, dass die Änderungen bei jeder Statusaktualisierung nahtlos in der Benutzeroberfläche widergespiegelt werden. Es ist wichtig zu bedenken, dass Statusaktualisierungen in React asynchron erfolgen, was bedeutet, dass Sie den aktualisierten Status nicht immer sofort nach dem Aufruf der Setter-Funktion sehen.

Was kann der Staat halten?

Verschiedene Arten von Werten

State in React kann eine Vielzahl von Datentypen enthalten, darunter:

• Primitive Typen wie Zahlen, Zeichenfolgen und boolesche Werte.
• Objekte und Arrays.
• Nullwerte und undefinierte Werte.

Sehen wir uns Beispiele dafür an:

Einen String im Status halten:

const [name, setName] = useState("John");

Halten eines Arrays im Status:

const [items, setItems] = useState([1, 2, 3]);

Ein Objekt im Zustand halten:

const [user, setUser] = useState({ name: "John", age: 30 });

Mit dem useState-Hook von React können Sie diese verschiedenen Datentypen verwalten. Beim Aktualisieren komplexer Typen wie Objekte und Arrays ist jedoch Vorsicht geboten, wie wir als Nächstes untersuchen werden.

Aktualisieren von Objekten und Arrays im Status

Unveränderliche Updates

Beim Arbeiten mit Objekten oder Arrays in React ist es wichtig, diese unveränderlich zu aktualisieren. React vergleicht verschachtelte Objekte nicht tiefgreifend, sodass die direkte Änderung eines Objekts kein erneutes Rendern auslöst. Stattdessen müssen Sie ein neues Objekt oder ein Array mit den aktualisierten Werten erstellen.

Beispiel: Aktualisieren eines Objekts

const [user, setUser] = useState({ name: "John", age: 30 });

function updateName() {
  setUser(prevState => ({
    ...prevState,
    name: "Doe"
  }));
}

In diesem Beispiel:

• Wir verteilen den vorhandenen Zustand (prevState) mithilfe von ...prevState auf ein neues Objekt.
• Dann ändern wir die Namenseigenschaft, ohne das ursprüngliche Benutzerobjekt zu verändern.

Beispiel: Aktualisieren eines Arrays

const [items, setItems] = useState([1, 2, 3]);

function addItem() {
  setItems(prevItems => [...prevItems, 4]);
}

Hier:

• Wir erweitern das vorherige Array (prevItems) und hängen das neue Element (4) an, wodurch ein neues Array erstellt wird.

FAQ-Bereich

Warum useState anstelle des klassenbasierten Status verwenden?

Hooks wie useState vereinfachen die Zustandsverwaltung innerhalb von Funktionskomponenten und machen den Code im Vergleich zu Klassenkomponenten besser lesbar und übersichtlicher.

Kann useState mehrere Datentypen enthalten?

Ja, useState kann Zeichenfolgen, Zahlen, Arrays, Objekte, boolesche Werte und sogar Null- oder undefinierte Werte enthalten.

Ist die Statusaktualisierung asynchron?

Ja, React aktualisiert den Status stapelweise und Änderungen werden möglicherweise nicht sofort nach dem Aufruf der Setter-Funktion wirksam.

Wie aktualisiere ich komplexe Zustände wie Objekte oder Arrays?

Um eine Veränderung des ursprünglichen Zustands zu vermeiden, erstellen Sie immer eine Kopie des Objekts oder Arrays und aktualisieren Sie es dann unveränderlich mit dem Spread-Operator (...).

Abschluss

Der useState-Hook ist einer der leistungsstärksten und am häufigsten verwendeten Hooks in React. Es hilft Ihnen, den lokalen Status innerhalb funktionaler Komponenten zu verwalten und Ihren React-Code sauberer und effizienter zu gestalten. Unabhängig davon, ob Sie mit einfachen Variablen oder komplexen Objekten und Arrays umgehen, ist das Verständnis der ordnungsgemäßen Verwendung und Aktualisierung des Status der Schlüssel zum Erstellen dynamischer React-Anwendungen. Üben Sie weiter, und schon bald werden Sie die Zustandsverwaltung von React mit Leichtigkeit beherrschen!

Jetzt, da Sie mit useState vom Nullpunkt zum Helden geworden sind, versuchen Sie, es in Ihre Projekte zu integrieren und erleben Sie die Magie von React in Aktion!