Komponent qurish

Umumiy ko'rinish

Ko'pchilik React componentlari bir xil retseptga amal qiladi: props kiradi, local state o'zgaradigan narsalarni ushlab turadi, event handler o'sha state'ni yangilaydi va siz ikkalasidan ham UI render qilasiz. Bir marta bu shaklni ko'rganingizdan so'ng, deyarli har qanday kichik component'ni qura olasiz. Keling, Counter'ni noldan quramiz.

1. Props kiradi

Props — bu ota sizning component'ingizga uzatadigan qiymatlar, xuddi function argumentlari kabi. Biz step prop'ini qabul qilamiz, shunda ota har bir bosish qancha qo'shishini hal qila oladi.

function Counter({ step = 1 }) {
  // step defaults to 1 if the parent doesn't pass it
}

2. useState bilan local state

State — bu component egalik qiladigan va vaqt o'tishi bilan o'zgartira oladigan ma'lumot. useState sizga joriy qiymatni va uni yangilash uchun function beradi. O'sha yangilash function'ini chaqirish React'ga yangi qiymat bilan qayta render qilishni aytadi.

import { useState } from "react";
 
function Counter({ step = 1 }) {
  const [count, setCount] = useState(0); // start at 0
}

useState(0) juftlikni qaytaradi: count (hozirgi qiymat) va setCount (uni qanday o'zgartirasiz). Biz ularni array destructuring bilan qayta nomlaymiz.

3. Event handler

Event handler — bu foydalanuvchi qiladigan biror narsaga, masalan bosishga javoban ishga tushadigan function. U joriy state'ni o'qiydi va setter'ni chaqiradi. E'tibor bering, biz count++ emas, count + step ishlatamiz — siz hech qachon state'ni to'g'ridan-to'g'ri o'zgartirmaysiz.

function Counter({ step = 1 }) {
  const [count, setCount] = useState(0);
 
  function handleClick() {
    setCount(count + step);
  }
}

4. Render

Nihoyat, JSX qaytaring. Handler'ni tugmaning onClick'iga ulang va state'ni ko'rsating. E'tibor bering, onClick={handleClick} function'ni uzatadi — qavslarsiz, aks holda u render paytida darhol ishga tushardi.

function Counter({ step = 1 }) {
  const [count, setCount] = useState(0);
 
  function handleClick() {
    setCount(count + step);
  }
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick

Ota uni har qanday tag kabi ishlatadi: <Counter step={5} />.

Xuddi shu to'rt qadam Toggle'ni quradi: state boolean, handler uni setOn(!on) bilan aylantiradi va siz "On" yoki "Off" render qilasiz. State har o'zgarganda, React function'ingizni qayta ishga tushiradi va ekranni siz uchun yangilaydi.

Suhbat maslahatlari

• Retseptni ovoz chiqarib bayon qiling: props kiradi, useState bilan state, setter'ni chaqiradigan handler, ikkalasidan render.
• State'ni setter (setCount(...)) orqali yangilang, hech qachon o'zgaruvchini mutate qilib emas — bu klassik yangi boshlovchi xatosi.
• Handlerlarni reference bo'yicha uzating: onClick={handleClick}, onClick={handleClick()} emas.