Ako usporadúvate kľúče v zoznamoch pri práci s…

V Reacte sa kľúčmi sa používajú na identifikáciu prvkov v zoznamoch pri ich vykresľovaní. Pomáha Reactu efektívne aktualizovať používateľské rozhranie tým, že určuje, ktoré prvky sa zmenili, pridali alebo odstránili.

Hlavné zásady rozmiestňovania kľúčov:

Jedinečnosť: Každý kľúč musí byť jedinečný medzi svojimi susednými prvkami v zozname.
Stabilita: Kľúč musí zostať konštantný pre ten istý prvok počas celého životného cyklu komponentu, aj pri opätovnom vykreslení.

Optimálne spôsoby rozmiestňovania kľúčov:

Použitie jedinečného identifikátora dát: Ak vaše dáta majú stabilný a jedinečný ID (napríklad id z databázy), použite ho ako kľúč.

// Predpokladajme, že máte pole objektov s unikátnym 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>
  );
}

Toto je najviac odporúčaný spôsob, pretože zabezpečuje stabilitu kľúča pri akýchkoľvek zmenách v dátach (preusporiadanie, pridanie, odstránenie).

Použitie indexu poľa (s opatrnosťou): Len v veľmi špecifických prípadoch, keď:
- Zoznam je statický a nikdy sa nemení.
- Prvky v zozname sa nikdy nepreusporiadajú, nepridávajú alebo neodstraňujú.
- Zoznam sa nefiltruje.
```
// Len ak sú items garantovane nikdy nemenné
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Dôležité: Použitie indexu ako kľúča pri nestabilných zoznamoch môže viesť k nesprávnemu správaniu UI, strate stavu prvkov (napríklad, zadávaného textu v inpute), alebo neefektívnemu renderovaniu. React môže znovu použiť komponenty s nesprávnymi dátami kvôli nesprávnemu zodpovedaniu kľúčov.

Generovanie kľúča na základe kombinácie dát: Ak dáta nemajú jedinečný ID, môžete vytvoriť zložený kľúč na základe niekoľkých stabilných vlastností dát. To je však menej preferované ako použitie jedného ID.

// Príklad: kombinovanie mena a dátumu
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>
  );
}

Zhrnutie: preferovaným a bezpečným spôsobom je vždy použitie jedinečného a stabilného identifikátora dát. Použitie indexu je oprávnené veľmi zriedka a len pre statické zoznamy.

Ako usporadúvate kľúče v zoznamoch pri práci s Reactom?