React raktai, Taip! Jums jų reikia, bet kodėl?

Be to, reikia nepamiršti dar vieno dalyko, t. y. React Pagrindinis atributą, jį turi turėti kiekvienas atvaizduojamo sąrašo elementas. Ši sąvoka yra vienas iš pirmųjų dalykų, kuriuos kiekvienas kūrėjas sužino apie React kelionės pradžioje. Dabar šiek tiek giliau panagrinėkime, kodėl taip yra ir kada galime imtis trumpesnių kelių.

Kam reikalingas šis pagrindinis požymis?

Paprasčiausias atsakymas šiuo atveju būtų “optimizuoti pakartotinius perdavimus”, tačiau išsamesnis atsakymas turėtų bent jau paminėti sąvoką React Derinimas. Tai procesas, kurio metu nustatoma, kaip efektyviausiai atnaujinti vartotojo sąsają. Kad tai padarytumėte greitai, React turi nuspręsti, kurias elementų medžio dalis reikia atnaujinti, o kurių ne. Tačiau DOM gali būti daugybė elementų, o kiekvieno jų palyginimas sprendžiant, kurį iš jų reikia atnaujinti, yra gana brangus. Norint tai optimizuoti, React įgyvendina difingo algoritmą, kuris grindžiamas dviem prielaidomis:

1. Dviejų skirtingų tipų elementai niekada nebus vienodi, todėl juos atvaizduokite iš naujo.
2. Kūrėjai gali rankiniu būdu padėti optimizuoti šį procesą naudodami raktinius atributus, todėl elementus, net jei jų eiliškumas pasikeitė, galima greičiau lokalizuoti ir palyginti.

Remdamiesi tuo, galime daryti išvadą, kad kiekvienas React raktas taip pat turėtų būti unikalus (elementų sąraše, o ne visame pasaulyje) ir stabilus (neturėtų keistis). Tačiau kas gali nutikti, kai jie nėra tat?

Unikalumas, stabilumas ir masyvo indeksas

Kaip jau minėjome anksčiau, React raktai turėtų būti stabilus ir unikalus. Paprasčiausias būdas tai pasiekti - naudoti unikalų ID (pvz., iš duomenų bazės) ir perduoti jį kiekvienam elementui, kai atvaizduojamas masyvas. Tačiau kaip elgtis tais atvejais, kai neturime ID, vardo ar kitų unikalių identifikatorių, kuriuos galėtume perduoti kiekvienam elementui? Na, jei nieko neperduosime kaip rakto, React pagal numatytuosius nustatymus ims dabartinį masyvo indeksą (nes jis yra unikalus tame sąraše), kad jį būtų galima tvarkyti mus, tačiau konsolėje taip pat bus pateiktas gražus klaidos pranešimas:

Kodėl taip yra? Atsakymas yra tas, kad masyvo indeksas nėra stabilus. Jei elementų eiliškumas pasikeis, pasikeis ir kiekvienas raktas, ir susidursime su problema. Jei React susiduriama su situacija, kai elementų sąrašo tvarka buvo pakeista, vis tiek bus bandoma juos palyginti pagal raktus, o tai reiškia, kad kiekvienas palyginimas baigsis komponento atkūrimu ir dėl to visas sąrašas bus kuriamas iš naujo. Be to, galime susidurti su kai kuriomis netikėtomis problemomis, pavyzdžiui, komponentų būsenos atnaujinimu elementams, pavyzdžiui, nekontroliuojamiems įėjimams, ir kitomis stebuklingomis sunkiai ištaisomomis problemomis.

Išimtys

Grįžkime prie masyvo indekso. Jei naudojate jį kaip React raktas gali būti toks problemiškas, kodėl React bus naudojama pagal numatytuosius nustatymus? Ar yra koks nors naudojimo atvejis, kai galima taip daryti? Atsakymas - taip, toks naudojimo atvejis yra statiniai sąrašai. Jei esate tikri, kad atvaizduojamo sąrašo tvarka niekada nesikeis, saugu naudoti masyvo indeksą, tačiau nepamirškite, kad jei turite kokių nors unikalių identifikatorių, vis tiek geriau juos naudoti vietoj jų. Taip pat galite pastebėti, kad perduodant indeksus kaip raktus React klaidos pranešimas išnyksta, o tuo pat metu kai kurie išoriniai linteriai parodo klaidą arba įspėjimą. Taip yra dėl to, kad aiškus indeksų kaip raktų naudojimas laikomas bloga praktika ir kai kurie linteriai tai gali traktuoti kaip klaidą, o React pati mano, kad tai yra “kūrėjai žino, ką daro”, todėl nedarykite to, nebent tikrai žinote, ką darote. Keletas pavyzdžių, kada galima gerai pasinaudoti šia išimtimi, būtų išskleidžiamoji eilutė su statiniu mygtukų sąrašu arba elementų sąrašo rodymas su jūsų įmonės adreso informacija.

Duomenų rinkiniu pagrįsto rakto alternatyva

Tarkime, kad nė vienas iš pirmiau išvardytų variantų mums netinka. Pavyzdžiui, turime rodyti elementų sąrašą, sudarytą pagal eilutės masyvą, kuris gali būti dubliuojamas, bet taip pat gali būti pertvarkytas. Šiuo atveju negalime naudoti nė vienos iš eilučių, nes jos nėra unikalios (dėl to gali atsirasti ir stebuklingų klaidų), o masyvo indeksas nėra pakankamai geras, nes pakeisime elementų tvarką. Paskutinis dalykas, kuriuo galime pasikliauti tokiose situacijose, yra kai kurių išorinių identifikatorių naudojimas. Atminkite, kad jis turi būti stabilus, todėl negalime rinktis tiesiog Math.random(). Yra keletas NPM paketų, kuriuos galime naudoti tokiais atvejais, pvz. “uuid” pakuotė. Tokie įrankiai gali padėti išlaikyti stabilius ir unikalius sąrašo raktus, net jei negalime rasti tinkamų identifikatorių savo sąraše. duomenys rinkinys. Turėtume apsvarstyti galimybę pirmiausia naudoti duomenų bazės ID ir masyvo indeksą (jei įmanoma), kad sumažintume paketų, naudojamų mūsų projektas.

Apibendrinimas

• Kiekvienas sąrašo elementas React elementai turėtų turėti unikalų, stabilų rakto atributą,
• React raktai naudojami siekiant pagreitinti Derinimo procesas ir išvengti nereikalingo sąrašų elementų atstatymo,
• Geriausias raktų šaltinis yra duomenų įvedimo unikalus ID (pvz., iš duomenų bazės),
• Masyvo indeksą galite naudoti kaip raktą, bet tik statiniam sąrašui, kurio tvarka nesikeis,
• Jei nėra kito būdo, kaip gauti stabilius ir unikalius raktus, apsvarstykite galimybę naudoti išorinius ID teikėjus, pavyzdžiui, paketą “uuid”.

Skaityti daugiau:

Kodėl turėtumėte (tikriausiai) naudoti Typescript

Kaip nesunaikinti projekto dėl blogos kodavimo praktikos?

Duomenų gavimo strategijos "NextJS