We want to hear from you!Take our 2020 Community Survey!

Komponentlar va Props

Komponentlar sizga UI’ni qayta ishlatiladigan, mustaqil qismlarga bo’lish va har bir qism haqida yakka holda o’ylashingizga imkoniyat beradi. Bu sahifa komponentlar haqida boshlang’ich ma’lumot beradi. Komponent API haqida batafsil ma’lumotni esa bu yerdan topishingiz mumkin.

Tushuncha jihatdan, komponentlar huddi JavaScript funksiyalariga o’xshaydi. Ular (“props” deb atalgan) qandaydir kiritmalarni qabul qiladi va ekranda nima chiqishini tasvirlaydigan React elementlarini qaytaradi.

Funksiya va Klass Komponentlari

Komponent hosil qilishning eng oddiy yo’li bu JavaScript funksiyasini yozish:

function Welcome(props) {
  return <h1>Salom, {props.name}</h1>;
}

Bu funksiya React komponent deb aytishga loyiq chunki u yagona “props” (kengaytmasi inglizcha “properties”) obyekt argumentini ma’lumotlari bilan birga qabul qiladi va React elementini qaytaradi. Biz bunday komponentlarni “funksiya komponentlari” deb ataymiz chunki shundoq ham JavaScript funksiya bo’lgani uchun.

Bundan tashqari siz ES6 klasslaridan foydalanib komponent hosil qilishingiz mumkin:

class Welcome extends React.Component {
  render() {
    return <h1>Salom, {this.props.name}</h1>;
  }
}

Yuqoridagi ikki komponentlar React nuqtai nazaridan bir biriga teng.

Keyingi bo’limlarda funksiya va klass komponentlarini o’ziga hos qo’shimcha xususiyatlari haqida muhokama qilamiz.

Komponentlarni Chizish

Bundan oldin biz faqat DOM teglariga ega bo’lgan React elementlarini ko’rib chiqgan edik:

const element = <div />;

Ammo, React elementlar dasturchi tomonidan yaratilgan komponentlarni ham o’z ichiga olishi mumkin

const element = <Welcome name="Sara" />;

Qachonki React dasturchi yaratgan komponentni element ko’rinishida uchratsa, JSX attributlari va bolalarini shu komponentga bir dona obyekt sifatida uzatadi. Biz bu obyektni “props” deb ataymiz.

Masalan, Ushbu kod sahifada “Salom, Sara” deb chiziladi:

