Holat hukini ishlatish

Huklar - React 16.8’ga kiritilgan yangilik. Ular sizga klass yozmasdan turib holat (state) va React’ning boshqa qulayliklarini ishlatishga yordam beradi.

Sizni huklar bilan tanishtirish uchun kirish sahifasida quyidagi misolni keltirgan edik:

import React, { useState } from 'react';

function Example() {
  // "count" deb nomlangan, yangi holat (state) oʻzgaruvchisini yaratish  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Siz {count} marta bosdingiz</p>
      <button onClick={() => setCount(count + 1)}>
        Meni bosing
      </button>
    </div>
  );
}

Biz huklar haqida oʻrganishni ularni klassdagi akslari bilan taqqoslagan holda boshlaymiz.

Klass orqali yozilganida

Agar React’da klasslarni ishlatgan boʻlsangiz, bu kod tanish boʻlishi kerak:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>Siz {this.state.count} marta bosdingiz</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Meni bosing
        </button>
      </div>
    );
  }
}

Holat { count: 0 } kabi boshlanadi va biz this.setState()ni chaqirish orqali, state.count qiymatini oshiramiz. Ushbu misol parchalarini sahifa boʻylab hali koʻp ishlatamiz.

Eslatma

Nimaga haqiqiy misollar qolib shunchaki sanagichni misol tariqasida koʻryapmiz, deb oʻylayotgan boʻlishingiz mumkin. Bu bizni asosiy e’tiborimizni API’ga qaratish yoʻlida qilinmoqda, zero huklarga endigina qadam bosmoqdamiz.

Huklar hamda funksiyaviy komponentlar

Eslatish uchun, funksiyaviy komponentlar React’da ushbu koʻrinishda boʻladi:

const Example = (props) => {
  // Huklarni shu yerda ishlatasiz!
  return <div />;
}

yoki bunday:

function Example(props) {
  // Huklarni shu yerda ishlatasiz!
  return <div />;
}

Siz bularni “holatsiz komponentlar” (“stateless components”) kabi bilishingiz mumkin. Biz hozirda ushbu komponentlarda holatlarni ishlatish imkoniyatini bermoqdamiz, shuning uchun “funksiyaviy komponentlar” nomini afzal koʻramiz.

Huklar klasslarning ichida ishlamaydi. Lekin ularni klass yozmasdan turib ishlatsangiz boʻladi.

Nima oʻzi u, Huk?

Yangi misolimizni useStateni React’ning ichidan chaqirib boshlaymiz:

import React, { useState } from 'react';
function Example() {
  // ...
}

Huk - bu nima? Huk maxsus funksiya boʻlib, React’ning afzalliklaridan foydalanishga (hook into) yordam beradi. Misol uchun, useState orqali funksiyaviy komponentlarga React holatini (state) qoʻsha olasiz. Boshqa huklarni keyinroq oʻrganamiz.

Hukni qachon ishlataman? Aytaylik funksiyaviy komponent yozdingiz, tasavvur qiling unga qanaqadur holat qoʻshmoqchisiz, oldinlari uni klassga oʻgirishga toʻgʻri kelardi. Endi siz funksiyaviy komponentlarni ichida Huk ishlatgan holda buni amalga ohirishingiz mumkin. Biz hozir shunday qilmoqchimiz!

Eslatma:

Komponentning qayerlarida huklarni ishlata olish hamda ishlata olmaslik haqida qoidalarimiz bor. Ular haqida Huklar uchun qoidalar boʻlimida oʻrganamiz.

Holat oʻzgaruvchisini yaratish

Klassda, count holatni 0 deb yaratish uchun this.state ni { count: 0 } ga tenglashtiramiz.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {      count: 0    };  }

Funksiyaviy komponentda, bizda this yoʻq, demakki this.state ni tayinlay yoki oʻqiy olmaymiz. Oʻrniga, useState hukini komponentni ichidan chaqiramiz:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);

useState nima ish bajaradi? U “holat oʻzgaruvchisi”ni yaratadi. Hozir oʻzgaruvchimiz count deb nomlangan va uni boshqacha nomlay olamiz, misol uchun banana. Bu funksiya chaqiruvlari orasida qiymatni saqlab qolishning bir yoʻli — useState klasslardagi this.state ta’minlaydigan qulayliklarni ishlatishning yangi koʻrinishi. Odatda, oʻzgaruvchilar funksiya tugaganidan keyin “unutiladi”, lekin holat oʻzgaruvchilarini React saqlab turadi.

