Reagovat useStateHook

React useStateHook nám umožňuje sledovat stav ve funkční komponentě.

Stav obecně odkazuje na data nebo vlastnosti, které je třeba v aplikaci sledovat.

Import useState

Abychom mohli useStateHook používat, musíme importjej nejprve začlenit do naší komponenty.

import { useState } from "react";

Všimněte si, že provádíme destrukturaci useStatez react, protože jde o pojmenovaný export.

InicializovatuseState

Náš stav inicializujeme voláním useStatenaší funkční komponenty.

useStatepřijímá počáteční stav a vrací dvě hodnoty:

• Současný stav.
• Funkce, která aktualizuje stav.

import { useState } from "react";

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

Všimněte si, že opět ničíme vrácené hodnoty z useState.

První hodnota, color, je náš současný stav.

Druhá hodnota, setColor, je funkce, která se používá k aktualizaci našeho stavu.

Nakonec nastavíme počáteční stav na prázdný řetězec:useState("")

Přečtěte si Stát

Nyní můžeme náš stav zahrnout kamkoli do naší komponenty.

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

Aktualizovat stav

K aktualizaci našeho stavu používáme naši funkci aktualizace stavu.

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 může stát držet

useStateHook lze použít ke sledování řetězců, čísel, booleanů, polí, objektů a jakékoli jejich kombinace !

Mohli bychom vytvořit více stavových háčků pro sledování jednotlivých hodnot.

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

Nebo můžeme použít pouze jeden stav a místo něj zahrnout objekt!

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

Aktualizace objektů a polí ve stavu

Při aktualizaci stavu se celý stav přepíše.

Co když chceme aktualizovat pouze barvu našeho auta?

Pokud bychom zavolali pouze setCar({color: "blue"}), odstranili bychom značku, model a rok z našeho státu.

K tomu nám může pomoci operátor šíření JavaScriptu.

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

Protože potřebujeme aktuální hodnotu stavu, předáme funkci do naší setCarfunkce. Tato funkce obdrží předchozí hodnotu.

Poté vrátíme objekt, rozprostřeme previousStatea přepíšeme pouze barvu.

import { useState } from "react";

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