React useState hooki
React useState Hook funksiya componentidagi holatni kuzatish imkonini beradi.
State odatda ilovada kuzatilishi kerak bo‘lgan ma’lumotlar yoki xususiyatlarni anglatadi.
Import useState
useState hookidan foydalanish uchun avval uni componentimizga import kiritishimiz kerak.
Misol:
Componentingizning yuqori qismida useState Hook-ni import qiling.
import { useState } from "react";
E’tibor bering, biz react dan useState ni destrukturizatsiya orqali ajratib olmoqdamiz (destructuring), chunki u nomli eksport hisoblanadi.
Initialize useState
Funksiya componentimizdagi useState ni chaqirish orqali holatimizni ishga tushiramiz.
useState dastlabki holatni qabul qiladi va ikkita qiymatni qaytaradi:
- Hozirgi holat.
- Holatni yangilaydigan funksiya.
Misol:
Funksiya componentining yuqori qismidagi holatni ishga tushiring.
import { useState } from "react";
function FavoriteColor() {
const [color, setColor] = useState("red");
}
E’tibor bering, biz useState-dan qaytarilgan qiymatlarni qayta tuzatmoqdamiz.
Birinchi qiymat, color , bizning hozirgi holatimiz.
Ikkinchi qiymat, setColor, bizning holatimizni yangilash uchun ishlatiladigan funksiyadir.
Nihoyat, biz boshlang‘ich holatni "qizil" ga o‘rnatdik: useState("red")
Stateni o‘qish
Endi biz stateni componentimizning istalgan joyiga kiritishimiz mumkin.
Misol:
Ko‘rsatilgan componentda holat o‘zgaruvchisidan foydalaning.
import { useState } from 'react';
import { createRoot } from 'react-dom/client';
function FavoriteColor() {
const [color, setColor] = useState("red");
return <h1>My favorite color is {color}!</h1>
}
createRoot(document.getElementById('root')).render(
<FavoriteColor />
);
Stateni yangilash
Statemizni yangilash uchun biz stateni yangilash funksiyasidan foydalanamiz.
Misol:
Holatni yangilash uchun holatni yangilash funksiyasidan foydalaning:
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
Biz hech qachon holatni to‘g‘ridan-to‘g‘ri yangilamasligimiz kerak. Masalan: color = "blue" ruxsat berilmaydi.
Misol:
Holatni yangilash uchun tugmani ishlating:
import { useState } from 'react';
import { createRoot } from 'react-dom/client';
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
</>
)
}
createRoot(document.getElementById('root')).render(
<FavoriteColor />
);
State nimani saqlashi mumkin?
useState Hookdan stringlar, raqamlar, mantiqiy qiymatlar, massivlar, obyektlar va ularning har qanday kombinatsiyasini kuzatish uchun foydalanish mumkin!
Biz individual qadriyatlarni kuzatish uchun bir nechta holat hooklarini yaratishimiz mumkin.
Misol:
Bir nechta holat hooklarini yarating:
import { useState } from 'react';
import { createRoot } from 'react-dom/client';
function MyCar() {
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>
</>
)
}
createRoot(document.getElementById('root')).render(
<MyCar />
);
Yoki biz faqat bitta holatdan foydalanishimiz va uning o‘rniga obyektni kiritishimiz mumkin!
Misol:
Obyektni ushlab turadigan bitta hook yarating:
import { useState } from 'react';
import { createRoot } from 'react-dom/client';
function MyCar() {
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>
</>
)
}
createRoot(document.getElementById('root')).render(
<MyCar />
);
car.brandHolatdagi obyektlar va massivlarni yangilash
State yangilanganda, butun state ustiga yoziladi.
Agar biz faqat mashinamizning rangini yangilashni xohlasak nima bo‘ladi?
Agar biz faqat setCar({color: "blue"}) chaqirsak, bu brend, model va yilni statemizdan olib tashlaydi.
Buning uchun JavaScript spread operatoridan (...) foydalanishimiz mumkin.
Misol:
Faqat avtomobil rangini yangilash uchun JavaScript spread operatoridan (...) foydalaning:
const updateColor = () => {
setCar(previousState => {
return { ...previousState, color: "blue" }
});
}
Bizga holatning joriy qiymati kerakligi sababli, biz setCar funksiyamizga funksiyani o‘tkazamiz. Bu funksiya oldingi qiymatni oladi.
Keyin biz obyektni qaytaramiz, previousState yoyib, faqat rangning ustiga yozamiz.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!