State qayerda yashaydi?

Umumiy ko'rinish

State — bu ilovangiz ishlab turganda o'zgarishi mumkin bo'lgan ma'lumot — qidiruv qutisining matni, menyu ochiqmi, savatchadagi elementlar. Erta paydo bo'ladigan keng tarqalgan savol: qaysi component har bir state bo'lagiga egalik qilishi kerak? Yo'l-yo'riq qoidasi oddiy: state'ni u ishlatiladigan joyga imkon qadar yaqin qo'ying, undan yaqinroq emas.

Local state: uni kichik saqlang

Agar faqat bitta component'ga qiymat kerak bo'lsa, uni local saqlang — o'sha yerda useState bilan. Faqat o'zining ochiq/yopiq holatini kuzatib boradigan toggle tugmasiga boshqa hech kim aralashishi shart emas.

function Menu() {
  const [open, setOpen] = useState(false);
  return <button onClick={() => setOpen(!open)}>{open ? "Close" : "Open"}</button>;
}

Ikki component'ga bir xil ma'lumot kerak bo'lganda

Ba'zan ikkita qo'shni (sibling) component qiymat bo'yicha kelishishi kerak. Foydalanuvchi teradigan SearchInput va mos kelganlarni ko'rsatadigan ResultsList'ni tasavvur qiling. Ularning ikkalasiga ham qidiruv matni kerak. Bola qo'shnisiga ma'lumotni to'g'ridan-to'g'ri yubora olmaydi.

Yechim — bu state'ni yuqoriga ko'tarish (lift state up): state'ni ularning eng yaqin umumiy ota'siga — ikkalasini ham o'z ichiga olgan eng yaqin component'ga — ko'chirish. Ota qiymatga egalik qiladi, uni har bir bolaga props (uning inputlari) sifatida beradi va bola otadan uni o'zgartirishni so'rashi uchun function beradi.

Ma'lumotni pastga, o'zgartirish so'rovlarini yuqoriga uzatish

Ma'lumot props orqali pastga oqadi; o'zgartirish so'rovlari functionlar orqali yuqoriga oqadi. Bu bir tomonlama oqim React ilovalarini oldindan aytib bo'ladigan qiladi.

function SearchPage() {
  const [query, setQuery] = useState(""); // parent owns the state
 
  return (
    <div>
      <SearchInput value={query} onChange={setQuery} />
      <ResultsList query={query} />
    </div>
  );
}
 

Endi SearchInput matnga egalik qilmaydi — u value'ni ko'rsatadi va foydalanuvchi terganda onChange'ni chaqiradi. SearchPage query'ni yangilaydi, qayta render qiladi va yangi qiymatni ikkala bolaga ham uzatadi. Ular avtomatik ravishda sinxron qoladi, chunki yagona haqiqat manbai bor.

Umumiy qoida

State'ni local qilib boshlang. Ikkinchi component'ga bir xil qiymat kerak bo'lgan zahoti, uni eng yaqin ulashilgan otaga ko'taring. Agar o'zingizni prop'ni undan foydalanmaydigan ko'plab qatlamlar orqali uzatayotgan holda ko'rsangiz, bu keyinroq Context kabi vositaga murojaat qilishingiz mumkinligining belgisidir — lekin junior suhbatlar uchun local va ko'tarilgan (lifted) state ko'pchilik holatlarni qamrab oladi.

Suhbat maslahatlari

• Qoidani ayting: state'ni ikkita component'ga kerak bo'lguncha local saqlang, so'ngra uni eng yaqin umumiy otaga ko'taring.
• Oqimni tasvirlang: ma'lumot props sifatida pastga ketadi, o'zgartirish so'rovlari functionlar sifatida qaytib yuqoriga keladi (bir tomonlama ma'lumot oqimi).
• "Yagona haqiqat manbai"ga urg'u bering — bitta component har bir state bo'lagiga egalik qiladi, shuning uchun narsalar sinxrondan chiqib keta olmaydi.