Kaip išdėstote raktus sąrašuose dirbant su React…

React'e raktai naudojami elementų identifikavimui sąrašuose jų atvaizdavimo metu. Tai padeda React efektyviai atnaujinti vartotojo sąsają, nustatant, kurie elementai pasikeitė, buvo pridėti ar ištrinti.

Pagrindiniai raktų išdėstymo principai:

Unikalumas: Kiekvienas raktas turi būti unikalus savo kaimyninių elementų tarpe viename sąraše.
Stabilumas: Raktas turi likti pastovus tam pačiam elementui viso komponento gyvavimo ciklo metu, net ir pakartotinai atvaizduojant.

Optimalūs raktų išdėstymo būdai:

Naudoti unikalų duomenų identifikatorių: Jei jūsų duomenys turi stabilų ir unikalų ID (pavyzdžiui, id iš duomenų bazės), naudokite jį kaip raktą.

// Tarkime, turite masyvą objektų su unikaliu 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>
  );
}

Tai yra labiausiai rekomenduojamas būdas, nes jis užtikrina stabilumą bet kokių duomenų pakeitimų atveju (perrikiavimas, pridėjimas, ištrynimas).

Naudoti masyvo indeksą (atsargiai): Tik labai specifinėse situacijose, kai:
- Sąrašas yra statinis ir niekada nesikeičia.
- Elementai sąraše niekada nėra perrikiuojami, nepridedami ar ištrinami.
- Sąrašas nėra filtruojamas.
```
// Tik jei `items` garantuotai niekada nesikeičia
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Svarbu: Naudoti indeksą kaip raktą nestabiliose sąrašuose gali sukelti netinkamą UI elgesį, elementų būsenos praradimą (pavyzdžiui, teksto įvedimą input'e) arba neefektyvų atvaizdavimą. React gali pakartotinai naudoti komponentus su netinkamais duomenimis dėl neteisingo raktų suderinimo.

Duomenų derinimas pagal kombinaciją: Jei duomenys neturi unikalų ID, galima sukurti sudėtą raktą iš kelių stabiliai veikiančių duomenų savybių. Tačiau tai mažiau pageidautina nei naudoti vieną ID.

// Pavyzdys: vardo ir datos derinimas
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>
  );
}

Santrauka: geriausias ir saugiausias būdas visada yra naudoti unikalų ir stabilų duomenų identifikatorių. Indekso naudojimas yra pateisinamas labai retai ir tik statiniams sąrašams.

Kaip išdėstote raktus sąrašuose dirbant su React?