Roʻyxatlar va kalitlar

Keling, avval roʻyxatlarni JavaScriptda qanday oʻzgartirishni koʻramiz.

Quyidagi kodda, map() funksiyasi yordamida numbers massivini olib, qiymatlarini ikkiga koʻpaytirib boshqa doubled oʻzgaruvchisiga oʻtkazyapmiz va loglayapmiz:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);

Bu kod konsolga [2, 4, 6, 8, 10]larni chiqaradi.

Reactʼda, massivlarni elementlar jamlanmasiga oʻzgartirish ham deyarli bir xil.

Bir nechta komponentlarni chizish

Elementlar jamlanmasini yaratib, jingalak qavslar {} yordamida JSXʼni ichiga qoʻshib yubora olasiz.

Quyida, JavaScriptʼdagi map() funksiyasi yordamida numbers massivi ichidan yurib chiqamiz. Har bir narsa uchun <li> elementini qaytaramiz. Oxirida, elementlar jamlanmasini listItems nomli oʻzgaruvchiga joylaymiz:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>  <li>{number}</li>);

So’ngra, listItems massivini <ul> elementi ichiga joylashtiramiz:

<ul>{listItems}</ul>

CodePenʼda ochish

Bu kod birdan beshgacha boʻlgan sonlarni ekranga chiqazib beradi.

Oddiy roʻyxat komponenti

Odatda roʻyxatlarni komponent ichida chizasiz.

Oldingi misolni numbers massivini qabul qilib elementlar jamlanmasini qaytaradigan qilib qayta yozsak boʻladi.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>    <li>{number}</li>  );  return (
    <ul>{listItems}</ul>  );
}

const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);

Ushbu kodni ishga tushirganingizda, roʻyxat elementlari uchun kalit (key) berib yuborish kerakligi haqida ogohlantirish olasiz. “key” (kalit) - bu yozuv (string) qabul qiladigan maxsus kiritma (prop). Bu nima uchun kerakligi haqida keyingi boʻlimda oʻrganamiz.

Qani endi roʻyxatdagi elementlarga numbers.map() ichida key kiritmasini (prop) qoʻshib, xatolikni toʻgʻirlaylik.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

CodePenʼda ochish

Kalitlar

Kalitlar Reactʼga qaysi narsalar oʻzgargani, qoʻshilgani yoki olib tashlangani haqida aytib turadi. Kalitlar massiv ichidagi elementlarga bir-birlaridan farqni turgʻun saqlab turishlari uchun kerak:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>    {number}
  </li>
);

Kalit tanlashning eng yaxshi yoʻli narsani sheriklari ichida ajratib turadigan yozuvni (string) ishlatish. Koʻpincha maʼlumotlaringizdagi IDʼlarni kalit (key) sifatida ishlatasiz:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>    {todo.text}
  </li>
);

Narsalarni chizish uchun turgʻun ID yoʻq paytlarda, narsaning turgan oʻrni sonini (index) oxirgi chora sifatida ishlatishingiz mumkin:

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs  <li key={index}>    {todo.text}
  </li>
);

Narsalarni joyi oʻzgarishi mumkin boʻlgan hollarda, turgan oʻrnini sonini (index) ishlatishni maslahat bermaymiz. Bu chaqqonlikka (performance) yomon taʼsir koʻrsatishi yoki komponent holatlari bilan muammo kelib chiqishi mumkin. Robin Pokorni tomonidan yozilgan maqolada, turgan oʻrni sonini kalit sifatida ishlatishni yomon tomonlari haqida chquur yoritilgan. Agar biror kalit berib yubormasangiz, React oʻzi ham turgan oʻrnini kalit sifatida ishlatadi.

Agar qiziqsangiz, bu yerda kalitlar nima uchun kerakligi haqida chuqurroq koʻproq narsa oʻqishingiz mumkin.

Komponentlarni kalitlar yordamida ajratish

Kalitlar faqat massivlar bilan ishlaganda kerak boʻladi.

Masalan, agar ListItem degan komponent ajratib olsangiz, kalitni ListItem ichidagi <li> elementiga emas, balki <ListItem />da qoldirishingizga toʻgʻri keladi.

Misol: Kalitni notoʻgʻri ishlatilishi

function ListItem(props) {
  const value = props.value;
  return (
    // Notoʻgʻri! Bu yerda kalit (key) kiritmasi kerak emas:    <li key={value.toString()}>      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Notoʻgʻri! Kalit (key) kiritmasi bu yerda yozilishi kerak edi:    <ListItem value={number} />  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

Misol: Kalitni toʻgʻri ishlatilishi

function ListItem(props) {
  // Toʻgʻri! Bu yerda kalit (key) kiritmasi kerak emas:  return <li>{props.value}</li>;}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Toʻgʻri! Kalit (key) kiritmasi massiv ichida ishlatilishi kerak:    <ListItem key={number.toString()} value={number} />  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

CodePenʼda ochish

Bitta osongina qoida bor, map() ichidagi elementlarga kalitlar kerak.

Kalitlar sheriklarinikidan boshqacha boʻlishi kerak

Bir massiv ichidagi kalitlar bir-biridan farqlanishi kerak holos. Kalitlar umumiy olib qaraganda har xil boʻlishi shart emas. Yaʼni, boshqa-boshqa massivlarni yaratishda bir xil kalitlarni qayta ishlata olamiz:

function Blog(props) {
  const sidebar = (    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>    <div key={post.id}>      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}      <hr />
      {content}    </div>
  );
}

const posts = [
  {id: 1, title: 'Salom dunyo', content: 'Reactʼni oʻrganishga xush kelibsiz!'},
  {id: 2, title: 'Oʻrnatish', content: 'Reactʼni npm orqali oʻrnata olasiz.'}
];

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Blog posts={posts} />);

CodePenʼda ochish

Kalitlar React uchun ishoralar kabidir, yaʼni ular komponent ichiga berib yuborilmaydi. Agar sizga oʻsha qiymat kerak boʻlib qolsa, boshqa kiritma sifatida berib yuboring:

const content = posts.map((post) =>
  <Post
    key={post.id}    id={post.id}    title={post.title} />
);

Yuqoridagi misolda, Post komponenti props.idni oʻqiy oladi, props.keyni emas.

JSX ichida map() bilan ishlash

Yuqoridagi misollarda, listItems oʻzgaruvchisini yaratib, uni JSX ichiga berib yubordik:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>    <ListItem key={number.toString()}              value={number} />  );  return (
    <ul>
      {listItems}
    </ul>
  );
}

JSX hohlagan ifodani jingalak qavslar ichiga joylashga ruxsat beradi va map() qaytargan javobni bir qatorda yozib keta olamiz:

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>        <ListItem key={number.toString()}                  value={number} />      )}    </ul>
  );
}

CodePenda ochish

Baʼzida bu yaxshiroq kod yozishga yordam beradi, biroq bu yozuv uslubi ham suistemol qilinishi mumkin. JavaScriptʼdagidek, kod yaxshi oʻqilishi uchun alohida oʻzgaruvchi ishlatish sizga bogʻliq. Eslab qolingki, agar map() qaytaradigan element kattarib ketsa, yangi komponent yaratish yaxshi yechim boʻlishi mumkin.