React Academy · Lektion

Hvad StrictMode gør

Forstå dobbeltkald og advarsler om forældede API'er under udvikling.

Lektion 1 af 413 trin

Hvad StrictMode gør er en gratis React Academy-lektion på CoddyKit. Dette er lektion 1 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, hvad React.StrictMode gør under udvikling, hvilke advarsler det viser, og hvordan det hjælper dig med at skrive mere sikker React-kode.

Hvad er StrictMode?

StrictMode er en særlig React-komponent, der omslutter en del af dit træ og aktiverer ekstra kontroller **kun under udvikling**. Det har ingen effekt på produktionsbuildet.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Dobbeltkald af livscyklusmetoder

I Strict Mode kalder React med vilje din komponentfunktion og nogle livscyklusmetoder **to gange** under udvikling. Det er designet til at finde sideeffekter, der ikke bliver ryddet korrekt op.

Hvorfor kaldes de to gange?

React 18+ kan fremover montere komponenter igen (f.eks. i forbindelse med Fast Refresh og Offscreen API). Dobbeltkald under udvikling simulerer dette, så du opdager fejl som abonnementer, der ophobes, eller DOM-ændringer, der udføres to gange.

Effektens montering–afmontering–genmontering

Med StrictMode i React 18 udføres alle `useEffect`-effekter, ryddes op og udføres igen ved den første montering. Hvis din oprydningsfunktion er korrekt, er det dobbelte kald ufarligt. Hvis din app går i stykker, mangler oprydningen eller er den forkert.

useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id); // cleanup required!
}, []);

Registrering af forældede API'er

StrictMode advarer, når din kode bruger forældede React-API'er som `componentWillMount`, `componentWillReceiveProps` og string refs. Disse advarsler vises som gule advarsler i browserkonsollen.

Advarsel om den ældre Context API

Hvis et tredjepartsbibliotek bruger den ældre Context API (`childContextTypes` / `getChildContext`), advarer StrictMode. Det viser, at biblioteket skal opdateres til den moderne `React.createContext`-API.

Sikkert at aktivere i eksisterende apps

Du kan omslutte en del af dit komponenttræ med StrictMode for gradvist at aktivere det i en eksisterende app. Begynd med nye sektioner, og udvid derefter, efterhånden som du løser advarslerne.

function App() {
  return (
    <>
      <LegacyPart />  {/* not wrapped */}
      <StrictMode>
        <NewFeature />
      </StrictMode>
    </>
  );
}

Ingen visuel forskel

StrictMode gengiver ingen synlig brugerflade. Det er udelukkende et udviklingsværktøj. Du vil ikke se ekstra elementer i DOM'en — kun flere advarsler i konsollen og den dobbelte kaldadfærd.

Aktivér det fra første dag

Den bedste praksis er at aktivere StrictMode helt fra projektets begyndelse. Det er langt billigere at løse problemer med dobbeltkald tidligt end at opdage dem senere, når kodebasen er stor.

Hurtigt tjek

Hvad er formålet med React StrictModes dobbeltkald af komponentfunktioner?

Besvar den i den interaktive lektion

Opsummering

StrictMode er et udviklingsværktøj uden runtime-omkostninger, der kalder gengivelser og effekter to gange for at finde uren kode, advarer om forældede API'er og gør din app klar til fremtidige React-funktioner.

Næste trin

Næste lektion: **Rene komponenter og undgåelse af sideeffekter under gengivelse** — du lærer at skrive gengivelsesfunktioner uden ændringer af data og eksterne læsninger.

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 “Hvad StrictMode gør” gratis?

Ja — hele teksten til “Hvad StrictMode gør” 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 “Hvad StrictMode gør”?

Forstå dobbeltkald og advarsler om forældede API'er under udvikling. 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 1 af 4.

Hvor lang tid tager lektionen “Hvad StrictMode gør”?

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