Haken useStatereagieren

Der React useStateHook ermöglicht es uns, den Zustand in einer Funktionskomponente zu verfolgen.

Status bezieht sich im Allgemeinen auf Daten oder Eigenschaften, die in einer Anwendung nachverfolgt werden müssen.

ImportierenuseState

Um den useStateHook zu verwenden, müssen wir importihn zuerst in unsere Komponente einfügen.

import { useState } from "react";

Beachten Sie, dass wir destrukturieren useState, reactda es sich um einen benannten Export handelt.

InitialisierenuseState

Wir initialisieren unseren Zustand, indem useStatewir unsere Funktionskomponente aufrufen.

useStateakzeptiert einen Anfangszustand und gibt zwei Werte zurück:

• Der momentane Zustand.
• Eine Funktion, die den Status aktualisiert.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

Beachten Sie, dass wir erneut die zurückgegebenen Werte von destrukturieren useState.

Der erste Wert, color, ist unser aktueller Zustand.

Der zweite Wert, setColor, ist die Funktion, die verwendet wird, um unseren Status zu aktualisieren.

Zuletzt setzen wir den Anfangszustand auf einen leeren String:useState("")

Zustand lesen

Wir können unseren Zustand jetzt überall in unsere Komponente einfügen.

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Status aktualisieren

Um unseren Status zu aktualisieren, verwenden wir unsere Status-Updater-Funktion.

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Was der Staat halten kann

Der useStateHook kann verwendet werden, um Strings, Zahlen, boolesche Werte, Arrays, Objekte und jede Kombination davon zu verfolgen!

Wir könnten mehrere Status-Hooks erstellen, um einzelne Werte zu verfolgen.

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Oder wir können nur einen Zustand verwenden und stattdessen ein Objekt einschließen!

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Aktualisieren von Objekten und Arrays im Zustand

Wenn der Status aktualisiert wird, wird der gesamte Status überschrieben.

Was ist, wenn wir nur die Farbe unseres Autos aktualisieren möchten?

Wenn wir nur anrufen setCar({color: "blue"})würden, würde dies die Marke, das Modell und das Jahr aus unserem Zustand entfernen.

Wir können den JavaScript-Spread-Operator verwenden, um uns zu helfen.

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Da wir den aktuellen Wert von state benötigen, übergeben wir eine Funktion an unsere setCarFunktion. Diese Funktion erhält den vorherigen Wert.

Wir geben dann ein Objekt zurück, verteilen die previousStateund überschreiben nur die Farbe.

import { useState } from "react";

function KeepCount() {
  const [, ] = useState(0);
}