Kodėl sąrašo elementams reikalingas key, ir kodėl nenaudoti indekso?

Question

IT Interview Practice · Accepted Answer

Kai React nuskaitote sąrašą, jam reikia žinoti **kuris elementas yra kuris** tarp nuskaitymų, kad galėtų teisingai panaudoti, perrikioti, įterpti arba ištrinti DOM mazgus. **`key`** yra ta tapatybė. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Kodėl masyvo indeksas yra rizikinga Naudojant indeksą kaip key, React'ui sakote "elementas pozicijoje 0 yra tas pats elementas kaip anksčiau" — kas sulaužo iš karto, kai sąrašas perkirstamas arba įterpiate/ištrinate iš pradžios: ```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. ``` Tikra pasekme: įvesties sąrašas, kur rašymas viename eilutėje "šokinėja" į kitą po ištrynimo/rūšiavimo, nes React panaudojo neteisingą `` (ir jo vidinę reikšmę/fokusą). ## Taisyklės - Naudokite **stabilų, unikalų** id iš jūsų duomenų (`user.id`, slugą). - Indeksas yra priimtinas **tik** statiniam sąrašui, kuris niekada neperkirstamas, neįterpamas arba neištrinama. - Raktai turi būti unikalūs **tarp brolių/seserų** (ne globaliai). Raktai yra užuomina reconciliation algoritmui; juos nustačius teisingai, pasiekiamas ir našumas, ir komponento statas yra teisingi.

Kodėl masyvo indeksas yra rizikinga

Taisyklės

Susiję klausimai