{"id":3540,"date":"2021-07-24T08:53:39","date_gmt":"2021-07-24T08:53:39","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/react-keys-yes-you-need-them-but-why-exactly\/"},"modified":"2026-04-24T11:30:22","modified_gmt":"2026-04-24T11:30:22","slug":"react-raktai-taip-ju-reikia-bet-kodel-butent-ju","status":"publish","type":"post","link":"https:\/\/thecodest.co\/lt\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"React raktai, Taip! Jums j\u0173 reikia, bet kod\u0117l?"},"content":{"rendered":"

Be to, reikia nepamir\u0161ti dar vieno dalyko, t. y. React<\/a> Pagrindinis<\/strong> atribut\u0105, j\u012f turi tur\u0117ti kiekvienas atvaizduojamo s\u0105ra\u0161o elementas. \u0160i s\u0105voka yra vienas i\u0161 pirm\u0173j\u0173 dalyk\u0173, kuriuos kiekvienas k\u016br\u0117jas<\/a> su\u017eino apie React<\/strong> kelion\u0117s prad\u017eioje. Dabar \u0161iek tiek giliau panagrin\u0117kime, kod\u0117l taip yra ir kada galime imtis trumpesni\u0173 keli\u0173.<\/p>\n

Kam reikalingas \u0161is pagrindinis po\u017eymis?<\/h2>\n

