Reaguj useStatehak

React useStateHook pozwala nam śledzić stan w komponencie funkcyjnym.

Stan ogólnie odnosi się do danych lub właściwości, które muszą być śledzone w aplikacji.

ImportuseState

Aby użyć useStatehooka, najpierw musimy importgo do naszego komponentu.

import { useState } from "react";

Zauważ, że dokonujemy destrukturyzacji , ponieważ jest to nazwany eksport useState.react

ZainicjujuseState

Inicjujemy nasz stan, wywołując useStatenasz komponent funkcyjny.

useStateakceptuje stan początkowy i zwraca dwie wartości:

• Aktualny stan.
• Funkcja aktualizująca stan.

import { useState } from "react";

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

Zauważ, że ponownie destrukturyzujemy zwrócone wartości z useState.

Pierwsza wartość, color, to nasz aktualny stan.

Druga wartość, setColor, to funkcja używana do aktualizacji naszego stanu.

Na koniec ustawiamy stan początkowy na pusty ciąg:useState("")

Przeczytaj stan

Możemy teraz dołączyć nasz stan w dowolnym miejscu naszego komponentu.

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'));

Aktualizuj stan

Aby zaktualizować nasz stan, używamy naszej funkcji aktualizacji stanu.

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'));

Co może zawierać

Hook może być używany do useStateśledzenia ciągów, liczb, wartości logicznych, tablic, obiektów i dowolnej ich kombinacji!

Moglibyśmy stworzyć wiele stanów hooków do śledzenia poszczególnych wartości.

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'));

Lub możemy po prostu użyć jednego stanu i zamiast tego dołączyć obiekt!

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'));

Aktualizowanie obiektów i tablic w stanie

Gdy stan jest aktualizowany, cały stan zostaje nadpisany.

Co jeśli chcemy tylko zaktualizować kolor naszego samochodu?

Gdybyśmy tylko zadzwonili setCar({color: "blue"}), usunęłoby to markę, model i rok z naszego stanu.

Możemy użyć operatora rozprzestrzeniania JavaScript, aby nam pomóc.

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'));

Ponieważ potrzebujemy aktualnej wartości stanu, przekazujemy funkcję do naszej setCarfunkcji. Ta funkcja otrzymuje poprzednią wartość.

Następnie zwracamy obiekt, rozkładając previousStatei nadpisując tylko kolor.

import { useState } from "react";

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