React ilə işləyərkən siyahılarda açarları necə…

React-də açarlar, siyahılardakı elementləri onların yenidən göstərilməsi zamanı tanımaq üçün istifadə olunur. Bu, React-in istifadəçi interfeysini səmərəli şəkildə yeniləməsinə kömək edir, hansı elementlərin dəyişdiyini, əlavə olunduğunu və ya silindiyini müəyyən etməklə.

Açarların təyin olunması üçün əsas prinsiplər:

Unikalıq: Hər bir açar eyni siyahıdakı qonşu elementlər arasında unikal olmalıdır.
Sabitlik: Açar, komponentin bütün həyat dövrü boyunca eyni element üçün sabit qalmalıdır, hətta yenidən göstərilsə belə.

Optimal açar təyin etmə üsulları:

Məlumatların unikal identifikatorundan istifadə: Əgər məlumatlarınızda stabil və unikal ID (məsələn, id) varsa, onu açar kimi istifadə edin.

// Tutaq ki, unikal ID-ə malik obyektlər massiviniz var
const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Bu üsul ən tövsiyə olunan, çünki məlumatlarda hər hansı dəyişiklik (yenidən sıralama, əlavə etmə, silmə) olsa belə, açarın sabitliyini təmin edir.

Massiv indeksindən istifadə (diqqətlə): Yalnız çox xüsusi hallarda, məsələn:
- Siyahı statikdir və heç vaxt dəyişmir.
- Siyahıdakı elementlər heç vaxt yenidən sıralanmayacaq, əlavə olunmayacaq və ya silinməyəcək.
- Siyahı filtrlənməyəcək.
```
// Yalnız əgər items heç vaxt dəyişməyəcəyinə zəmanət verilibsə
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Vacib: Sabit olmayan siyahılarda indeksdən istifadə etmək UI-də düzgün olmayan davranışlara, elementlərin vəziyyətinin itirilməsinə (məsələn, inputa daxil edilən mətn) və ya səmərəsiz yenidən göstərilməyə səbəb ola bilər. React, açarların düzgün uyğunlaşmaması səbəbindən komponentləri düzgün şəkildə yenidən istifadə edə bilməz.

Məlumatların birləşməsindən istifadə edilən açar yaradılması: Əgər məlumatlarınızda unikal ID yoxdursa, bir neçə stabil xüsusiyyətə əsaslanan birləşmiş açar yarada bilərsiniz. Ancaq bu, tək bir ID istifadə etməkdən daha az üstünlük təşkil edir.

// Nümunə: ad və tarix birləşməsi
const events = [
  { name: 'Party', date: '2023-10-26' },
  { name: 'Meeting', date: '2023-10-27' },
];

function EventList({ events }) {
  return (
    <ul>
      {events.map(event => (
        <li key={`${event.name}-${event.date}`}>{`${event.name} - ${event.date}`}</li>
      ))}
    </ul>
  );
}

Xülasə: ən üstün və təhlükəsiz üsul həmişə unikal və stabil məlumat identifikatorundan istifadə etməkdir. İndeksin istifadəsi çox nadir hallarda və yalnız statik siyahılar üçün məntiqlidir.

React ilə işləyərkən siyahılarda açarları necə sıralayırsınız?