Miért kell a lista elemeknek kulcsuk, és miért nem használjuk az indexet?

Question

IT Interview Practice · Accepted Answer

Amikor egy listát renderelsz, a React-nek szüksége van egy módra, hogy tudja **melyik elem melyik** a renderelések között, hogy helyesen tudja újrafelhasználni, átrendezni, beszúrni vagy törölni a DOM csomópontokat. A **`key`** az az identitás. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Miért kockázatos a tömb indexe Az index kulcsként való használata azt mondja a React-nek, hogy "a 0. pozícióban lévő elem ugyanaz az elem, mint előbb" — amely azonnal törött lesz, ha a lista átrendeződik, vagy elölről beszúrsz/törlöd: ```jsx // items: [A, B, C] with keys 0,1,2 // you DELETE A → [B, C], keys become 0,1 // React thinks key 0 (was A) is now B, key 1 (was B) is now C... // so it keeps the wrong DOM state with the wrong item. ``` Valódi tünet: input-ok listája, ahol az egyik sorban való gépelés "ugráskeresés" másik sorra a törlés/rendezés után, mert a React újra felhasználta a rossz ``-ot (és annak belső értékét/fókuszát). ## Szabályok - Használj **stabil, egyedi** id-t az adataidból (`user.id`, slug). - Az index csak **statikus** listára fogadható el, amely soha nem rendeződik át, nem szúr be vagy nem törölhet. - A kulcsoknak egyedinek kell lenniük a **testvérek között** (nem globálisan). A kulcsok egy tipp a rekonciliáció algoritmusnak; helyesen beállítva megőrzik a teljesítményt és az összetevő állapotát.

Miért kockázatos a tömb indexe

Szabályok

Kapcsolódó kérdések