Чӣ гуна калидҳоро дар рӯйхатҳо ҳангоми кор бо React…

Дар React, калидҳо барои шенасоии унсурҳо дар рӯйхатҳо ҳангоми рендер истифода мешаванд. Ин кӯмак мекунад, ки React UI-ро самаранок навсозӣ кунад, муайян карда, ки кадом унсурҳо тағир ёфтаанд, илова ё хориҷ шудаанд.

Принсипҳои асосии тақсимоти калидҳо:

Якеҳуқуқӣ: Ҳар як калид бояд дар байни унсурҳои ҳамсоя дар рӯйхат ягона бошад.
Таъмини устуворӣ: Калид бояд барои як унсури муайян дар тамоми давраи ҳаёти компонент устувор боқӣ монад, ҳатто дар вақти рендери такрорӣ.

Роҳҳои оптималӣ барои тақсимоти калидҳо:

Истифодаи шенасоии беназири маълумот: Агар маълумоти шумо ID-и устувор ва беназир дошта бошад (масалан, id аз базаи додаҳо), онро ҳамчун калид истифода баред.
```
// Бигзор, ки шумо массиви объектҳо бо id-и беназир дошта бошед
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>
  );
}
```
Ин усул беҳтарин аст, зеро устувории калидро дар ҳар гуна тағирот дар маълумотҳо (тартиб додан, илова кардан, хориҷ кардан) таъмин мекунад.
Истифодаи индексҳои массив (бо эҳтиёт): Танҳо дар ҳолатҳои махсус, вақте:
- Рӯйхат статик аст ва ҳеҷ гоҳ тағир намеёбад.
- Унсурҳо дар рӯйхат ҳеҷ гоҳ такрор ё тағир намеёбанд, илова ё хориҷ намешаванд.
- Рӯйхат филтр намешавад.
```
// Танҳо агар items кафолат дода шавад, ки ҳеҷ гоҳ тағир намеёбад
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Мухим: Истифодаи индекс ҳамчун калид дар рӯйхатҳои номустаҳкам метавонад ба рафтори нодуруст дар UI, аз даст додани ҳолати унсурҳо (масалан, матн дар input) ё render-кунии номутавозин оварда расонад. React метавонад унсурҳоро бо маълумоти нодуруст дубора истифода барад, бо сабаби нодуруст мутобиқсозии калидҳо.

Генератсияи калид бо истифода аз омехтаи маълумот: Агар маълумотҳо ID-и беназир надошта бошанд, шумо метавонед калиди мураккабро аз чанд хосияти устувор эҷод кунед. Аммо, ин камтар тавсия дода мешавад, нисбат ба истифодаи ID ягона.

// Мисол: омехта кардани номи ва сана
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>
  );
}

Хулоса: роҳи беҳтарин ва бехатар ҳамеша истифодаи идентификатори беназири устувор ва уникалӣ мебошад. Истифодаи индекс дар ҳолатҳои хеле кам ва танҳо барои рӯйхатҳои статикӣ мувофиқ аст.

Чӣ гуна калидҳоро дар рӯйхатҳо ҳангоми кор бо React тартиб медиҳед?