Argument sifatida useStatega nima beramiz? useState() uchun yagona argument - bu boshlangʻich holat qiymati. Klasslardan farqli, holat obyekt boʻlishi shart emas. Yozuv yoki raqamni saqlash biz uchun yetarli boʻlsa, shularnigina saqlay olamiz. Misolimizga qarasak, bizga foydalanuvchi tugmani necha marta bosganligi kerak, shuning uchun boshlangʻich holat qiymatini 0 deb belgiladik. (Agar ikki xil qiymatlarni holatini saqlamoqchi boʻlsak, useState()ni ikki marta chaqira olamiz.)

Bizga useState nima qaytaradi? U qiymatlar juftligini qaytaradi: joriy holat hamda uni yangilaydigan funksiya. Shuning uchun const [count, setCount] = useState() deb yozamiz. Bu klasslardagi this.state.count va this.setStatelarga oʻxshab ketadi, farqi ularni juftlik sifatida olasiz. Biz ishlatgan yozish uslubi (syntax) bilan tanish boʻlmasangiz, sahifaning oxirogʻida bu mavzuga yana qaytamiz.

Endi useState huki nima qilishini bilamiz, bizning misolimiz endi yaxshiroq ma’no kasb etsa kerak:

import React, { useState } from 'react';

function Example() {
  // "count" deb nomanlan holat oʻzgaruvchisini yaratamiz  const [count, setCount] = useState(0);

count deb nomlangan, 0ga teng holat oʻzgaruvchisini yaratamiz. React qayta chizishlar orasida uning joriy qiymatini eslab qoladi va bizni eng yangi qiymat bilan ta’minlaydi. Agar countning qiymatini oʻzgartirmoqchi boʻlsak, setCountni chaqiramiz.

Eslatma

Oʻylashingiz mumkin: nima uchun useStateni createState deb nomlashmagan?

“Create” ozgina noaniq boʻlib qolardi, chunki holat faqatgina komponent chizilganda yaratiladi (“create”). Keyingi chizishlar jarayonida, useState bizga joriy holatni berib turadi. Aks holda bu “holat” (“state”) boʻlmas edi! Nimaga huklar har doim use bilan boshlanishiga boshqa sabab ham bor. Bu haqida Huklar uchun qoidalar boʻlimida oʻrganamiz.

Holatni oʻqish

Klassda joriy countni koʻrsatmoqchi boʻlganimizda, uni this.state.count orqali oʻqiymiz:

  <p>Siz {this.state.count} marta bosdingiz</p>

Funksiyada, biz countni bevosita ishlata olamiz:

  <p>Siz {count} marta bosdingiz</p>

Holatni yangilash

Klassda, count ni yangilash uchun, this.setState()ni chaqirishimiz kerak:

  <button onClick={() => this.setState({ count: this.state.count + 1 })}>    Meni bosing
  </button>

Funksiyada, bizda setCount hamda count oʻzgaruvchi sifatida bor, this ni ishlatishimizga esa hojat yoʻq:

  <button onClick={() => setCount(count + 1)}>    Meni bosing
  </button>

Takrorlash

Qani endi oʻrganganlarimizni qatorma-qator esga olamiz va bilimlarimizni tekshiramiz.

 1:  import React, { useState } from 'react'; 2:
 3:  function Example() {
 4:    const [count, setCount] = useState(0); 5:
 6:    return (
 7:      <div>
 8:        <p>You clicked {count} times</p>
 9:        <button onClick={() => setCount(count + 1)}>10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }

• 1-qator: React’dan useState hukini chaqiramiz. U bizga ichki holat oʻzgaruvchisini saqlashga yordam beradi.
• 4-qator: Example komponenti ichida, yangi holat oʻzgaruvchisini useState hukini chaqirish orqali yaratamiz. U nomlashimiz kerak boʻlgan qiymatlar juftligini qaytaradi. Oʻzgaruvchimiz raqamga doir ma’lumot saqlangani uchun count deb nomlaymiz. U nol qiymatda boshlanishi uchun useState argumenti sifatida 0 yuboramiz. Ikkinchi qaytgan qiymat funksiya hisoblanadi. U countni yangilashda yordam bergani uchun setCount deb nomlaymiz.
• 9-qator: Foydalanuvchi tugmani bosganida, setCountni qiymatini oshirgan holda chaqiramiz. Bundan keyin, React countning yangi qiymati bilan Example komponentini qayta chizadi.

Bir qarashda juda ham murakkab tuyilishi mumkin. Lekin, shoshilmang! Ta’rifdan chalkashib ketgan boʻlsangiz, kodni qayta tepadan pastga qarab oʻqib chiqing. Klasslardagi holat (state) qanday ishlashini unutishingizni soʻragan boʻlardik, shundan soʻng kodga yangicha nigoh bilan qaray olasiz, bu ish beradi.

Maslahat: Toʻrtburchak qavslar nimaga kerak?

Holat oʻzgaruvchilarini yaratgandagi toʻrtburchak qavslarni payqagan boʻlsangiz kerak:

  const [count, setCount] = useState(0);

Chap tomondagi nomlarni React’ning API’yiga aloqasi yoʻq. Xohlagan nomingizni qoʻyishingiz mumkin:

  const [fruit, setFruit] = useState('banana');

Bu yozish uslubi “massiv tarqatilishi” (“array destructuring) deb ataladi. Bu shuni anglatadiki, yangi ikkita oʻzgaruvchilar boʻlmish fruit va setFruitlarni yaratmoqdamiz, qaysiki fruit aslida useState dan qaytarilgan massivning birinchisi hisoblanadi, shu oʻrinda setFruit qiymatning ikkinchisidir. Kodni quyidagicha ham yozsak boʻladi:

  var fruitStateVariable = useState('banana'); // Juftlik qaytariladi
  var fruit = fruitStateVariable[0]; // Juftlikni birinchisi
  var setFruit = fruitStateVariable[1]; // Juftlikni ikkinchisi

useState orqali holat oʻzgaruvchisini yaratganimizda, u juftlik qaytaradi — ikki qismli massiv. Birinchi qismi joriy qiymat, ikkinchisida shu qiymatni oʻzgartiruvchi funksiya mavjud. Bu juftlik oʻziga xos ma’noga kasb eta oladi, [0] hamda [1] orqali ularni olish chalkashtiruvchi boʻlishi mumkin. Shuning uchun yozish uslubi massiv tarqatilishi turidan foydalanamiz.

Eslatma

React qanday qilib useState qaysi komponentga tegishli ekanligini biladi deb qiziqayotgan boʻlishingiz mumkin, axir React’ga this kabi hech narsa berib yubormayapmiz. Bu savolingizga va boshqa koʻplab savollaringizga FAQ boʻlimida javob olishingiz mumkin.

Maslahat: Bir qancha holat oʻzgaruvchilarini ishlatish

Holat oʻzgaruvchilarini juftlik [something, setSomething] sifatida yaratish juda qulay, chunki bu bilan kerak boʻlsa har xil nomli, bittadan koʻp holat oʻzgaruvchilarini yarata olamiz:

function ExampleWithManyStates() {
  // Bir necha holat oʻzgaruvchilarini yaratamiz!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

Yuqoridagi komponentda, bizda age, fruit va todos ichki oʻzgaruvchilar bor va ularni birma bir yangilay olamiz:

  function handleOrangeClick() {
    // this.setState({ fruit: 'orange' }) ga oʻxshash
    setFruit('orange');
  }

Bir nechta holat oʻzgaruvchilarini ishlatishingiz shart emas. Holat oʻzgaruvchilari obyekt yoki massivlarni oʻzida saqlay oladi, anglashiladiki bir-biriga bogʻliq ma’lumotlarni guruhlasangiz boʻladi. Biroq bunda, oʻzgaruvchini klasslardagi this.setState kabi birlashtirilmaydi, balki almashtiriladi.

Holat oʻzgaruvchilarini bir-biridan ajratish toʻgʻrisida maslahatlarga FAQ’da toʻxtalib oʻtganmiz.

Keyingi qadamlar

Ushbu sahifada React tomonidan taqdim etilayotgan useState nomli huk haqida oʻrgandik. Yana ba’zi paytlarda uni “holat huki” deb ham nomlaymiz. U React’ning funksiyaviy komponentlariga ichki holat qoʻshib beradi — bunaqasi hali boʻlmagan.

Biz yana huklar oʻzi nima ekanligi haqida ham birqancha bilimlarga ega boʻldik. Huk maxsus funksiya boʻlib, React’ning afzalliklarini funksiyaviy komponentlarda ishlatishga yordam beradi. Ularning nomlari use bilan boshlanadi, hali biz koʻrmagan huklar ham bor.

Qani endi useEffect hukini oʻrganishga kirishamiz. Ushbu huk klasslardagi hayotiy jarayon metodlariga oʻxshaydi. Hamda sizga komponent ichida tashqi ta’sir koʻrsatishga yordam beradi.