Statehåndtering med hooks
Lær at håndtere komponentspecifikke data ved hjælp af `useState` og andre vigtige React Hooks.
Statehåndtering med hooks er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.
Introduktion til komponenttilstand
I React henviser tilstand til data, som en komponent håndterer internt, og som kan ændre sig over tid og påvirke, hvordan komponenten gengives.
Tænk på det som komponentens hukommelse. Når tilstanden ændrer sig, opdaterer React effektivt kun de nødvendige dele af din brugergrænseflade.
Hvorfor tilstand er vigtig
Tilstand er afgørende, når du bygger interaktive og dynamiske webapplikationer. Uden tilstand ville din brugergrænseflade være statisk og ude af stand til at reagere på brugerhandlinger.
- Brugerinput: Lagring af tekst fra et inputfelt.
- Skift: Håndtering af, om en menu er åben eller lukket.
- Tællere: Hold styr på en numerisk værdi.
Det gør dine komponenter 'levende'!
Mød `useState`-hooket
For at føje tilstand til funktionelle komponenter i React bruger vi en særlig funktion, der kaldes et Hook. Det primære hook til håndtering af lokal komponenttilstand er useState.
Hooks er funktioner, der lader dig koble dig på React-funktioner som tilstand og livscyklusmetoder fra funktionelle komponenter.
Deklarér tilstand med `useState`
useState-hooket returnerer et array med to elementer:
- Den aktuelle tilstandsværdi.
- En funktion til at opdatere tilstandsværdien.
Vi bruger array-destrukturering til at hente disse værdier:
import React, { useState } from 'react';
function MyComponent() {
// Declares a state variable 'count' initialized to 0
// 'setCount' is the function to update 'count'
const [count, setCount] = useState(0);
// Declares a state variable 'name' initialized to an empty string
const [name, setName] = useState('');
return (
<div>
<p>Count: {count}</p>
<p>Name: {name}</p>
</div>
);
}Opdatering af tilstand: Enkel tæller
For at ændre tilstanden skal du kalde setter-funktionen (f.eks. setCount). Når du kalder denne funktion, gengiver React din komponent igen med den nye tilstandsværdi.
Prøv at klikke på knappen for at se tælleren ændre sig!
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1); // Update the state
};
return (
<div>
<p>Current Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}Tilstandsopdateringer er asynkrone
Det er vigtigt at vide, at tilstandsopdateringer i React ofte er asynkrone. Det betyder, at React kan samle flere tilstandsopdateringer af hensyn til ydeevnen.
Derfor er det sikrere at sende en funktion til setter-funktionen, hvis den nye tilstand afhænger af den forrige tilstand.
Funktionelle tilstandsopdateringer
Når du opdaterer tilstanden ud fra dens forrige værdi, skal du angive en funktion til setter-funktionen. Denne funktion modtager den forrige tilstand som argument.
Dette mønster sikrer, at du altid arbejder med den mest aktuelle tilstand og undgår subtile fejl.
import React, { useState } from 'react';
function SafeCounter() {
const [count, setCount] = useState(0);
const incrementByTwo = () => {
// This ensures we always increment based on the latest count
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementByTwo}>Add 2</button>
</div>
);
}Håndtering af brugerinput
useState er perfekt til at styre inputelementer i formularer. Når værdien af et input styres af React-tilstanden, kaldes det en kontrolleret komponent.
Det giver dig fuld kontrol over inputtets værdi og gør det nemt at validere eller transformere den.
Eksempel på kontrolleret input
Sådan kan du bruge useState til at styre værdien af et tekstinputfelt. Hændelseshåndteringen onChange opdaterer tilstanden, hver gang brugeren skriver.
Skriv noget i feltet!
import React, { useState } from 'react';
function InputField() {
const [text, setText] = useState('');
const handleChange = (event) => {
setText(event.target.value); // Update state with input's value
};
return (
<div>
<input type="text" value={text} onChange={handleChange} />
<p>You typed: {text}</p>
</div>
);
}Hurtigt tjek: `useState`
Hvilke af følgende udsagn om hooken useState i React er sande?
Opsummering: Tilstand med hooks
Du har nu lært det grundlæggende i tilstandshåndtering i React ved hjælp af hooken useState!
- Hvad er tilstand? Data, der ændrer sig og påvirker gengivelsen af komponenten.
useState: Den primære hook til at tilføje tilstand til funktionelle komponenter.- Syntaks:
const [value, setValue] = useState(initial); - Opdatering: Brug altid setter-funktionen. Ved opdateringer, der er baseret på den forrige tilstand, skal du sende en funktion til setter-funktionen.
- Anvendelsesområder: Tællere, skifteknapper, håndtering af brugerinput og meget mere!
At blive fortrolig med useState er et grundlæggende skridt i udviklingen af interaktive React-apps.
Lær TypeScript 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
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Statehåndtering med hooks” gratis?
Ja — alle 3 lektioner i læringssporet Next.js 15-fullstackwebapps, inklusive “Statehåndtering med hooks”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Statehåndtering med hooks”?
Lær at håndtere komponentspecifikke data ved hjælp af `useState` og andre vigtige React Hooks. Du øver dig i Next.js 15-fullstackwebapps 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å Next.js 15-fullstackwebapps?
Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps 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 2 af 4.
Hvor lang tid tager lektionen “Statehåndtering med hooks”?
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 Next.js 15-fullstackwebapps-lektion?
Ja. Alle Next.js 15-fullstackwebapps-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
- React-komponenter og JSX
- Statehåndtering med hooks
- Props og kommunikation mellem komponenter
- Rendering af lister, keys og betinget UI