{"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":"reagovat-klice-ano-potrebujete-je-ale-proc-presne","status":"publish","type":"post","link":"https:\/\/thecodest.co\/cs\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"React Kl\u00ed\u010de, Ano! Pot\u0159ebujete je, ale pro\u010d vlastn\u011b?"},"content":{"rendered":"

Je tu je\u0161t\u011b jedna v\u011bc, na kterou je t\u0159eba pamatovat, a to je. React<\/a> Kl\u00ed\u010d<\/strong> atribut, mus\u00ed jej m\u00edt ka\u017ed\u00fd prvek vykreslen\u00e9ho seznamu. Tento koncept je jednou z prvn\u00edch v\u011bc\u00ed, kter\u00e9 ka\u017ed\u00fd front-end v\u00fdvoj\u00e1\u0159<\/a> se dozv\u00edd\u00e1 o React<\/strong> na za\u010d\u00e1tku jejich cesty. Poj\u010fme se nyn\u00ed pod\u00edvat trochu hloub\u011bji a prozkoumat, pro\u010d tomu tak je a kdy si m\u016f\u017eeme zkr\u00e1tit cestu.<\/p>\n

Pro\u010d pot\u0159ebujeme tento kl\u00ed\u010dov\u00fd atribut?<\/h2>\n

Nejjednodu\u0161\u0161\u00ed odpov\u011b\u010f by byla \"optimalizovat re-rendery\", ale \u00fapln\u011bj\u0161\u00ed odpov\u011b\u010f mus\u00ed p\u0159inejmen\u0161\u00edm zmi\u0148ovat koncept React Odsouhlasen\u00ed<\/strong>. Jedn\u00e1 se o proces, p\u0159i kter\u00e9m se zji\u0161\u0165uje, jak co nejefektivn\u011bji aktualizovat u\u017eivatelsk\u00e9 rozhran\u00ed. Aby to bylo rychl\u00e9, React<\/strong> mus\u00ed rozhodnout, kter\u00e9 \u010d\u00e1sti stromu prvk\u016f je t\u0159eba aktualizovat a kter\u00e9 ne. Jde o to, \u017ee v DOM m\u016f\u017ee b\u00fdt mnoho prvk\u016f a porovn\u00e1v\u00e1n\u00ed jednotliv\u00fdch prvk\u016f p\u0159i rozhodov\u00e1n\u00ed o tom, kter\u00fd z nich m\u00e1 b\u00fdt aktualizov\u00e1n, je pom\u011brn\u011b n\u00e1kladn\u00e9. Chcete-li to optimalizovat, React<\/strong> implementuje algoritmus diffing, kter\u00fd je zalo\u017een na dvou p\u0159edpokladech:<\/p>\n

    \n
  1. Dva r\u016fzn\u00e9 typy prvk\u016f nebudou nikdy stejn\u00e9 - proto je vykreslete znovu.<\/li>\n
  2. V\u00fdvoj\u00e1\u0159i mohou ru\u010dn\u011b pomoci optimalizovat tento proces pomoc\u00ed kl\u00ed\u010dov\u00fdch atribut\u016f, tak\u017ee prvky, i kdy\u017e se jejich po\u0159ad\u00ed zm\u011bnilo, lze rychleji lokalizovat a porovnat.<\/li>\n<\/ol>\n

    Na z\u00e1klad\u011b toho m\u016f\u017eeme konstatovat, \u017ee ka\u017ed\u00fd Kl\u00ed\u010d React<\/strong> by m\u011bl b\u00fdt tak\u00e9 jedine\u010dn\u00fd (v r\u00e1mci seznamu prvk\u016f, nikoli glob\u00e1ln\u011b) a stabiln\u00ed (nem\u011bl by se m\u011bnit). Co se ale m\u016f\u017ee st\u00e1t, kdy\u017e nejsou tat?<\/p>\n

    Jedine\u010dnost, stabilita a index pole<\/h2>\n

    Jak jsme ji\u017e zm\u00ednili, Kl\u00ed\u010de React<\/strong> by m\u011bl b\u00fdt stabiln\u00ed a jedine\u010dn\u00fd. Nejjednodu\u0161\u0161\u00ed zp\u016fsob, jak toho dos\u00e1hnout, je pou\u017e\u00edt jedine\u010dn\u00e9 ID (nap\u0159\u00edklad z datab\u00e1ze) a p\u0159edat ho ka\u017ed\u00e9mu prvku p\u0159i mapov\u00e1n\u00ed pole, snadn\u00e9. Ale co v situac\u00edch, kdy nem\u00e1me k dispozici ID, jm\u00e9no ani jin\u00e9 jedine\u010dn\u00e9 identifik\u00e1tory, kter\u00e9 bychom mohli p\u0159edat ka\u017ed\u00e9mu prvku? No, pokud jako kl\u00ed\u010d nep\u0159ed\u00e1v\u00e1me nic, React<\/strong> ve v\u00fdchoz\u00edm nastaven\u00ed p\u0159evezme index aktu\u00e1ln\u00edho pole (proto\u017ee je v r\u00e1mci tohoto seznamu jedine\u010dn\u00fd) a zpracuje jej pro n\u00e1s<\/a>, ale tak\u00e9 n\u00e1m to v konzoli zobraz\u00ed p\u011bknou chybovou zpr\u00e1vu:<\/p>\n

    \"\"<\/p>\n

    Pro\u010d tomu tak je? Odpov\u011b\u010f zn\u00ed, \u017ee index pole nen\u00ed stabiln\u00ed. Pokud se zm\u011bn\u00ed po\u0159ad\u00ed prvk\u016f, zm\u011bn\u00ed se i jednotliv\u00e9 kl\u00ed\u010de a m\u00e1me probl\u00e9m. Pokud React<\/strong> se setk\u00e1 se situac\u00ed, kdy bylo po\u0159ad\u00ed v seznamu prvk\u016f zm\u011bn\u011bno, bude se je st\u00e1le sna\u017eit porovn\u00e1vat podle kl\u00ed\u010d\u016f, co\u017e znamen\u00e1, \u017ee ka\u017ed\u00e9 porovn\u00e1n\u00ed skon\u010d\u00ed op\u011btovn\u00fdm sestaven\u00edm prvku a v d\u016fsledku toho bude cel\u00fd seznam sestaven znovu od za\u010d\u00e1tku. Krom\u011b toho se m\u016f\u017eeme setkat s n\u011bkter\u00fdmi neo\u010dek\u00e1van\u00fdmi probl\u00e9my, jako je aktualizace stavu komponenty pro prvky jako nekontrolovan\u00e9 vstupy a dal\u0161\u00ed kouzeln\u00e9 t\u011b\u017eko laditeln\u00e9 probl\u00e9my.<\/p>\n

    V\u00fdjimky<\/h2>\n

    Vra\u0165me se k indexu pole. Pokud jej pou\u017eijeme jako Kl\u00ed\u010d React<\/strong> m\u016f\u017ee b\u00fdt tak problematick\u00e9, pro\u010d React<\/strong> bude pou\u017e\u00edvat ve v\u00fdchoz\u00edm nastaven\u00ed? Existuje n\u011bjak\u00fd p\u0159\u00edpad pou\u017eit\u00ed, kdy je to v po\u0159\u00e1dku? Odpov\u011b\u010f zn\u00ed ano, takov\u00fdm p\u0159\u00edpadem pou\u017eit\u00ed jsou statick\u00e9 seznamy. Pokud jste si jisti, \u017ee seznam, kter\u00fd vykreslujete, nikdy nezm\u011bn\u00ed sv\u00e9 po\u0159ad\u00ed, je bezpe\u010dn\u00e9 pou\u017e\u00edt index pole, ale pamatujte, \u017ee pokud m\u00e1te n\u011bjak\u00e9 jedine\u010dn\u00e9 identifik\u00e1tory, je st\u00e1le lep\u0161\u00ed pou\u017e\u00edt m\u00edsto nich. M\u016f\u017eete si tak\u00e9 v\u0161imnout, \u017ee p\u0159ed\u00e1n\u00ed index\u016f jako kl\u00ed\u010d\u016f zp\u016fsob\u00ed, \u017ee se funkce React<\/strong> zmiz\u00ed chybov\u00e1 zpr\u00e1va a sou\u010dasn\u011b se zobraz\u00ed chyba nebo varov\u00e1n\u00ed u n\u011bkter\u00fdch extern\u00edch linter\u016f. To je zp\u016fsobeno t\u00edm, \u017ee explicitn\u00ed pou\u017eit\u00ed index\u016f jako kl\u00ed\u010d\u016f je pova\u017eov\u00e1no za \u0161patnou praxi a n\u011bkter\u00e9 lintery to mohou pova\u017eovat za chybu, zat\u00edmco React<\/strong> s\u00e1m to pova\u017euje za situaci \"v\u00fdvoj\u00e1\u0159i v\u011bd\u00ed, co d\u011blaj\u00ed\" - tak\u017ee to ned\u011blejte, pokud opravdu nev\u00edte, co d\u011bl\u00e1te. N\u011bkolik p\u0159\u00edklad\u016f, kdy m\u016f\u017ee b\u00fdt pou\u017eit\u00ed t\u00e9to v\u00fdjimky v po\u0159\u00e1dku, je rozbalovac\u00ed seznam se statick\u00fdm seznamem tla\u010d\u00edtek nebo zobrazen\u00ed seznamu prvk\u016f s informacemi o adrese va\u0161\u00ed spole\u010dnosti.<\/p>\n

    Alternativa ke kl\u00ed\u010di zalo\u017een\u00e9mu na datov\u00e9 sad\u011b<\/h2>\n

    \u0158ekn\u011bme, \u017ee \u017e\u00e1dn\u00e1 z v\u00fd\u0161e uveden\u00fdch mo\u017enost\u00ed pro n\u00e1s nep\u0159ipad\u00e1 v \u00favahu. Mus\u00edme nap\u0159\u00edklad zobrazit seznam prvk\u016f zalo\u017een\u00fd na poli \u0159et\u011bzc\u016f, kter\u00e9 lze duplikovat, ale lze je tak\u00e9 p\u0159euspo\u0159\u00e1dat. V tomto p\u0159\u00edpad\u011b nem\u016f\u017eeme pou\u017e\u00edt \u017e\u00e1dn\u00fd z \u0159et\u011bzc\u016f, proto\u017ee nejsou unik\u00e1tn\u00ed (to m\u016f\u017ee zp\u016fsobit i kouzeln\u00e9 chyby), a index pole nen\u00ed dost dobr\u00fd, proto\u017ee budeme m\u011bnit po\u0159ad\u00ed prvk\u016f. Posledn\u00ed v\u011bc\u00ed, na kterou se m\u016f\u017eeme v podobn\u00fdch situac\u00edch spolehnout, je pou\u017eit\u00ed n\u011bkter\u00fdch extern\u00edch identifik\u00e1tor\u016f. Nezapome\u0148te, \u017ee mus\u00ed b\u00fdt stabiln\u00ed, tak\u017ee nem\u016f\u017eeme jen tak s\u00e1hnout po Math.random(). Existuj\u00ed n\u011bkter\u00e9 bal\u00ed\u010dky NPM, kter\u00e9 m\u016f\u017eeme v takov\u00fdch p\u0159\u00edpadech pou\u017e\u00edt, nap\u0159. \"uuid\"<\/a> bal\u00ed\u010dek. Takov\u00e9 n\u00e1stroje n\u00e1m mohou pomoci udr\u017eet na\u0161e kl\u00ed\u010de seznamu stabiln\u00ed a jedine\u010dn\u00e9, i kdy\u017e nem\u016f\u017eeme naj\u00edt spr\u00e1vn\u00e9 identifik\u00e1tory v r\u00e1mci na\u0161eho seznamu. data<\/a> sada. M\u011bli bychom zv\u00e1\u017eit pou\u017eit\u00ed ID datab\u00e1ze a indexu pole (pokud je to mo\u017en\u00e9), abychom minimalizovali po\u010det bal\u00ed\u010dk\u016f, kter\u00e9 pou\u017e\u00edv\u00e1me. projekt<\/a>.<\/p>\n

    Na z\u00e1v\u011br<\/h2>\n