Papras\u010diausias atsakymas \u0161iuo atveju b\u016bt\u0173 \u201coptimizuoti pakartotinius perdavimus\u201d, ta\u010diau i\u0161samesnis atsakymas tur\u0117t\u0173 bent jau pamin\u0117ti s\u0105vok\u0105 React Derinimas<\/strong>. Tai procesas, kurio metu nustatoma, kaip efektyviausiai atnaujinti vartotojo s\u0105saj\u0105. Kad tai padarytum\u0117te greitai, React<\/strong> turi nuspr\u0119sti, kurias element\u0173 med\u017eio dalis reikia atnaujinti, o kuri\u0173 ne. Ta\u010diau DOM gali b\u016bti daugyb\u0117 element\u0173, o kiekvieno j\u0173 palyginimas sprend\u017eiant, kur\u012f i\u0161 j\u0173 reikia atnaujinti, yra gana brangus. Norint tai optimizuoti, React<\/strong> \u012fgyvendina difingo algoritm\u0105, kuris grind\u017eiamas dviem prielaidomis:<\/p>\n

    \n
  1. Dviej\u0173 skirting\u0173 tip\u0173 elementai niekada nebus vienodi, tod\u0117l juos atvaizduokite i\u0161 naujo.<\/li>\n
  2. K\u016br\u0117jai gali rankiniu b\u016bdu pad\u0117ti optimizuoti \u0161\u012f proces\u0105 naudodami raktinius atributus, tod\u0117l elementus, net jei j\u0173 eili\u0161kumas pasikeit\u0117, galima grei\u010diau lokalizuoti ir palyginti.<\/li>\n<\/ol>\n

    Remdamiesi tuo, galime daryti i\u0161vad\u0105, kad kiekvienas React raktas<\/strong> taip pat tur\u0117t\u0173 b\u016bti unikalus (element\u0173 s\u0105ra\u0161e, o ne visame pasaulyje) ir stabilus (netur\u0117t\u0173 keistis). Ta\u010diau kas gali nutikti, kai jie n\u0117ra tat?<\/p>\n

    Unikalumas, stabilumas ir masyvo indeksas<\/h2>\n

    Kaip jau min\u0117jome anks\u010diau, React raktai<\/strong> tur\u0117t\u0173 b\u016bti stabilus ir unikalus. Papras\u010diausias b\u016bdas tai pasiekti - naudoti unikal\u0173 ID (pvz., i\u0161 duomen\u0173 baz\u0117s) ir perduoti j\u012f kiekvienam elementui, kai atvaizduojamas masyvas. Ta\u010diau kaip elgtis tais atvejais, kai neturime ID, vardo ar kit\u0173 unikali\u0173 identifikatori\u0173, kuriuos gal\u0117tume perduoti kiekvienam elementui? Na, jei nieko neperduosime kaip rakto, React<\/strong> pagal numatytuosius nustatymus ims dabartin\u012f masyvo indeks\u0105 (nes jis yra unikalus tame s\u0105ra\u0161e), kad j\u012f b\u016bt\u0173 galima tvarkyti mus<\/a>, ta\u010diau konsol\u0117je taip pat bus pateiktas gra\u017eus klaidos prane\u0161imas:<\/p>\n

    \"\"<\/p>\n

    Kod\u0117l taip yra? Atsakymas yra tas, kad masyvo indeksas n\u0117ra stabilus. Jei element\u0173 eili\u0161kumas pasikeis, pasikeis ir kiekvienas raktas, ir susidursime su problema. Jei React<\/strong> susiduriama su situacija, kai element\u0173 s\u0105ra\u0161o tvarka buvo pakeista, vis tiek bus bandoma juos palyginti pagal raktus, o tai rei\u0161kia, kad kiekvienas palyginimas baigsis komponento atk\u016brimu ir d\u0117l to visas s\u0105ra\u0161as bus kuriamas i\u0161 naujo. Be to, galime susidurti su kai kuriomis netik\u0117tomis problemomis, pavyzd\u017eiui, komponent\u0173 b\u016bsenos atnaujinimu elementams, pavyzd\u017eiui, nekontroliuojamiems \u012f\u0117jimams, ir kitomis stebuklingomis sunkiai i\u0161taisomomis problemomis.<\/p>\n

    I\u0161imtys<\/h2>\n

    Gr\u012f\u017ekime prie masyvo indekso. Jei naudojate j\u012f kaip React raktas<\/strong> gali b\u016bti toks problemi\u0161kas, kod\u0117l React<\/strong> bus naudojama pagal numatytuosius nustatymus? Ar yra koks nors naudojimo atvejis, kai galima taip daryti? Atsakymas - taip, toks naudojimo atvejis yra statiniai s\u0105ra\u0161ai. Jei esate tikri, kad atvaizduojamo s\u0105ra\u0161o tvarka niekada nesikeis, saugu naudoti masyvo indeks\u0105, ta\u010diau nepamir\u0161kite, kad jei turite koki\u0173 nors unikali\u0173 identifikatori\u0173, vis tiek geriau juos naudoti vietoj j\u0173. Taip pat galite pasteb\u0117ti, kad perduodant indeksus kaip raktus React<\/strong> klaidos prane\u0161imas i\u0161nyksta, o tuo pat metu kai kurie i\u0161oriniai linteriai parodo klaid\u0105 arba \u012fsp\u0117jim\u0105. Taip yra d\u0117l to, kad ai\u0161kus indeks\u0173 kaip rakt\u0173 naudojimas laikomas bloga praktika ir kai kurie linteriai tai gali traktuoti kaip klaid\u0105, o React<\/strong> pati mano, kad tai yra \u201ck\u016br\u0117jai \u017eino, k\u0105 daro\u201d, tod\u0117l nedarykite to, nebent tikrai \u017einote, k\u0105 darote. Keletas pavyzd\u017ei\u0173, kada galima gerai pasinaudoti \u0161ia i\u0161imtimi, b\u016bt\u0173 i\u0161skleid\u017eiamoji eilut\u0117 su statiniu mygtuk\u0173 s\u0105ra\u0161u arba element\u0173 s\u0105ra\u0161o rodymas su j\u016bs\u0173 \u012fmon\u0117s adreso informacija.<\/p>\n

    Duomen\u0173 rinkiniu pagr\u012fsto rakto alternatyva<\/h2>\n

    Tarkime, kad n\u0117 vienas i\u0161 pirmiau i\u0161vardyt\u0173 variant\u0173 mums netinka. Pavyzd\u017eiui, turime rodyti element\u0173 s\u0105ra\u0161\u0105, sudaryt\u0105 pagal eilut\u0117s masyv\u0105, kuris gali b\u016bti dubliuojamas, bet taip pat gali b\u016bti pertvarkytas. \u0160iuo atveju negalime naudoti n\u0117 vienos i\u0161 eilu\u010di\u0173, nes jos n\u0117ra unikalios (d\u0117l to gali atsirasti ir stebukling\u0173 klaid\u0173), o masyvo indeksas n\u0117ra pakankamai geras, nes pakeisime element\u0173 tvark\u0105. Paskutinis dalykas, kuriuo galime pasikliauti tokiose situacijose, yra kai kuri\u0173 i\u0161orini\u0173 identifikatori\u0173 naudojimas. Atminkite, kad jis turi b\u016bti stabilus, tod\u0117l negalime rinktis tiesiog Math.random(). Yra keletas NPM paket\u0173, kuriuos galime naudoti tokiais atvejais, pvz. \u201cuuid\u201d<\/a> pakuot\u0117. Tokie \u012frankiai gali pad\u0117ti i\u0161laikyti stabilius ir unikalius s\u0105ra\u0161o raktus, net jei negalime rasti tinkam\u0173 identifikatori\u0173 savo s\u0105ra\u0161e. duomenys<\/a> rinkinys. Tur\u0117tume apsvarstyti galimyb\u0119 pirmiausia naudoti duomen\u0173 baz\u0117s ID ir masyvo indeks\u0105 (jei \u012fmanoma), kad suma\u017eintume paket\u0173, naudojam\u0173 m\u016bs\u0173 projektas<\/a>.<\/p>\n

    Apibendrinimas<\/h2>\n