React-nycklar, ja! Du behöver dem, men varför exakt?

Det finns också en sak till som du måste komma ihåg och det är React Nyckel attribut, måste varje element i den renderade listan ha det. Detta koncept är en av de första sakerna som varje frontend-utvecklare lär sig om React i början av deras resa. Låt oss nu gräva lite djupare för att undersöka varför det är så och när vi kan ta några genvägar.

Varför behöver vi denna nyckelegenskap?

Det enklaste svaret här skulle vara "för att optimera återrenderingar", men det mer fullständiga svaret måste åtminstone nämna konceptet React Avstämning. Det handlar om att ta reda på hur man uppdaterar användargränssnittet på det mest effektiva sättet. För att göra det snabbt, React måste bestämma vilka delar av trädet av element som behöver uppdateras och vilka som inte behöver det. Saken är att det kan finnas många element i DOM och att jämföra var och en av dem för att bestämma vilken som ska uppdateras är ganska dyrt. För att optimera detta, React implementerar diffing-algoritmen som bygger på två antaganden:

1. Två olika typer av element kommer aldrig att vara likadana - så gör om dem.
2. Utvecklare kan manuellt hjälpa till att optimera den processen via nyckelattribut, så att elementen, även om deras ordning har ändrats, kan lokaliseras och jämföras snabbare.

Baserat på detta kan vi dra slutsatsen att varje React-nyckel ska också vara unika (inom listan av element, inte globalt) och stabila (ska inte förändras). Men vad kan hända när de inte är det?

Unikhet, stabilitet och matrisindex

Som vi nämnde tidigare, React-nycklar ska vara stabila och unika. Det enklaste sättet att uppnå detta är att använda ett unikt ID (t.ex. från en databas) och skicka det till varje element när man mappar en array, enkelt. Men hur är det i situationer när vi inte har ett ID, ett namn eller andra unika identifierare att skicka till varje element? Tja, om vi inte skickar något som en nyckel, React tar det aktuella matrisindexet som standard (eftersom det är unikt inom listan) för att hantera det åt oss, men det ger oss också ett trevligt felmeddelande i konsolen:

Varför är det så? Svaret är att arrayindexet inte är stabilt. Om ordningen på elementen ändras, kommer var och en av nycklarna att ändras och vi har ett problem. Om React uppstår en situation där ordningen i en lista med element ändrades, kommer den fortfarande att försöka jämföra dem med nycklarna, vilket innebär att varje jämförelse kommer att sluta med att en komponent byggs om och som ett resultat kommer hela listan att byggas om från början. Dessutom kan vi stöta på oväntade problem, t.ex. uppdateringar av komponentstatus för element som okontrollerade ingångar och andra magiska problem som är svåra att felsöka.

Undantag

Låt oss återgå till matrisindexet. Om du använder det som ett React-nyckel kan vara så problematiskt, varför React kommer att använda det som standard? Finns det något användningsfall där det är okej att göra det? Svaret är ja, användningsfallet för det är statiska listor. Om du är säker på att en lista som du renderar aldrig kommer att ändra sin ordning är det säkert att använda array index, men kom ihåg att om du har några unika identifierare är det fortfarande bättre att använda dem istället. Du kan också märka att passering av index som nycklar kommer att göra React felmeddelande försvinner, samtidigt som vissa av de externa linters visar ett fel eller en varning. Detta beror på att den uttryckliga användningen av index som nycklar anses vara en dålig praxis och vissa linters kan behandla det som ett fel, medan React själv betraktar det som en "utvecklarna vet vad de gör"-situation - så gör inte det om du inte verkligen vet vad du gör. Några exempel på när det kan vara okej att använda det undantaget är en rullgardinsmeny med en statisk lista med knappar eller att visa en lista med element med din företagsadressinformation.

Ett alternativ till en datasetbaserad nyckel

Låt oss säga att inget av ovanstående är ett alternativ för oss. Vi måste till exempel visa en lista med element baserat på en array av strängar som kan dupliceras, men den kan också ordnas om. I det här fallet kan vi inte använda någon av strängarna eftersom de inte är unika (detta kan också orsaka några magiska buggar), och arrayindexet är inte tillräckligt bra eftersom vi kommer att ändra ordningen på elementen. Det sista vi kan förlita oss på i situationer som denna är användningen av några externa identifierare. Kom ihåg att det måste vara stabilt, så vi kan inte bara använda Math.random(). Det finns några NPM-paket som vi kan använda i sådana fall, till exempel "uuid" paket. Sådana verktyg kan hjälpa oss att hålla våra listnycklar stabila och unika, även när vi inte kan hitta korrekta identifierare i vår datauppsättning. Vi bör överväga att använda databas-ID och matrisindex (om möjligt) först, för att minimera antalet paket som används av vår projekt.

För att sammanfatta det hela

• Varje element i listan över React element bör ha ett unikt, stabilt nyckelattribut,
• React-nycklar används för att snabba upp Avstämningsprocess och undvika onödig ombyggnad av element på listorna,
• Den bästa källan till nycklar är dataregistreringens unika ID (t.ex. från databasen),
• Du kan använda matrisindexet som nyckel, men bara för en statisk lista vars ordning inte kommer att ändras,
• Om det inte finns något annat sätt att få stabila och unika nycklar kan du överväga att använda externa ID-leverantörer, t.ex. paketet "uuid".

Läs mer om detta:

Varför du (förmodligen) bör använda Typescript

Hur undviker man att döda ett projekt med dåliga kodningsrutiner?

Strategier för datahämtning i NextJS