Kwa nini vipengee vya orodha vinahitaji key, na kwa nini si kutumia index?

Question

Accepted Answer

Wakati unaporendeza orodha, React inahitaji njia ya kujua **kipengee kipi ni kipi** kati ya renderushaji ili iweze kuchukua upya, kuandika upya, kuingiza, au kufuta nodi za DOM kwa usahihi. **`key`** ndiyo kitambulisho hicho. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Kwa nini array index ni hatari Kutumia index kama key inasema React "kipengee katika nafasi 0 ni kipengee sawa na hapo awali" — ambayo haizimu haraka orodha inapobadilishwa, au kuingiza/kuondoa kutoka mbele: ```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. ``` Alama halisi: orodha ya pembejeo ambapo kuchapisha katika safu moja "kuruka" kwenye nyingine baada ya kufuta/kupanga, kwa sababu React ilitumia tena `` isiyo sahihi (na thamani/umakini wake wa ndani). ## Sheria - Tumia **stable, unique** id kutoka kwa data yako (`user.id`, slug). - Index inakubalika **tu** kwa orodha tuli ambayo haibadiliki, haiingizwi, au haiondolezwi. - Keys lazima ziwe unique kati ya **kaka-dada** (si ulimwenguni). Keys ni kidokezo kwa algorithm ya marekebisho; kuzipatia sawa kunabaki performance na hali ya sehemu sahihi.