{"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-lyklar-ja-thu-tharft-tha-en-af-hverju-nakvaemlega","status":"publish","type":"post","link":"https:\/\/thecodest.co\/is\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"React Lyklar, j\u00e1! \u00de\u00fa \u00fearft \u00fe\u00e1, en af hverju n\u00e1kv\u00e6mlega?"},"content":{"rendered":"

\u00dea\u00f0 er l\u00edka eitt fleira sem \u00fe\u00fa \u00fearft a\u00f0 muna um og \u00fea\u00f0 er React<\/a> Lykill<\/strong> Eiginleiki, hvert atri\u00f0i \u00ed birtu listanum ver\u00f0ur a\u00f0 hafa hann. \u00deetta hugtak er eitt af fyrstu hlutunum sem hver front-end \u00fer\u00f3unara\u00f0ili<\/a> kynnist React<\/strong> \u00cd upphafi fer\u00f0ar \u00feeirra. N\u00fa skulum vi\u00f0 kafa a\u00f0eins d\u00fdpra til a\u00f0 kanna hvers vegna \u00feetta er svona og hven\u00e6r vi\u00f0 getum teki\u00f0 nokkra stuttlei\u00f0ir.<\/p>\n

Af hverju \u00feurfum vi\u00f0 \u00feessa lykilatri\u00f0i?<\/h2>\n

Einfaldasta svari\u00f0 h\u00e9r v\u00e6ri \u201ca\u00f0 h\u00e1marka endurteikningar\u201d, en hi\u00f0 fullkomnara svar \u00fearf a\u00f0 minnsta kosti a\u00f0 nefna hugtaki\u00f0 React Samr\u00e6ming<\/strong>. \u00deetta er ferli\u00f0 vi\u00f0 a\u00f0 komast a\u00f0 \u00fev\u00ed hvernig \u00e1 a\u00f0 uppf\u00e6ra notendavi\u00f0m\u00f3ti\u00f0 \u00e1 sem skilvirkastan h\u00e1tt. Til a\u00f0 gera \u00fea\u00f0 hratt, React<\/strong> \u00fearf a\u00f0 \u00e1kve\u00f0a hva\u00f0a hlutar \u00ed tr\u00e9 \u00fe\u00e1ttanna \u00feurfa a\u00f0 vera uppf\u00e6r\u00f0ir og hva\u00f0a ekki. M\u00e1li\u00f0 er a\u00f0 \u00fea\u00f0 geta veri\u00f0 margir \u00fe\u00e6ttir \u00ed DOM-inu og \u00fea\u00f0 er nokku\u00f0 kostna\u00f0arsamt a\u00f0 bera saman hvern og einn \u00feeirra til a\u00f0 \u00e1kve\u00f0a hva\u00f0a eigi a\u00f0 uppf\u00e6ra. Til a\u00f0 hagr\u00e6\u00f0a \u00feessu, React<\/strong> Innlei\u00f0ir diffing-algor\u00edtmann sem byggir \u00e1 tveimur forsendum:<\/p>\n

    \n
  1. Tv\u00f6 mismunandi ger\u00f0ir af \u00fe\u00e1ttum ver\u00f0a aldrei eins \u2013 endurskipulegg\u00f0u \u00fe\u00e6r.<\/li>\n
  2. Forritarar geta handvirkt a\u00f0sto\u00f0a\u00f0 vi\u00f0 a\u00f0 hagr\u00e6\u00f0a \u00feessu ferli me\u00f0 lykilatri\u00f0um, svo a\u00f0 \u00fe\u00e6ttirnir, jafnvel \u00fe\u00f3 r\u00f6\u00f0 \u00feeirra hafi breyst, megi sta\u00f0f\u00e6ra og bera saman hra\u00f0ar.<\/li>\n<\/ol>\n

    \u00c1 grundvelli \u00feess getum vi\u00f0 dregi\u00f0 \u00fe\u00e1 \u00e1lyktun a\u00f0 hver React lykill<\/strong> \u00c6tti einnig a\u00f0 vera einstakt (innan lista yfir \u00fe\u00e6tti, ekki al\u00fej\u00f3\u00f0lega) og st\u00f6\u00f0ugt (ekki breytast). En hva\u00f0 g\u00e6ti gerst \u00feegar \u00feau eru ekki \u00feannig?<\/p>\n

    Einst\u00e6\u00f0ni, st\u00f6\u00f0ugleiki og fylkisv\u00edsitala<\/h2>\n

    Eins og vi\u00f0 nefndum \u00e1\u00f0ur, React lyklar<\/strong> \u00c1 a\u00f0 vera st\u00f6\u00f0ugt og einstakt. Einfaldasta lei\u00f0in til a\u00f0 n\u00e1 \u00feessu er a\u00f0 nota einstakt au\u00f0kenni (til d\u00e6mis \u00far gagnagrunni) og senda \u00fea\u00f0 til hvers \u00fe\u00e1ttar \u00feegar fylki er kortlagt, au\u00f0velt. En hva\u00f0 me\u00f0 a\u00f0st\u00e6\u00f0ur \u00feegar vi\u00f0 h\u00f6fum hvorki au\u00f0kenni, nafn n\u00e9 \u00f6nnur einst\u00f6k au\u00f0kenni til a\u00f0 senda til hvers \u00fe\u00e1ttar? J\u00e6ja, ef vi\u00f0 sendum ekkert sem lykil, React<\/strong> mun taka n\u00faverandi fylkisv\u00edsit\u00f6lu sem sj\u00e1lfgefi\u00f0 gildi (\u00fear sem h\u00fan er einst\u00f6k innan \u00feess lista) til a\u00f0 me\u00f0h\u00f6ndla \u00fea\u00f0 fyrir okkur<\/a>, en \u00fea\u00f0 mun einnig gefa okkur fallega villutilkynningu \u00ed console-inu:<\/p>\n

    \"\"<\/p>\n

    Af hverju er \u00fea\u00f0 svona? Svari\u00f0 er a\u00f0 fylki-v\u00edsitalan er ekki st\u00f6\u00f0ug. Ef r\u00f6\u00f0 atri\u00f0a breytist, munu allir lyklarnir breytast og vi\u00f0 eigum \u00ed vandr\u00e6\u00f0um. Ef React<\/strong> \u00deegar forriti\u00f0 lendir \u00ed a\u00f0 r\u00f6\u00f0 \u00fe\u00e1ttanna \u00ed lista hafi breyst mun \u00fea\u00f0 samt reyna a\u00f0 bera \u00fe\u00e1 saman me\u00f0 lykla, sem \u00fe\u00fd\u00f0ir a\u00f0 hver samanbur\u00f0ur endar \u00ed \u00fev\u00ed a\u00f0 endurbyggja einingu og aflei\u00f0ingin er s\u00fa a\u00f0 allur listinn ver\u00f0ur endurbygg\u00f0ur fr\u00e1 grunni. Auk \u00feess getum vi\u00f0 lent \u00ed \u00f3v\u00e6ntum vandam\u00e1lum, eins og uppf\u00e6rslum \u00e1 \u00e1standi eininga fyrir \u00fe\u00e6tti eins og \u00f3st\u00fdr\u00f0um innsl\u00e1ttum og \u00f6\u00f0rum t\u00f6frandi, erfi\u00f0um villuleitavandam\u00e1lum.<\/p>\n

    Undantekningar<\/h2>\n

    Sko\u00f0um aftur fylkisv\u00edsit\u00f6luna. Ef h\u00fan er notu\u00f0 sem React lykill<\/strong> getur veri\u00f0 svo vandam\u00e1l, af hverju React<\/strong> Mun \u00fea\u00f0 vera nota\u00f0 sem sj\u00e1lfgefi\u00f0? Er til einhver notkunartilvik \u00fear sem \u00fea\u00f0 er \u00ed lagi a\u00f0 gera \u00fea\u00f0? Svari\u00f0 er j\u00e1, notkunartilvik \u00feess er fastar listar. Ef \u00fe\u00fa ert viss um a\u00f0 listinn sem \u00fe\u00fa birtir muni aldrei breyta r\u00f6\u00f0 sinni, er \u00f6ruggt a\u00f0 nota fylkisv\u00edsit\u00f6lu, en mundu a\u00f0 ef \u00fe\u00fa hefur einst\u00f6k au\u00f0kenni er samt betra a\u00f0 nota \u00feau \u00ed sta\u00f0inn. \u00de\u00fa getur einnig teki\u00f0 eftir \u00fev\u00ed a\u00f0 \u00fea\u00f0 a\u00f0 senda v\u00edsit\u00f6lur sem lykla mun gera React<\/strong> villubo\u00f0 hverfur, \u00e1 sama t\u00edma og kveikir \u00ed sumum ytri linterum til a\u00f0 birta villu e\u00f0a vi\u00f0v\u00f6run. \u00deetta er vegna \u00feess a\u00f0 bein notkun v\u00edsitala sem lykla er talin sl\u00e6m vinnubr\u00f6g\u00f0 og sumir linterar g\u00e6tu flokka\u00f0 \u00fea\u00f0 sem villu, \u00e1 me\u00f0an React<\/strong> sj\u00e1lft telur \u00fea\u00f0 vera \u201c\u00fer\u00f3unara\u00f0ilar vita hva\u00f0 \u00feeir eru a\u00f0 gera\u201d a\u00f0st\u00e6\u00f0ur \u2013 svo ger\u00f0u \u00fea\u00f0 ekki nema \u00fe\u00fa vitir virkilega hva\u00f0 \u00fe\u00fa ert a\u00f0 gera. Nokkur d\u00e6mi um \u00feegar \u00fea\u00f0 getur veri\u00f0 \u00ed lagi a\u00f0 nota \u00feessa undantekningu v\u00e6ru fellivalmynd me\u00f0 f\u00f6stum lista af hn\u00f6ppum e\u00f0a birta lista yfir atri\u00f0i me\u00f0 heimilisfangi fyrirt\u00e6kisins.<\/p>\n

    Valkostur vi\u00f0 lykil bygg\u00f0an \u00e1 gagnasafni<\/h2>\n

    Segjum sem svo a\u00f0 ekkert af ofangreindu s\u00e9 valkostur fyrir okkur. Til d\u00e6mis \u00feurfum vi\u00f0 a\u00f0 birta lista yfir \u00fe\u00e6tti bygg\u00f0an \u00e1 strengjara\u00f0 sem m\u00e1 afrita, en einnig m\u00e1 ra\u00f0a upp \u00e1 n\u00fdtt. \u00cd \u00feessu tilfelli getum vi\u00f0 ekki nota\u00f0 neinn af strengjunum \u00fev\u00ed \u00feeir eru ekki einstakir (\u00feetta getur l\u00edka valdi\u00f0 t\u00f6fravillum), og fylki-v\u00edsitalan dugar ekki \u00fear sem vi\u00f0 munum breyta r\u00f6\u00f0inni \u00e1 \u00fe\u00e1ttunum. S\u00ed\u00f0asta \u00farr\u00e6\u00f0i\u00f0 sem vi\u00f0 getum treyst \u00e1 \u00ed svona a\u00f0st\u00e6\u00f0um er a\u00f0 nota einhverjar ytri au\u00f0kenningar. Mundu a\u00f0 \u00fe\u00e6r ver\u00f0a a\u00f0 vera st\u00f6\u00f0ugar, svo vi\u00f0 getum ekki bara nota\u00f0 Math.random(). \u00dea\u00f0 eru nokkur NPM-pakk\u00ed sem vi\u00f0 getum nota\u00f0 \u00ed sl\u00edkum tilvikum, til d\u00e6mis the \u201cuuid\u201d<\/a> pakki. Verkf\u00e6ri eins og \u00feetta geta hj\u00e1lpa\u00f0 okkur a\u00f0 halda lykla listans st\u00f6\u00f0ugum og einst\u00f6kum, jafnvel \u00feegar vi\u00f0 finnum ekki vi\u00f0eigandi au\u00f0kenni innan okkar g\u00f6gn<\/a> set. Vi\u00f0 \u00e6ttum fyrst a\u00f0 \u00edhuga a\u00f0 nota gagnagrunnsau\u00f0kenni og fylkisv\u00edsit\u00f6lu (ef m\u00f6gulegt er), til a\u00f0 l\u00e1gmarka fj\u00f6lda pakka sem notu\u00f0 eru af okkar verkefni<\/a>.<\/p>\n

    Til a\u00f0 lj\u00faka \u00feessu<\/h2>\n