Kuidas te organiseerite võtmeid loendites Reactiga…

Reactis kasutatakse võtmeid elementide identifitseerimiseks loendites nende renderdamise ajal. See aitab Reactil tõhusalt uuendada kasutajaliidest, määrates, millised elemendid on muutunud, lisandunud või eemaldatud.

Põhiprintsiibid võtmete paigutamisel:

Unikaalsus: Iga võti peab olema unikaalne oma naaberelementide seas ühes loendis.
Stabiilsus: Võti peab jääma stabiilseks sama elemendi jaoks kogu komponendi elutsükli jooksul, isegi korduva renderimise ajal.

Optimaalsed viisid võtmete paigutamiseks:

Andmete unikaalse identifikaatori kasutamine: Kui teie andmetel on stabiilne ja unikaalne ID (näiteks id andmebaasist), kasutage seda võtmena.

// Oletame, et teil on massiiv objektidest unikaalse id-ga
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>
  );
}

See on kõige soovitatavam viis, kuna see tagab stabiilsuse mis tahes andmete muutmisel (järjestuse muutmine, lisamine, kustutamine).

Massivi indeksi kasutamine (ettevaatusega): Ainult väga spetsiifilistel juhtudel, kui:
- Loend on statiline ja ei muutu kunagi.
- Elemente loendis ei ümberpaigutata, ei lisata ega kustutata.
- Loend ei filtreerita.
```
// Ainult juhul, kui items on garanteeritult muutumatu
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Oluline: Indeksi kasutamine võtmena ebastabiilsetes loendites võib põhjustada UI vale käitumise, elementide staatuse kaotamise (näiteks sisestus tekst inputis) või ebaefektiivse renderdamise. React võib taaskasutada elemente valede andmetega, kui võtmed on valesti sobitatud.

Andmete kombinatsiooni põhjal võtme genereerimine: Kui andmetel puudub unikaalne ID, saab luua keerukama võtme, mis põhineb mitmel stabiilsel omadusel. Kuid see on vähem soovitatav kui ühe ID kasutamine.

// Näide: nime ja kuupäeva kombineerimine
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>
  );
}

Kokkuvõte: parim ja ohutum viis on alati kasutada unikaalset ja stabiilset andmete identifikaatorit. Indeksi kasutamine on õigustatud väga harva ja ainult statilistes loendites.

Kuidas te organiseerite võtmeid loendites Reactiga töötades?