React Academy · Lektion

Løftning af state: Principper og eksempler

Flyt delt state til den nærmeste fælles ancestor, og send den ned via props.

Lektion 1 af 413 trin

Løftning af state: Principper og eksempler 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 mønsteret med at løfte tilstand op – du flytter delt tilstand til den nærmeste fælles forfader, så søskendekomponenter kan holdes synkroniserede.

Problemet: Søskende ude af synkronisering

Når to søskendekomponenter har brug for de samme data, fører separat tilstand i hver komponent til synkroniseringsfejl. Løsningen er at flytte tilstanden til deres fælles forælder.

Find den fælles forfader

Find den nærmeste komponent, der er forælder til **begge** de komponenter, som har brug for de delte data. Flyt tilstanden dertil, og send den ned som props.

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

Eksempel på at løfte en tæller

Antag, at to komponenter viser den samme tæller. I stedet for at håndtere count i hver komponent skal du løfte det til deres forælder. Begge modtager count som en prop og kalder en onChange-tilbagekaldsfunktion for at opdatere det.

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

Tilbagekalds-props til opdateringer

Children kan ikke ændre forælderens tilstand direkte. Forælderen sender en tilbagekaldsfunktion, f.eks. `onChange`, som en prop. Children kalder tilbagekaldsfunktionen, når de vil anmode om en tilstandsændring.

Kontrolleret kontra ukontrolleret efter løftning

Efter løftningen bliver det child, der tidligere ejede tilstanden, en **kontrolleret komponent** – den modtager den aktuelle værdi og onChange fra sin forælder. Forælderen er den eneste kilde til sandheden.

Løftning gennem flere niveauer

Nogle gange skal du løfte tilstanden flere niveauer op i træet. Hvis tilstanden skal løftes forbi mange mellemliggende komponenter, kan du i stedet overveje Context for at undgå at sende props gennem alle niveauerne.

Fordele ved at løfte tilstand

Når du løfter tilstanden, får du én sandhedskilde, gør dataflowet forudsigeligt – altid fra top til bund – forenkler fejlfinding og gør det nemt senere at tilføje flere brugere af den samme tilstand.

Afledt tilstand fra løftet tilstand

Beregn afledte værdier fra den løftede tilstand i forælderen, og send dem som ekstra props. Du må aldrig duplikere tilstand – afled den.

const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

Når løftning bliver for omfattende

Hvis du oplever, at du løfter tilstanden gennem 4+ niveauer, kan komponenttræets struktur være forkert, eller det kan være tid til at bruge Context eller et bibliotek til tilstandshåndtering.

Hurtigt tjek

Hvad er den rigtige fremgangsmåde, når to søskendekomponenter har brug for at dele den samme tilstandsdel?

Besvar den i den interaktive lektion

Opsummering

Løft tilstanden til den nærmeste fælles forfader, når søskendekomponenter skal dele den. Send den aktuelle værdi ned, og send tilbagekaldsfunktioner til ændringer op. Afled værdier i stedet for at duplikere tilstanden.

Næste

Næste lektion: **Prop-gennemføring: Når det giver problemer, og når det er fint** — du vil identificere problematiske kæder af prop-gennemføring og afgøre, hvornår de kræver en løsning.

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 “Løftning af state: Principper og eksempler” gratis?

Ja — hele teksten til “Løftning af state: Principper og eksempler” 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 “Løftning af state: Principper og eksempler”?

Flyt delt state til den nærmeste fælles ancestor, og send den ned via props. 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 “Løftning af state: Principper og eksempler”?

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

Løftning af state: Principper og eksempler
Prop drilling: Hvornår det skader, og hvornår det er fint
Mønstre for kommunikation mellem søskendekomponenter
Valg af den rette placering af state

← Tilbage til React Academy