Miksi luettelokohteet tarvitsevat avaimen ja miksi ei käyttää indeksiä?

Question

IT Interview Practice · Accepted Answer

Kun renderöit luettelon, React tarvitsee tavan tietää, **mikä kohde on mikä** renderöintien välillä, jotta se voi oikein käyttää uudelleen, järjestää, lisätä tai poistaa DOM-solmuja. **`key`** on tämä identiteetti. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Miksi taulukon indeksi on riskialtista Indeksin käyttäminen avaimena kertoo React:ille "kohde asemassa 0 on sama kohde kuin ennen" — mikä hajoaa heti, kun luettelo järjestetään uudelleen tai lisäät/poistat alusta: ```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. ``` Oikea oire: luettelo syöttökentistä, joissa yhden rivin kirjoittaminen "hyppää" toiselle riville poiston/lajittelun jälkeen, koska React käytti uudelleen väärää ``-elementtiä (ja sen sisäistä arvoa/fokusta). ## Säännöt - Käytä **vakaata, ainutlaatuista** id:tä tiedoistasi (`user.id`, slug). - Indeksi on hyväksyttävä **vain** staattiselle luettelolle, jota ei koskaan järjestetä uudelleen, lisätä tai poisteta. - Avainten on oltava ainutlaatuisia **sibling-kohteiden** joukossa (ei globaalisti). Avaimet ovat vihje tasapainotusalgoritmille; niiden oikea saaminen pitää sekä suorituskyvyn että komponentin tilan oikeina.

Miksi taulukon indeksi on riskialtista

Säännöt

Aiheeseen liittyvät kysymykset