Props va State

Props: uzatiladigan ma'lumot

Props ("properties"ning qisqartmasi) — bu ota-component ma'lumotni bolaga pastga uzatish usuli. Ular function argumentlari kabi ishlaydi. Ota ularni atributlar sifatida o'rnatadi, bola esa ularni object sifatida qabul qiladi.

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
function App() {
  return <Greeting name="Ada" />; // passing the prop
}

Bu yerda App name="Ada"'ni yuboradi va Greeting uni props.name sifatida o'qiydi. Qisqaroq kod uchun props'ni to'g'ridan-to'g'ri parametrlarda destructure qilish keng tarqalgan:

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Asosiy qoida: props faqat o'qish uchun (read-only). Bola hech qachon o'z props'ini o'zgartirmasligi kerak — bu ma'lumot ota-componentga tegishli.

State: o'zgaradigan ma'lumot

State — bu component egalik qiladigan va vaqt o'tishi bilan o'zgartira oladigan ma'lumot — masalan, hisoblagichning qiymati, menyu ochiqmi yoki qutiga terilgan matn. State o'zgarganda, React yangi qiymatni ko'rsatish uchun component'ni avtomatik ravishda qayta render qiladi.

State'ni useState hook bilan yaratasiz. Hook — bu maxsus React function (uning nomi use bilan boshlanadi) bo'lib, component'ingizga xususiyat qo'shadi.

import { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

useState(0)'ni ajratib ko'rsatamiz:

• 0 — bu boshlang'ich qiymat (initial value).
• U juftlikni qaytaradi: count (joriy qiymat) va setCount (uni yangilash uchun function).
• setCount(count + 1) chaqirilishi qiymatni yangilaydi va React'ga qayta render qilishni aytadi.

State'ni hech qachon to'g'ridan-to'g'ri o'zgartirmang (count = count + 1 ishlamaydi) — har doim setter function orqali boring, shunda React biror narsa o'zgarganini biladi.

Har birini qachon ishlatish kerak

Qaror qabul qilishning oddiy usuli:

• Props → component'dan tashqaridan keladigan va uning ichida o'zgarmaydigan ma'lumot. Otadan uzatilgan konfiguratsiya.
• State → component egalik qiladigan va foydalanuvchi harakatlari yoki hodisalarga javoban vaqt o'tishi bilan o'zgartirishi kerak bo'lgan ma'lumot.

Masalan, TodoItem o'z text'ini prop sifatida qabul qilishi mumkin (ota ro'yxat tomonidan berilgan), lekin uning done ekanligini state'da kuzatib borishi mumkin (foydalanuvchi bosganda o'zgartiriladi). Agar qiymat hech qachon o'zgarmasa, u state bo'lishi shart emas — oddiy o'zgaruvchi yoki prop yetarli.

Suhbat maslahatlari

• Yo'nalishni tushuntiring: props ota'dan bolaga pastga oqadi va faqat o'qish uchun.
• useState hisoblagichini yozing va [value, setValue] juftligini hamda boshlang'ich argumentni tushuntiring.
• Nima uchun state'ni to'g'ridan-to'g'ri qayta belgilash o'rniga setter'dan (setCount kabi) foydalanish kerakligini ayting.