useState

React useState Hook

React useState Hook bizga funktsiya komponentlarida holatni (state) kuzatishga imkon beradi.

Holat odatda ilovada kuzatilishi kerak bo'lgan ma'lumotlar yoki xususiyatlarga ishora qiladi.

useState-ni Import Qilish

useState Hook-dan foydalanish uchun avval uni komponentga import qilishimiz kerak.

Misol:

Komponentning yuqori qismida useState Hook-ni import qiling.

import { useState } from 'react';

E'tibor bering, biz useState-ni React-dan destructuring orqali import qilmoqdamiz, chunki bu nomlangan eksport.

Destructuring haqida batafsilroq ma'lumot uchun ES6 bo'limiga qarang.

useState-ni Inicializatsiya Qilish

Holatni useState yordamida inicializatsiya qilamiz.

useState dastlabki holatni qabul qiladi va ikkita qiymatni qaytaradi:

1. Joriy holat.
2. Holatni yangilaydigan funksiya.

Misol:

Holatni funktsiya komponentining yuqori qismida inicializatsiya qiling.

import { useState } from 'react';
 
function FavoriteColor() {
  const [color, setColor] = useState('');
}

E'tibor bering, yana useState-dan qaytarilgan qiymatlarni destructuring orqali olishamiz.

Birinchi qiymat, color, joriy holatimizdir.

Ikkinchi qiymat, setColor, holatni yangilash uchun ishlatiladigan funksiyadir.

Bu nomlar o'zingiz xohlagancha nomlanishi mumkin.

So'ngra, dastlabki holatni bo'sh satrga o'rnatamiz: useState("")

Holatni O'qish

Holatni komponentimizda istalgan joyda ishlatishimiz mumkin.

Misol:

Holat o'zgaruvchisidan render qilingan komponentda foydalaning.

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function FavoriteColor() {
  const [color, setColor] = useState('red');
 
  return <h1>Sevimli rangim {color}!</h1>;
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

Holatni Yangilash

Holatni yangilash uchun holat yangilovchi funksiyamizdan foydalanamiz.

Holatni bevosita yangilash tavsiya etilmaydi. Masalan: color = "red" ishlatilmaydi.

Misol:

Holatni yangilash uchun tugma foydalaning:

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function FavoriteColor() {
  const [color, setColor] = useState('red');
 
  return (
    <>
      <h1>Sevimli rangim {color}!</h1>
      <button type="button" onClick={() => setColor('blue')}>
        Moviy
      </button>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);

Holat Nimalarni Saqlashi Mumkin

useState Hook matnlar, sonlar, booleanlar, massivlar, ob'ektlar va ularning har qanday kombinatsiyalarini kuzatish uchun ishlatilishi mumkin!

Biz bir nechta holat Hooks yaratib, individual qiymatlarni kuzatishimiz mumkin.

Misol:

Bir nechta holat Hooks yarating:

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function Car() {
  const [brand, setBrand] = useState('Ford');
  const [model, setModel] = useState('Mustang');
  const [year, setYear] = useState('1964');
  const [color, setColor] = useState('red');
 
  return (
    <>
      <h1>Meniki {brand}</h1>
      <p>
        Bu {color} {model} {year}-yildan.
      </p>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

Yoki, bitta holatni yaratib, o'rnatilgan ob'ektni ishlatishimiz mumkin!

Misol:

Bitta Hook yaratib, ob'ekt saqlang:

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function Car() {
  const [car, setCar] = useState({
    brand: 'Ford',
    model: 'Mustang',
    year: '1964',
    color: 'red',
  });
 
  return (
    <>
      <h1>Meniki {car.brand}</h1>
      <p>
        Bu {car.color} {car.model} {car.year}-yildan.
      </p>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

Hozir biz bitta ob'ektda holatni kuzatmoqdamiz, shuning uchun komponentni render qilishda ob'ektni va uning xususiyatlarini ko'rsatishimiz kerak. (Masalan: car.brand)

Ob'ektlar va Massivlarni Holatda Yangilash

Holat yangilanganda, butun holat yangilanadi.

Agar faqat mashinamizning rangini yangilamoqchi bo'lsak, nima qilishimiz kerak?

Agar faqat setCar({color: "blue"}) chaqirilsa, bu holatimizdan brand, model va yilni olib tashlaydi.

JavaScriptning spread operatoridan yordam olamiz.

Misol:

Mashinaning faqat rangini yangilash uchun spread operatoridan foydalaning:

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
function Car() {
  const [car, setCar] = useState({
    brand: 'Ford',
    model: 'Mustang',
    year: '1964',
    color: 'red',
  });
 
  const updateColor = () => {
    setCar((previousState) => {
      return { ...previousState, color: 'blue' };
    });
  };
 
  return (
    <>
      <h1>Meniki {car.brand}</h1>
      <p>
        Bu {car.color} {car.model} {car.year}-yildan.
      </p>
      <button type="button" onClick={updateColor}>
        Moviy
      </button>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

Joriy holat qiymatini olishimiz kerak bo'lgani uchun, setCar funksiyasiga funksiya uzatamiz. Bu funksiya oldingi qiymatni oladi.

Keyin ob'ektda oldingi holatni tarqatamiz (spread), va faqat rangni yangilaymiz.