Gancio di useStatereazione

Il React useStateHook ci consente di tracciare lo stato in un componente di funzione.

Lo stato si riferisce generalmente a dati o proprietà che devono essere monitorati in un'applicazione.

ImportareuseState

Per usare useStateHook, dobbiamo prima importinserirlo nel nostro componente.

import { useState } from "react";

Si noti che stiamo destrutturando poiché si useStatetratta reactdi un'esportazione denominata.

Inizializzare useState

Inizializziamo il nostro stato richiamando useStateil nostro componente funzione.

useState accetta uno stato iniziale e restituisce due valori:

• Lo stato attuale.
• Una funzione che aggiorna lo stato.

import { useState } from "react";

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

Si noti che, ancora una volta, stiamo destrutturando i valori restituiti da useState.

Il primo valore, color, è il nostro stato attuale.

Il secondo valore, setColor, è la funzione utilizzata per aggiornare il nostro stato.

Infine, impostiamo lo stato iniziale su una stringa vuota: useState("")

Leggi Stato

Ora possiamo includere il nostro stato ovunque nel nostro componente.

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

Stato di aggiornamento

Per aggiornare il nostro stato, utilizziamo la nostra funzione di aggiornamento dello stato.

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

Cosa può contenere lo stato

L' useStateHook può essere utilizzato per tenere traccia di stringhe, numeri, booleani, array, oggetti e qualsiasi combinazione di questi!

Potremmo creare più hook di stato per tenere traccia dei valori individuali.

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

Oppure possiamo usare solo uno stato e includere invece un oggetto!

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

Aggiornamento di oggetti e array nello stato

Quando lo stato viene aggiornato, l'intero stato viene sovrascritto.

E se volessimo solo aggiornare il colore della nostra auto?

Se solo chiamassimo setCar({color: "blue"}), questo rimuoverebbe la marca, il modello e l'anno dal nostro stato.

Possiamo usare l'operatore di diffusione JavaScript per aiutarci.

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

Poiché abbiamo bisogno del valore corrente di state, passiamo una funzione nella nostra setCarfunzione. Questa funzione riceve il valore precedente.

Restituiamo quindi un oggetto, diffondendo previousStatee sovrascrivendo solo il colore.

import { useState } from "react";

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