Tepki useStateKancası

React useStateHook, bir fonksiyon bileşenindeki durumu izlememizi sağlar.

Durum genellikle bir uygulamada izlenmesi gereken verileri veya özellikleri ifade eder.

İçe aktarmakuseState

useStateHook'u kullanmak için önce importonu bileşenimize eklememiz gerekiyor.

import { useState } from "react";

Adlandırılmış bir dışa aktarma olduğu useStateiçin yok ettiğimize dikkat edin .react

başlatuseState

useStateFonksiyon bileşenimizi çağırarak durumumuzu başlatıyoruz.

useStatebir başlangıç ​​durumunu kabul eder ve iki değer döndürür:

• Şu anki durum.
• Durumu güncelleyen bir işlev.

import { useState } from "react";

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

Tekrar dikkat edin, döndürülen değerleri useState.

İlk değer, color, mevcut durumumuzdur.

İkinci değer, setColordurumumuzu güncellemek için kullanılan fonksiyondur.

Son olarak, ilk durumu boş bir dizeye ayarladık:useState("")

Durumu Oku

Artık durumumuzu bileşenimizin herhangi bir yerine dahil edebiliriz.

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

Durumu Güncelle

Durumumuzu güncellemek için durum güncelleyici fonksiyonumuzu kullanıyoruz.

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

Devlet Ne Tutabilir

Kanca , useStatedizileri, sayıları, booleanları, dizileri, nesneleri ve bunların herhangi bir kombinasyonunu takip etmek için kullanılabilir!

Bireysel değerleri izlemek için birden çok durum Kancası oluşturabiliriz.

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

Veya sadece bir durumu kullanabilir ve bunun yerine bir nesne ekleyebiliriz!

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

Durumdaki Nesneleri ve Dizileri Güncelleme

Durum güncellendiğinde, tüm durumun üzerine yazılır.

Ya sadece arabamızın rengini güncellemek istersek?

Sadece arasaydık setCar({color: "blue"})marka, model ve yılı devletimizden kaldırırdı.

Bize yardımcı olması için JavaScript yayılma operatörünü kullanabiliriz.

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

Halihazırdaki durum değerine ihtiyacımız olduğu için, fonksiyonumuza bir fonksiyon geçiriyoruz setCar. Bu fonksiyon önceki değeri alır.

Daha sonra bir nesneyi döndürürüz, yayar previousStateve yalnızca rengin üzerine yazarız.

import { useState } from "react";

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