React-nøgler, ja! Du har brug for dem, men hvorfor egentlig?

Der er også en anden ting, du skal huske på, og det er React Nøgle attribut, skal hvert element i den gengivne liste have den. Dette koncept er en af de første ting, alle frontend-udviklere lærer om React i starten af deres rejse. Lad os nu grave lidt dybere for at undersøge, hvorfor det er tilfældet, og hvornår vi kan tage nogle genveje.

Hvorfor har vi brug for denne nøgleegenskab?

Det enkleste svar her ville være "at optimere genindlæsninger", men det mere komplette svar må i det mindste nævne begrebet React Afstemning. Det er processen med at finde ud af, hvordan man opdaterer brugergrænsefladen på den mest effektive måde. For at gøre det hurtigt, React skal beslutte, hvilke dele af elementtræet der skal opdateres, og hvilke der ikke skal. Sagen er, at der kan være 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 implementerer diffing-algoritmen, som er baseret på to antagelser:

1. To forskellige typer elementer vil aldrig være ens - så gengiv dem igen.
2. Udviklere kan manuelt hjælpe med at optimere den proces via nøgleattributter, så elementerne, selv om deres rækkefølge er ændret, kan lokaliseres og sammenlignes hurtigere.

Ud fra det kan vi konkludere, at hver React-nøgle bør også være unikke (inden for listen af elementer, ikke globalt) og stabile (bør ikke ændre sig). Men hvad kan der ske, når de ikke er det?

Entydighed, stabilitet og matrixindeks

Som vi nævnte før, React-taster skal være stabil og unik. Den nemmeste måde at opnå dette på er at bruge et unikt ID (f.eks. fra en database) og give det til hvert element, når 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øgle, er det nemt, React tager som standard det aktuelle array-indeks (da det er unikt inden for listen) for at håndtere det for os, men det giver os også en fin fejlmeddelelse i konsollen:

Hvorfor er det tilfældet? Svaret er, at array-indekset ikke er stabilt. Hvis elementernes rækkefølge ændres, vil hver af nøglerne ændre sig, og så har vi et problem. Hvis React møder en situation, hvor rækkefølgen i en liste af elementer blev ændret, vil den stadig forsøge at sammenligne dem ved hjælp af nøglerne, hvilket betyder, at hver sammenligning vil ende med at genopbygge en komponent, og som følge heraf vil hele listen blive genopbygget fra bunden. Derudover kan vi støde på nogle uventede problemer, som f.eks. opdateringer af komponenttilstanden for elementer som ukontrollerede input og andre magiske problemer, der er svære at fejlfinde.

Undtagelser

Lad os vende tilbage til array-indekset. Hvis du bruger det som et React-nøgle kan være så problematisk, hvorfor React vil bruge det som standard? Er der nogen brugsscenarier, hvor det er okay at gøre det? Svaret er ja, det er tilfældet med statiske lister. Hvis du er sikker på, at en liste, du gengiver, aldrig vil ændre rækkefølge, 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å bemærke, at hvis du bruger indekser som nøgler, vil det gøre React fejlmeddelelse forsvinder, samtidig med at nogle af de eksterne linters viser en fejl eller advarsel. Det skyldes, at eksplicit brug af indekser som nøgler anses for at være en dårlig praksis, og nogle linters vil måske behandle det som en fejl, mens React selv betragter det som en "udviklerne ved, hvad de gør"-situation - så lad være med at gøre det, medmindre du virkelig ved, hvad du gør. Et par eksempler på, hvornår det kan være 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.

Et alternativ til en datasæt-baseret nøgle

Lad os sige, at ingen af ovenstående er en mulighed for os. Vi skal f.eks. vise en liste med elementer baseret på et array af strenge, som kan duplikeres, men som også kan omordnes. I dette tilfælde kan vi ikke bruge nogen af strengene, fordi de ikke er unikke (det kan også forårsage nogle magiske fejl), og array-indekset er ikke godt nok, fordi vi vil ændre elementernes rækkefølge. Den sidste ting, vi kan stole på i situationer som denne, er brugen af nogle eksterne identifikatorer. Husk, at det skal være stabilt, så vi kan ikke bare bruge Math.random(). Der er nogle NPM-pakker, som vi kan bruge i sådanne tilfælde, f.eks. "uuid" pakke. Den slags værktøjer kan hjælpe os med at holde vores listenøgler stabile og unikke, selv når vi ikke kan finde de rigtige identifikatorer i vores datasæt. Vi bør overveje at bruge database-ID og array-indeks (hvis muligt) først for at minimere antallet af pakker, der bruges af vores projekt.

For at afslutte det hele

• Hvert element på listen over React elementer skal have en unik, stabil nøgleattribut,
• React-taster bruges til at fremskynde Afstemningsproces og undgå unødvendig genopbygning af elementer på listerne,
• Den bedste kilde til nøgler er dataindtastningens unikke ID (f.eks. fra databasen),
• Du kan bruge array-indekset som nøgle, men kun til en statisk liste, hvis rækkefølge ikke ændres,
• Hvis der ikke er andre måder at få stabile og unikke nøgler på, kan du overveje at bruge nogle eksterne ID-udbydere, f.eks. pakken "uuid".

Læs mere om det:

Hvorfor du (sandsynligvis) bør bruge Typescript

Hvordan dræber man ikke et projekt med dårlig kodningspraksis?

Strategier for at hente data i NextJS