{"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":"reageerivad-votmed-jah-te-vajate-neid-kuid-miks-tapselt","status":"publish","type":"post","link":"https:\/\/thecodest.co\/et\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"React V\u00f5tmed, jah! Sa vajad neid, aga miks t\u00e4pselt?"},"content":{"rendered":"

On ka veel \u00fcks asi, mida peate meeles pidama ja see on React<\/a> Key<\/strong> atribuuti, peab see olema igal renderdatud loendi elemendil. See kontseptsioon on \u00fcks esimesi asju, mida iga front-end arendaja<\/a> saab teada React<\/strong> nende reisi alguses. N\u00fc\u00fcd kaevume veidi s\u00fcgavamale, et uurida, miks see nii on ja millal me saame v\u00f5tta m\u00f5ningaid otseteid.<\/p>\n

Miks on meil seda v\u00f5tmeatribuuti vaja?<\/h2>\n

K\u00f5ige lihtsam vastus oleks siinkohal \"optimeerida re-renderdusi\", kuid t\u00e4ielikum vastus peab v\u00e4hemalt mainima m\u00f5istet React Koosk\u00f5lastamine<\/strong>. See on protsess, mille k\u00e4igus selgitatakse v\u00e4lja, kuidas uuendada kasutajaliidest k\u00f5ige t\u00f5husamal viisil. Et seda kiiresti teha, React<\/strong> peab otsustama, milliseid elementide puu osi on vaja uuendada ja milliseid mitte. Asi on selles, et DOMis v\u00f5ib olla palju elemente ja iga elemendi v\u00f5rdlemine otsustamisel, millist neist tuleks uuendada, on \u00fcsna kallis. Selle optimeerimiseks, React<\/strong> rakendab difing-algoritmi, mis p\u00f5hineb kahel eeldusel:<\/p>\n

    \n
  1. Kaks erinevat t\u00fc\u00fcpi elementi ei ole kunagi \u00fchesugused - seega renderige need uuesti.<\/li>\n
  2. Arendajad saavad k\u00e4sitsi aidata seda protsessi optimeerida v\u00f5tmeatribuutide abil, nii et elemendid, isegi kui nende j\u00e4rjekord on muutunud, on v\u00f5imalik kiiremini lokaliseerida ja v\u00f5rrelda.<\/li>\n<\/ol>\n

    Selle p\u00f5hjal v\u00f5ime j\u00e4reldada, et iga React v\u00f5ti<\/strong> peaks samuti olema unikaalne (elementide loetelus, mitte globaalselt) ja stabiilne (ei tohiks muutuda). Aga mis v\u00f5ib juhtuda, kui nad ei ole tat?<\/p>\n

    Ainulaadsus, stabiilsus ja massiiviindeks<\/h2>\n

    Nagu me juba varem mainisime, React klahvid<\/strong> peaks olema stabiilne ja ainulaadne. K\u00f5ige lihtsam viis selle saavutamiseks on kasutada unikaalset ID-d (n\u00e4iteks andmebaasist) ja anda see igale elemendile massiivi kaardistamisel \u00fcle, lihtne. Aga kuidas on olukordadega, kus meil ei ole ID-d, nime v\u00f5i muid unikaalseid identifikaatoreid, mida igale elemendile edastada? Noh, kui me ei edasta midagi v\u00f5tmeks, React<\/strong> v\u00f5tab vaikimisi praeguse massiivi indeksi (kuna see on selles loetelus unikaalne), et seda k\u00e4sitleda jaoks us<\/a>, kuid see annab meile ka kena veateate konsooli:<\/p>\n

    \"\"<\/p>\n

    Miks see nii on? Vastus on selles, et massiivi indeks ei ole stabiilne. Kui elementide j\u00e4rjekord muutub, muutub iga v\u00f5ti ja meil on probleem. Kui React<\/strong> kohtub olukorras, kus elementide j\u00e4rjekord loetelus on muutunud, p\u00fc\u00fcab ta neid ikkagi v\u00f5rrelda v\u00f5tmete j\u00e4rgi, mis t\u00e4hendab, et iga v\u00f5rdlus l\u00f5peb komponendi \u00fcmberehitamisega ja selle tulemusena ehitatakse kogu loetelu uuesti nullist \u00fcles. Lisaks sellele v\u00f5ib tekkida ootamatuid probleeme, n\u00e4iteks komponentide oleku uuendamine elementide puhul nagu kontrollimata sisendid ja muud maagilised raskesti vea k\u00f5rvaldatavad probleemid.<\/p>\n

    Erandid<\/h2>\n

    Tuleme tagasi massiivi indeksi juurde. Kui kasutame seda kui React v\u00f5ti<\/strong> v\u00f5ib olla nii problemaatiline, miks React<\/strong> kasutab seda vaikimisi? Kas on m\u00f5ni kasutusjuhtum, kus see on okei? Vastus on jah, kasutusjuhtumiks on staatilised nimekirjad. Kui sa oled kindel, et renderdatav nimekiri ei muuda kunagi oma j\u00e4rjekorda, siis on ohutu kasutada massiivi indeksit, kuid pea meeles, et kui sul on mingid unikaalsed identifikaatorid, siis on ikkagi parem neid kasutada selle asemel. Samuti v\u00f5ite m\u00e4rgata, et indeksite edastamine v\u00f5tmetena muudab React<\/strong> veateade kaob, samal ajal k\u00e4ivitades m\u00f5ned v\u00e4lised linterid, et kuvada viga v\u00f5i hoiatus. Selle p\u00f5hjuseks on asjaolu, et indeksite selges\u00f5nalist kasutamist v\u00f5tmetena peetakse halvaks tavaks ja m\u00f5ned linterid v\u00f5ivad seda k\u00e4sitleda veana, samas kui React<\/strong> ise peab seda \"arendajad teavad, mida nad teevad\" olukorraks - seega \u00e4rge tehke seda, kui te t\u00f5esti ei tea, mida teete. M\u00f5ned n\u00e4ited, millal v\u00f5ib olla okei kasutada seda erandit, oleks rippmen\u00fc\u00fc staatilise nuppude loeteluga v\u00f5i elementide loetelu kuvamine teie ettev\u00f5tte aadressiandmetega.<\/p>\n

    Alternatiiv andmekogumip\u00f5hisele v\u00f5tmele<\/h2>\n

    Oletame, et \u00fckski eespool nimetatud variantidest ei ole meie jaoks v\u00f5imalik. N\u00e4iteks peame kuvama stringide massiivil p\u00f5hinevat elementide nimekirja, mida saab dubleerida, kuid mida saab ka \u00fcmber j\u00e4rjestada. Sellisel juhul ei saa me kasutada \u00fchtegi stringi, sest need ei ole unikaalsed (see v\u00f5ib p\u00f5hjustada ka m\u00f5ningaid maagilisi vigu) ja massiivi indeks ei ole piisavalt hea, sest me muudame elementide j\u00e4rjekorda. Viimane asi, millele me saame sellises olukorras toetuda, on m\u00f5ne v\u00e4lise identifikaatori kasutamine. Pidage meeles, et see peab olema stabiilne, nii et me ei saa lihtsalt kasutada Math.random(). On olemas m\u00f5ned NPM-i paketid, mida me saame sellistel juhtudel kasutada, n\u00e4iteks \"uuid\"<\/a> pakett. Sellised t\u00f6\u00f6riistad aitavad meil hoida meie nimekirja v\u00f5tmed stabiilsed ja unikaalsed, isegi kui me ei leia \u00f5igeid identifikaatoreid oma andmed<\/a> komplekt. Me peaksime kaaluma andmebaasi ID ja massiiviindeksi kasutamist (kui see on v\u00f5imalik) k\u00f5igepealt, et minimeerida meie poolt kasutatavate pakettide arvu. projekt<\/a>.<\/p>\n

    Kokkuv\u00f5tteks<\/h2>\n