Kā jūs sakārtojat atslēgas sarakstos, strādājot ar…

React iekšā atslēgas tiek izmantotas, lai identificētu elementus sarakstos to atveidošanas laikā. Tas palīdz React efektīvi atjaunināt lietotāja saskarni, nosakot, kuri elementi ir mainījušies, pievienoti vai dzēsti.

Galvenie principu par atslēgu izvietošanu:

Unikalitāte: Katram atslēgai jābūt unikālai starp saviem kaimiņiem elementiem vienā sarakstā.
Stabilitāte: Atslēga jāpaliek nemainīgai tam pašam elementam visa komponenta dzīves cikla laikā, pat atkārtoti atjaunojot.

Optimālas atslēgu izvietošanas metodes:

Izmantot unikālu datu identifikatoru: Ja jūsu dati satur stabilu un unikālu ID (piemēram, id no datu bāzes), izmantojiet to kā atslēgu.

// Pieņemsim, ka jums ir masīvs ar objektiem ar unikālu 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>
  );
}

Šis ir vislabākā metode, jo nodrošina stabilitāti jebkādu datu izmaiņu gadījumā (pārkārtošana, pievienošana, dzēšana).

Izmantot masīva indeksu (ar piesardzību): Tikai ļoti specifiskos gadījumos, kad:
- Saraksts ir statisks un nekad nemainās.
- Elementi sarakstā nekad netiek pārkārtoti, pievienoti vai dzēsti.
- Saraksts netiek filtrēts.
```
// Tikai tad, ja items garantēti nekad nemainīsies
const items = ['Item 1', 'Item 2', 'Item 3'];

function StaticItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```
Svarīgi: Indeksa izmantošana kā atslēgas nestabilos sarakstos var novest pie nepareiza UI uzvedības, elementu stāvokļa zuduma (piemēram, teksta ievadīšana inputā) vai neefektīva renderēšanas. React var atkārtoti izmantot komponentus ar nepareiziem datiem, ja atslēgas ir nepareizi saskaņotas.

Datu kombinācijas balstīta atslēgas ģenerēšana: Ja datiem nav unikāla ID, var izveidot sarežģītu atslēgu, balstoties uz vairākiem stabilajiem datu īpašībām. Tomēr tas ir mazāk ieteicams nekā vienkārša ID izmantošana.

// Piemērs: vārda un datuma kombinācija
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>
  );
}

Kopsavilkums: vislabāk un drošāk ir vienmēr izmantot unikālu un stabilu datu identifikatoru. Indeksa izmantošana ir pamatota ļoti reti un tikai statiskiem sarakstiem.

Kā jūs sakārtojat atslēgas sarakstos, strādājot ar React?