{"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":"reaktionsnogler-ja-du-har-brug-for-dem-men-hvorfor-egentlig","status":"publish","type":"post","link":"https:\/\/thecodest.co\/da\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"React-n\u00f8gler, ja! Du har brug for dem, men hvorfor egentlig?"},"content":{"rendered":"

Der er ogs\u00e5 en anden ting, du skal huske p\u00e5, og det er React<\/a> N\u00f8gle<\/strong> attribut, skal hvert element i den gengivne liste have den. Dette koncept er en af de f\u00f8rste ting, enhver front-end Udvikler<\/a> l\u00e6rer om React<\/strong> i starten af deres rejse. Lad os nu grave lidt dybere for at unders\u00f8ge, hvorfor det er tilf\u00e6ldet, og hvorn\u00e5r vi kan tage nogle genveje.<\/p>\n

Hvorfor har vi brug for denne n\u00f8gleegenskab?<\/h2>\n

Det enkleste svar her ville v\u00e6re \"at optimere genindl\u00e6sninger\", men det mere komplette svar m\u00e5 i det mindste n\u00e6vne begrebet React Afstemning<\/strong>. Det er processen med at finde ud af, hvordan man opdaterer brugergr\u00e6nsefladen p\u00e5 den mest effektive m\u00e5de. For at g\u00f8re det hurtigt, React<\/strong> skal beslutte, hvilke dele af elementtr\u00e6et der skal opdateres, og hvilke der ikke skal. Sagen er, at der kan v\u00e6re mange elementer i DOM'en, og det er ret dyrt at sammenligne hvert enkelt af dem for at beslutte, hvilket der skal opdateres. For at optimere dette, React<\/strong> implementerer diffing-algoritmen, som er baseret p\u00e5 to antagelser:<\/p>\n

    \n
  1. To forskellige typer elementer vil aldrig v\u00e6re ens - s\u00e5 gengiv dem igen.<\/li>\n
  2. Udviklere kan manuelt hj\u00e6lpe med at optimere den proces via n\u00f8gleattributter, s\u00e5 elementerne, selv om deres r\u00e6kkef\u00f8lge er \u00e6ndret, kan lokaliseres og sammenlignes hurtigere.<\/li>\n<\/ol>\n

    Ud fra det kan vi konkludere, at hver React-n\u00f8gle<\/strong> b\u00f8r ogs\u00e5 v\u00e6re unikke (inden for listen af elementer, ikke globalt) og stabile (b\u00f8r ikke \u00e6ndre sig). Men hvad kan der ske, n\u00e5r de ikke er det?<\/p>\n

    Entydighed, stabilitet og matrixindeks<\/h2>\n

    Som vi n\u00e6vnte f\u00f8r, React-taster<\/strong> skal v\u00e6re stabil og unik. Den nemmeste m\u00e5de at opn\u00e5 dette p\u00e5 er at bruge et unikt ID (f.eks. fra en database) og give det til hvert element, n\u00e5r man mapper et array, nemt. Men hvad med situationer, hvor vi ikke har et ID, et navn eller andre unikke identifikatorer, som vi kan sende til hvert element? Hvis vi ikke sender noget som n\u00f8gle, er det nemt, React<\/strong> vil som standard tage det aktuelle matrixindeks (da det er unikt inden for listen) for at h\u00e5ndtere det for os<\/a>men det vil ogs\u00e5 give os en fin fejlmeddelelse i konsollen:<\/p>\n

    \"\"<\/p>\n

    Hvorfor er det tilf\u00e6ldet? Svaret er, at array-indekset ikke er stabilt. Hvis elementernes r\u00e6kkef\u00f8lge \u00e6ndres, vil hver af n\u00f8glerne \u00e6ndre sig, og s\u00e5 har vi et problem. Hvis React<\/strong> m\u00f8der en situation, hvor r\u00e6kkef\u00f8lgen i en liste af elementer blev \u00e6ndret, vil den stadig fors\u00f8ge at sammenligne dem ved hj\u00e6lp af n\u00f8glerne, hvilket betyder, at hver sammenligning vil ende med at genopbygge en komponent, og som f\u00f8lge heraf vil hele listen blive genopbygget fra bunden. Derudover kan vi st\u00f8de p\u00e5 nogle uventede problemer, som f.eks. opdateringer af komponenttilstanden for elementer som ukontrollerede input og andre magiske problemer, der er sv\u00e6re at fejlfinde.<\/p>\n

    Undtagelser<\/h2>\n

    Lad os vende tilbage til array-indekset. Hvis du bruger det som et React-n\u00f8gle<\/strong> kan v\u00e6re s\u00e5 problematisk, hvorfor React<\/strong> vil bruge det som standard? Er der nogen brugsscenarier, hvor det er okay at g\u00f8re det? Svaret er ja, det er tilf\u00e6ldet med statiske lister. Hvis du er sikker p\u00e5, at en liste, du gengiver, aldrig vil \u00e6ndre r\u00e6kkef\u00f8lge, er det sikkert at bruge array-indeks, men husk, at hvis du har unikke identifikatorer, er det stadig bedre at bruge dem i stedet. Du kan ogs\u00e5 bem\u00e6rke, at hvis du bruger indekser som n\u00f8gler, vil det g\u00f8re React<\/strong> fejlmeddelelse forsvinder, samtidig med at nogle af de eksterne linters viser en fejl eller advarsel. Det skyldes, at eksplicit brug af indekser som n\u00f8gler anses for at v\u00e6re en d\u00e5rlig praksis, og nogle linters vil m\u00e5ske behandle det som en fejl, mens React<\/strong> selv betragter det som en \"udviklerne ved, hvad de g\u00f8r\"-situation - s\u00e5 lad v\u00e6re med at g\u00f8re det, medmindre du virkelig ved, hvad du g\u00f8r. Et par eksempler p\u00e5, hvorn\u00e5r det kan v\u00e6re okay at bruge denne undtagelse, er en dropdown med en statisk liste af knapper eller visning af en liste af elementer med din virksomheds adresseoplysninger.<\/p>\n

    Et alternativ til en datas\u00e6t-baseret n\u00f8gle<\/h2>\n

    Lad os sige, at ingen af ovenst\u00e5ende er en mulighed for os. Vi skal f.eks. vise en liste med elementer baseret p\u00e5 et array af strenge, som kan duplikeres, men som ogs\u00e5 kan omordnes. I dette tilf\u00e6lde kan vi ikke bruge nogen af strengene, fordi de ikke er unikke (det kan ogs\u00e5 for\u00e5rsage nogle magiske fejl), og array-indekset er ikke godt nok, fordi vi vil \u00e6ndre elementernes r\u00e6kkef\u00f8lge. Den sidste ting, vi kan stole p\u00e5 i situationer som denne, er brugen af nogle eksterne identifikatorer. Husk, at det skal v\u00e6re stabilt, s\u00e5 vi kan ikke bare bruge Math.random(). Der er nogle NPM-pakker, som vi kan bruge i s\u00e5danne tilf\u00e6lde, f.eks. \"uuid\"<\/a> pakke. Den slags v\u00e6rkt\u00f8jer kan hj\u00e6lpe os med at holde vores listen\u00f8gler stabile og unikke, selv n\u00e5r vi ikke kan finde de rigtige identifikatorer i vores data<\/a> s\u00e6t. Vi b\u00f8r overveje at bruge database-ID og matrixindeks (hvis det er muligt) f\u00f8rst for at minimere antallet af pakker, der bruges af vores projekt<\/a>.<\/p>\n

    For at afslutte det hele<\/h2>\n