React Academy · Lektion

Bedste praksis for keys og refs

Brug stabile keys, undgå faldgruber ved index-as-key, og arbejd med callback refs.

Lektion 3 af 413 trin

Bedste praksis for keys og refs er en gratis React Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du at bruge keys i lister korrekt, hvorfor brug af listeindekset som key kan give fejl, og hvordan du arbejder med tilbagekaldsrefs og videresendte refs.

Hvorfor keys er vigtige

React bruger `key`-props til at holde styr på, hvilke elementer i en liste der blev ændret, tilføjet eller fjernet mellem gengivelser. En korrekt key lader React genbruge eksisterende DOM-noder; en forkert key medfører unødvendige afmonteringer og genmonteringer.

Stabile, unikke keys

Den bedste key er et stabilt, unikt id fra dine data — f.eks. et id fra en database-række eller en UUID. Denne key skal kun være unik blandt søskendeelementer, ikke globalt på hele siden.

users.map(user => (
  <UserCard key={user.id} user={user} />
))

Hvorfor indeks som key er problematisk

Det fungerer fint at bruge listeindekset som key i statiske lister, men det giver fejl i sorterede eller filtrerede lister. Når elementer ændrer rækkefølge, matcher React komponenter efter indeks og genbruger de forkerte DOM-noder, så indtastningsværdier og animationstilstand bliver ødelagt.

// Risky when list can reorder or filter
items.map((item, i) => <Row key={i} {...item} />)

Hvornår et indeks som key kan bruges

Et indeks som key kan kun bruges, når: (1) listen aldrig ændrer rækkefølge eller filtreres, (2) elementerne ikke har et stabilt id, og (3) elementerne ikke har lokal tilstand (f.eks. indtastningsværdier). Statiske visningslister er fine.

Generering af stabile id'er

Hvis dine data ikke har et id, skal du generere et, når du opretter elementet (ikke under gengivelsen). Du kan bruge `crypto.randomUUID()` eller biblioteket `nanoid`.

const newItem = { id: crypto.randomUUID(), text: 'Buy milk' };

Grundlæggende om useRef

`useRef` returnerer et objekt, der kan ændres, og hvis `.current`-værdi bevares mellem gengivelser uden at udløse nye gengivelser. Det bruges til at holde DOM-referencer og værdier, der kan ændres, f.eks. timer-id'er.

const inputRef = useRef(null);
<input ref={inputRef} />
// Access DOM node: inputRef.current.focus();

Tilbagekaldsrefs

I stedet for at sende et ref-objekt kan du sende en **tilbagekaldsref** — en funktion, som React kalder med DOM-noden, når den monteres, og med `null`, når den afmonteres. Det lader dig opsætte logik præcis, når noden bliver tilgængelig.

function Input() {
  return (
    <input
      ref={node => {
        if (node) node.focus();
      }}
    />
  );
}

forwardRef til komponentrefs

Funktionskomponenter accepterer ikke `ref` som en almindelig prop. Omslut komponenten med `React.forwardRef`, så overordnede komponenter kan knytte en ref til en intern DOM-node.

const FancyInput = React.forwardRef((props, ref) => (
  <input ref={ref} className="fancy" {...props} />
));

// Parent
const inputRef = useRef(null);
<FancyInput ref={inputRef} />

useImperativeHandle

Når en overordnet komponent har en ref til en underordnet komponent, kan du styre præcis, hvad den eksponerer, ved hjælp af `useImperativeHandle`. Det holder den underordnede komponents interne DOM privat, samtidig med at der stilles en ren imperativ API til rådighed.

const Child = forwardRef((_, ref) => {
  const innerRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => innerRef.current.focus(),
  }));
  return <input ref={innerRef} />;
});

Hurtigt tjek

Hvorfor bør du undgå at bruge listeindekset som key i en liste, der kan ændre rækkefølge?

Besvar den i den interaktive lektion

Opsummering

Brug stabile id'er fra data som keys, undgå indeks-keys i dynamiske lister, brug `useRef` til DOM-adgang og værdier, der kan ændres, brug tilbagekaldsrefs til logik ved montering og afmontering, og brug `forwardRef` til at eksponere refs fra underordnede komponenter.

Næste trin

Næste lektion: **Mappestruktur og navngivningskonventioner** — du lærer at organisere et React-projekt med funktionsbaserede mapper og konsekvent filnavngivning.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Bedste praksis for keys og refs” gratis?

Ja — hele teksten til “Bedste praksis for keys og refs” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Bedste praksis for keys og refs”?

Brug stabile keys, undgå faldgruber ved index-as-key, og arbejd med callback refs. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Bedste praksis for keys og refs”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Hvad StrictMode gør
Pure Components og undgåelse af sideeffekter i render
Bedste praksis for keys og refs
Mappestruktur og navngivningskonventioner

← Tilbage til React Academy