Tilstandshåndtering med Hooks
Lær å håndtere komponentspesifikke data ved hjelp av `useState` og andre viktige React Hooks.
Tilstandshåndtering med Hooks er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.
Introduksjon til komponenttilstand
I React viser tilstand til data som en komponent administrerer internt, og som kan endres over tid slik at det påvirker hvordan komponenten gjengis.
Tenk på det som komponentens minne. Når tilstanden endres, oppdaterer React bare de nødvendige delene av brukergrensesnittet på en effektiv måte.
Hvorfor tilstand er viktig
Tilstand er avgjørende for å bygge interaktive og dynamiske webapplikasjoner. Uten tilstand ville brukergrensesnittet vært statisk og ikke kunnet reagere på brukerhandlinger.
- Brukerinndata: Lagre tekst fra et inndatafelt.
- Veksleknapper: Styre om en meny er åpen eller lukket.
- Tellere: Holde oversikt over en tallverdi.
Det gjør komponentene Deres «levende»!
Møt `useState`-hooken
For å legge til tilstand i funksjonelle komponenter i React bruker vi en spesiell funksjon som kalles en Hook. Den viktigste hooken for å håndtere lokal komponenttilstand er useState.
Hooks er funksjoner som lar Dem koble funksjonelle komponenter til React-funksjoner som tilstand og livssyklusmetoder.
Deklarere tilstand med `useState`
useState-hooken returnerer en tabell med to elementer:
- Den gjeldende tilstandsverdien.
- En funksjon som oppdaterer tilstandsverdien.
Vi bruker destrukturering av tabeller for å hente ut disse verdiene:
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>
);
}Oppdatere tilstand: Enkel teller
For å endre tilstanden må De kalle setter-funksjonen (f.eks. setCount). Når De kaller denne funksjonen, gjengir React komponenten på nytt med den nye tilstandsverdien.
Prøv å klikke på knappen for å se at tellingen endres!
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>
);
}Tilstandsoppdateringer er asynkrone
Det er viktig å vite at tilstandsoppdateringer i React ofte er asynkrone. Det betyr at React kan samle flere tilstandsoppdateringer av hensyn til ytelsen.
Derfor er det tryggere å sende en funksjon til setter-funksjonen hvis den nye tilstanden avhenger av den forrige tilstanden.
Funksjonelle tilstandsoppdateringer
Når tilstanden oppdateres basert på den forrige verdien, skal De angi en funksjon til setter-funksjonen. Denne funksjonen mottar forrige tilstand som et argument.
Dette mønsteret sikrer at De alltid arbeider med den mest oppdaterte tilstanden og unngår vanskelige feil.
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 av brukerinndata
useState egner seg perfekt til å styre skjemafeltelementer. Når verdien til et inndatafelt styres av React-tilstand, kalles det en kontrollert komponent.
Dette gir full kontroll over verdien i inndatafeltet og gjør validering eller transformasjon enkelt.
Eksempel på kontrollert inndata
Slik kan De bruke useState til å håndtere verdien i et tekstfelt. Hendelsesbehandleren onChange oppdaterer tilstanden hver gang brukeren skriver.
Skriv noe 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>
);
}Rask sjekk: `useState`
Hvilke av følgende påstander om useState-hooken i React er SANNE?
Oppsummering: Tilstand med hooks
De har nå lært det grunnleggende om tilstandshåndtering i React ved hjelp av useState-hooken!
- Hva er tilstand? Data som endres og påvirker gjengivelsen av komponenten.
useState: Den primære hooken for å legge til tilstand i funksjonelle komponenter.- Syntaks:
const [value, setValue] = useState(initial); - Oppdatering: Bruk alltid setter-funksjonen. Ved oppdateringer basert på den forrige tilstanden skal De sende en funksjon til setter-funksjonen.
- Bruksområder: Tellere, vekslebrytere, håndtering av brukerinndata og mye mer!
Å beherske useState er et grunnleggende steg i utviklingen av interaktive React-apper.
Lær deg TypeScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Tilstandshåndtering med Hooks» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «Tilstandshåndtering med Hooks», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.
Hva lærer jeg i «Tilstandshåndtering med Hooks»?
Lær å håndtere komponentspesifikke data ved hjelp av `useState` og andre viktige React Hooks. Du øver på Next.js 15 for fullstack-webapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Next.js 15 for fullstack-webapper?
Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Tilstandshåndtering med Hooks»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Next.js 15 for fullstack-webapper-leksjonen?
Ja. Alle Next.js 15 for fullstack-webapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- React-komponenter og JSX
- Tilstandshåndtering med Hooks
- Props og kommunikasjon mellom komponenter
- Gjengivelse av lister, nøkler og betinget UI