Reageer useStateHook

Die React useStateHook stel ons in staat om toestand in 'n funksie komponent op te spoor.

Staat verwys gewoonlik na data of eienskappe wat in 'n toepassing opgespoor moet word.

Invoer useState

Om die useStatehaak te gebruik, moet ons importdit eers in ons komponent voeg.

import { useState } from "react";

Let daarop dat ons besig is om te destruktureer useStateomdat reactdit 'n genoemde uitvoer is.

InisialiseeruseState

Ons inisialiseer ons toestand deur useStateons funksiekomponent in te roep.

useStateaanvaar 'n aanvanklike toestand en gee twee waardes terug:

• Die huidige toestand.
• 'n Funksie wat die staat opdateer.

import { useState } from "react";

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

Let op dat ons weer die teruggekeerde waardes van useState.

Die eerste waarde, color, is ons huidige toestand.

Die tweede waarde, setColor, is die funksie wat gebruik word om ons toestand op te dateer.

Laastens stel ons die aanvanklike toestand op 'n leë string:useState("")

Lees Staat

Ons kan nou ons staat enige plek by ons komponent insluit.

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

Dateer staat op

Om ons staat op te dateer, gebruik ons ​​ons staatopdateringsfunksie.

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

Wat kan staat hou

Die useStatehaak kan gebruik word om tred te hou met snare, getalle, booleans, skikkings, voorwerpe en enige kombinasie hiervan!

Ons kan verskeie staatshake skep om individuele waardes op te spoor.

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

Of ons kan net een toestand gebruik en eerder 'n voorwerp insluit!

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

Opdatering van voorwerpe en skikkings in staat

Wanneer staat opgedateer word, word die hele staat oorskryf.

Wat as ons net die kleur van ons motor wil opdateer?

As ons net bel setCar({color: "blue"}), sal dit die handelsmerk, model en jaar uit ons staat verwyder.

Ons kan die JavaScript-verspreidingsoperateur gebruik om ons te help.

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

Omdat ons die huidige waarde van staat nodig het, gee ons 'n funksie in ons setCarfunksie oor. Hierdie funksie ontvang die vorige waarde.

Ons gee dan 'n voorwerp terug, versprei die previousStateen oorskryf slegs die kleur.

import { useState } from "react";

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