{"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":"reagera-pa-nycklar-ja-du-behover-dem-men-varfor-exakt","status":"publish","type":"post","link":"https:\/\/thecodest.co\/sv\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"React-nycklar, ja! Du beh\u00f6ver dem, men varf\u00f6r exakt?"},"content":{"rendered":"

Det finns ocks\u00e5 en sak till som du m\u00e5ste komma ih\u00e5g och det \u00e4r React<\/a> Nyckel<\/strong> attribut, m\u00e5ste varje element i den \u00e5tergivna listan ha det. Detta koncept \u00e4r en av de f\u00f6rsta sakerna som varje front-end utvecklare<\/a> l\u00e4r sig om React<\/strong> i b\u00f6rjan av deras resa. L\u00e5t oss nu gr\u00e4va lite djupare f\u00f6r att unders\u00f6ka varf\u00f6r det \u00e4r s\u00e5 och n\u00e4r vi kan ta n\u00e5gra genv\u00e4gar.<\/p>\n

Varf\u00f6r beh\u00f6ver vi denna nyckelegenskap?<\/h2>\n

Det enklaste svaret h\u00e4r skulle vara \"f\u00f6r att optimera \u00e5terrenderingar\", men det mer fullst\u00e4ndiga svaret m\u00e5ste \u00e5tminstone n\u00e4mna konceptet React Avst\u00e4mning<\/strong>. Det handlar om att ta reda p\u00e5 hur man uppdaterar anv\u00e4ndargr\u00e4nssnittet p\u00e5 det mest effektiva s\u00e4ttet. F\u00f6r att g\u00f6ra det snabbt, React<\/strong> m\u00e5ste best\u00e4mma vilka delar av tr\u00e4det av element som beh\u00f6ver uppdateras och vilka som inte beh\u00f6ver det. Saken \u00e4r att det kan finnas m\u00e5nga element i DOM och att j\u00e4mf\u00f6ra var och en av dem f\u00f6r att best\u00e4mma vilken som ska uppdateras \u00e4r ganska dyrt. F\u00f6r att optimera detta, React<\/strong> implementerar diffing-algoritmen som bygger p\u00e5 tv\u00e5 antaganden:<\/p>\n

    \n
  1. Tv\u00e5 olika typer av element kommer aldrig att vara likadana - s\u00e5 g\u00f6r om dem.<\/li>\n
  2. Utvecklare kan manuellt hj\u00e4lpa till att optimera den processen via nyckelattribut, s\u00e5 att elementen, \u00e4ven om deras ordning har \u00e4ndrats, kan lokaliseras och j\u00e4mf\u00f6ras snabbare.<\/li>\n<\/ol>\n

    Baserat p\u00e5 detta kan vi dra slutsatsen att varje React-nyckel<\/strong> ska ocks\u00e5 vara unika (inom listan av element, inte globalt) och stabila (ska inte f\u00f6r\u00e4ndras). Men vad kan h\u00e4nda n\u00e4r de inte \u00e4r det?<\/p>\n

    Unikhet, stabilitet och matrisindex<\/h2>\n

    Som vi n\u00e4mnde tidigare, React-nycklar<\/strong> ska vara stabila och unika. Det enklaste s\u00e4ttet att uppn\u00e5 detta \u00e4r att anv\u00e4nda ett unikt ID (t.ex. fr\u00e5n en databas) och skicka det till varje element n\u00e4r man mappar en array, enkelt. Men hur \u00e4r det i situationer n\u00e4r vi inte har ett ID, ett namn eller andra unika identifierare att skicka till varje element? Tja, om vi inte skickar n\u00e5got som en nyckel, React<\/strong> tar som standard det aktuella matrisindexet (eftersom det \u00e4r unikt inom listan) f\u00f6r att hantera det f\u00f6r oss<\/a>men det kommer ocks\u00e5 att ge oss ett trevligt felmeddelande i konsolen:<\/p>\n

    \"\"<\/p>\n

    Varf\u00f6r \u00e4r det s\u00e5? Svaret \u00e4r att arrayindexet inte \u00e4r stabilt. Om ordningen p\u00e5 elementen \u00e4ndras, kommer var och en av nycklarna att \u00e4ndras och vi har ett problem. Om React<\/strong> uppst\u00e5r en situation d\u00e4r ordningen i en lista med element \u00e4ndrades, kommer den fortfarande att f\u00f6rs\u00f6ka j\u00e4mf\u00f6ra dem med nycklarna, vilket inneb\u00e4r att varje j\u00e4mf\u00f6relse kommer att sluta med att en komponent byggs om och som ett resultat kommer hela listan att byggas om fr\u00e5n b\u00f6rjan. Dessutom kan vi st\u00f6ta p\u00e5 ov\u00e4ntade problem, t.ex. uppdateringar av komponentstatus f\u00f6r element som okontrollerade ing\u00e5ngar och andra magiska problem som \u00e4r sv\u00e5ra att fels\u00f6ka.<\/p>\n

    Undantag<\/h2>\n

    L\u00e5t oss \u00e5terg\u00e5 till matrisindexet. Om du anv\u00e4nder det som ett React-nyckel<\/strong> kan vara s\u00e5 problematiskt, varf\u00f6r React<\/strong> kommer att anv\u00e4nda det som standard? Finns det n\u00e5got anv\u00e4ndningsfall d\u00e4r det \u00e4r okej att g\u00f6ra det? Svaret \u00e4r ja, anv\u00e4ndningsfallet f\u00f6r det \u00e4r statiska listor. Om du \u00e4r s\u00e4ker p\u00e5 att en lista som du renderar aldrig kommer att \u00e4ndra sin ordning \u00e4r det s\u00e4kert att anv\u00e4nda array index, men kom ih\u00e5g att om du har n\u00e5gra unika identifierare \u00e4r det fortfarande b\u00e4ttre att anv\u00e4nda dem ist\u00e4llet. Du kan ocks\u00e5 m\u00e4rka att passering av index som nycklar kommer att g\u00f6ra React<\/strong> felmeddelande f\u00f6rsvinner, samtidigt som vissa av de externa linters visar ett fel eller en varning. Detta beror p\u00e5 att den uttryckliga anv\u00e4ndningen av index som nycklar anses vara en d\u00e5lig praxis och vissa linters kan behandla det som ett fel, medan React<\/strong> sj\u00e4lv betraktar det som en \"utvecklarna vet vad de g\u00f6r\"-situation - s\u00e5 g\u00f6r inte det om du inte verkligen vet vad du g\u00f6r. N\u00e5gra exempel p\u00e5 n\u00e4r det kan vara okej att anv\u00e4nda det undantaget \u00e4r en rullgardinsmeny med en statisk lista med knappar eller att visa en lista med element med din f\u00f6retagsadressinformation.<\/p>\n

    Ett alternativ till en datasetbaserad nyckel<\/h2>\n

    L\u00e5t oss s\u00e4ga att inget av ovanst\u00e5ende \u00e4r ett alternativ f\u00f6r oss. Vi m\u00e5ste till exempel visa en lista med element baserat p\u00e5 en array av str\u00e4ngar som kan dupliceras, men den kan ocks\u00e5 ordnas om. I det h\u00e4r fallet kan vi inte anv\u00e4nda n\u00e5gon av str\u00e4ngarna eftersom de inte \u00e4r unika (detta kan ocks\u00e5 orsaka n\u00e5gra magiska buggar), och arrayindexet \u00e4r inte tillr\u00e4ckligt bra eftersom vi kommer att \u00e4ndra ordningen p\u00e5 elementen. Det sista vi kan f\u00f6rlita oss p\u00e5 i situationer som denna \u00e4r anv\u00e4ndningen av n\u00e5gra externa identifierare. Kom ih\u00e5g att det m\u00e5ste vara stabilt, s\u00e5 vi kan inte bara anv\u00e4nda Math.random(). Det finns n\u00e5gra NPM-paket som vi kan anv\u00e4nda i s\u00e5dana fall, till exempel \"uuid\"<\/a> paket. Verktyg som detta kan hj\u00e4lpa oss att h\u00e5lla v\u00e5ra listnycklar stabila och unika, \u00e4ven n\u00e4r vi inte kan hitta r\u00e4tt identifierare inom v\u00e5r data<\/a> upps\u00e4ttning. Vi b\u00f6r \u00f6verv\u00e4ga att anv\u00e4nda databas-ID och matrisindex (om m\u00f6jligt) f\u00f6rst, f\u00f6r att minimera antalet paket som anv\u00e4nds av v\u00e5ra projekt<\/a>.<\/p>\n

    F\u00f6r att sammanfatta det hela<\/h2>\n