function Welcome(props) {  return <h1>Salom, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;ReactDOM.render(
  element,
  document.getElementById('root')
);

CodePen da sinab koʻrish

Keling bu misolda nimalar bo’lishini xulosa qilamiz:

  1. Biz <Welcome name="Sara" /> elementini ReactDOM.render() orqali chaqiramiz.
  2. React Welcome komponentini chaqirib, {name: 'Sara'}ni prop sifatida uzatadi.
  3. Bizning Welcome komponentimiz esa <h1>Salom, Sara</h1> elementini natija sifatida qaytaradi.
  4. React DOM esa DOMni samarali ravishda <h1>Salom, Sara</h1> deb yangilaydi.

Eslatma: Komponent nomini doim katta harfdan boshlang.

React kichik harf bilan boshlangan komponentlarni DOM teglari sifatida ko’radi.
Masalan,<div /> HTML div teg ni ifodalaydi, lekin <Welcome /> esa komponentni ifodalaydi va Welcome ni shu kodning qamrovida bo’lishini talab qiladi.

Bu konvensiyaga sabab nima ekanligini bilish uchun JSX haqida batafsil o’qishingiz mumkin.

Komponentlarni Tashkil Qilish

Komponentlar o’zining natijasida boshqa komponentlardan tashkil topgan bo’lishi mumkin. Bu bizga bir xil komponentni har xil darajadagi aniqlikda ishlatish imkonini beradi. Tugma, forma, dialog, ekran: bularning hammasi React ilovasida komponent sifatida tasvirlanadi.

Masalan, biz bir nechta Welcome komponentini tashkil qilgan App komponentini yaratishimiz mumkin

function Welcome(props) {
  return <h1>Salom, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />      <Welcome name="Cahal" />      <Welcome name="Edite" />    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

CodePen da sinab koʻrish

Odatda yangi React ilovalari eng yuqori qismida yagona App komponenti turadi. Ammo, siz React ni ishlab turgan ilovangizga qo’shmoqchi bo’lsangiz, siz eng pastdagi Button ga o’xshagan kichik bir komponent orqali boshlab, sekin asta ierarxiyani yuqori qismiga intilgan holda ishlashingiz mumkin.

Komponentlarni Ajratish

Komponentlarni kichik komponentlarga ajratib olishdan qo’rqmang.

Masalan, quyidagi Comment komponentiga e’tibor bering:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

CodePen da sinab koʻrish

Bu komponent o’ziga author (obyekt), text (string) va date (date) larni props sifatida oladi va ijtimoiy tarmoq veb-saytidagi kommentni tasvirlaydi.

Bu elementlar bir birini ichida joylashgani uchun komponentni o’zgartirish muammo bo’lishi mumkin, shu o’rinda bu komponentni alohida qismlarini ham qayta ishlatish muammo. Keling bundan bir nechta komponent ajratib olamiz.

Birinchi bo’lib, Avatarni ajratib olamiz:

function Avatar(props) {
  return (
    <img className="Avatar"      src={props.user.avatarUrl}      alt={props.user.name}    />  );
}

Avatar komponenti Comment komponenti ichida chizilayotganini bilishi shart emas. Shuning uchun biz prop nomini author emas, balki user deb umumiy shaklda nomladik.

Biz komponent ishlatilayotgan joyi nuqtai nazaridan kelib chiqib proplarni nomlashdan ko’ra, prop nomlarini komponentning o’zini nuqtai nazaridan kelib chiqqan holda nomlashni maslahat beramiz.

Endi Comment ni ozgina soddalashtiramiz:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

Undan keyin, foydalanuvchi ismi yonida keladigan Avatar komponentini chizuvchi UserInfo komponentini ajratamiz:

function UserInfo(props) {
  return (
    <div className="UserInfo">      <Avatar user={props.user} />      <div className="UserInfo-name">        {props.user.name}      </div>    </div>  );
}

Bu esa Comment ni bundanda soddalashtirishga imkon beradi:

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

CodePen da sinab koʻrish

Komponentlarni ajratish boshida mayda ishga o’xshab tuyilishi mumkin, lekin katta ilovalarda qayta ishlatiladigan komponentlar to’plamiga ega bo’lish ko’p yengilliklarni yaratadi. Agarda sizning UI’ingizdagi qaysidir bo’lak bir necha marta ishlatiladigan bo’lsa (Button, Panel, Avatar) yoki o’z o’zidan murakkab bo’lsa (App, FeedStory, Comment), shu bo’lakni komponentga ajratish yaxshi nomzod bo’ladi.

Props Faqat O’qish Uchun

Komponentni klass yoki funksiya sifatida hosil qilishingizdan qat’iy nazar, u hech qachon o’zining kiritmalarini (props) o’zgartirmasligi kerak. Quyidagi sum funksiyasiga e’tibor bering:

function sum(a, b) {
  return a + b;
}

Bunday funksiyalar “toza (pure)” funksiya deyiladi chunki ular funksiyaga argument sifatida berilgan kiritmalarini o’zgartirmaydi va doim bu kiritmalarni javobida shundayligicha qaytaradi.

Tepadagi funksiyadan farqli o’laroq, quyidagi funksiya toza hisoblanmaydi (impure) chunki u o’zining kiritmasini o’zgartiradi:

function withdraw(account, amount) {
  account.total -= amount;
}

React juda moslashuvchan lekin bitta qat’iy qoidasi bor:

Hamma React komponentlari kiritmalariga nisbatan toza funksiya sifatida yozilishi kerak

Albatta, ilova UI’lari dinamik hisoblanadi va vaqt o’tgan sari o’zgarishi mumkin. Keyingi bo’limda, biz “holat” (state) tushunchasi bilan tanishib chiqamiz. Holat React komponentlariga vaqt o’tgan sari foydalanuvchi harakatlari, tarmoq javoblari, va boshqa holatlar orqali bu qoidani buzmagan holda reaksiya qilib o’zining qaytarmalarini o’zgartirishga imkon beradi.

Is this page useful?Edit this page