Zakaj potrebujejo elementi seznama ključ, in zakaj ne uporabiti indeksa?

Question

Accepted Answer

Ko renderirate seznam, React potrebuje način, da ve **kateri element je kateri** med rendingi, da lahko pravilno ponovno uporabi, preurediti, vstavi ali izbriše DOM vozlišča. **`key`** je ta istovetnost. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Zakaj je indeks matrike tvegan Uporaba indeksa kot ključa React-u pove "element na poziciji 0 je isti element kot prej" — kar se zlomi takoj, ko se seznam preurediti ali vstavite/izbrišete s spredaj: ```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. ``` Previ simptom: seznam vnosnih polj, kjer je pisanje v eno vrstico "preskoči" na drugo po brisanju/sortiranju, ker je React ponovno uporabil napačen `` (in njegovo notranjo vrednost/fokus). ## Zakaj je to pomembno - Uporabite **stabilen, edinstven** id iz vaših podatkov (`user.id`, slug). - Indeks je sprejemljiv **samo** za statičen seznam, ki se nikoli ne preurediti, ne vstavi ali izbriše. - Ključi morajo biti edinstevni med **sorodniki** (ne globalno). Klučem so namig za algoritem usklajevanja; pravilna konfiguracija ohranja tako zmogljivost kot pravilno stanje komponente.