useState-hook: tila ja uudelleenrenderöinnit
Kutsu useState-funktiota paikallisen tilan lisäämiseksi komponenttiin, päivitä tilaa setter-funktiolla ja ymmärrä, milloin ja miksi React renderöi uudelleen
useState-hook: tila ja uudelleenrenderöinnit on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä tila on?
Tila on ajan kuluessa muuttuvaa dataa, jonka muuttumisen pitäisi päivittää käyttöliittymä. Tavallisista muuttujista poiketen tilan muutokset käynnistävät React-komponentin uudelleenrenderöinnin uuden arvon kanssa.
useState-syntaksi
useState(initialValue) palauttaa tuplen: nykyisen arvon ja setter-funktion. Destrukturoi se heti.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // initial value: 0
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
);
}TypeScript: useState:n tyypittäminen
TypeScript päättelee tyypin alkuarvosta. Kun alkuarvo on epäselvä (null tai tyhjä taulukko), lisää eksplisiittinen tyyppiparametri.
const [count, setCount] = useState(0); // inferred: number
const [name, setName] = useState(''); // inferred: string
const [user, setUser] = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicitUudelleenrenderöinti tilan muuttuessa
Setter-funktion kutsuminen ajoittaa uudelleenrenderöinnin. React kutsuu komponenttifunktiota uudelleen uuden tila-arvon kanssa. Palautettu JSX korvaa edellisen renderöinnin virtuaali-DOM:ssa.
Tilapäivitykset ovat asynkronisia
Tilapäivitykset niputetaan ja otetaan käyttöön ennen seuraavaa renderöintiä, ei heti. Älä lue päivitettyä tilaa samassa tapahtumankäsittelijässä — uusi arvo ei ole käytettävissä ennen seuraavaa renderöintiä.
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
console.log(count); // still 0 — update hasn't applied yet
}Funktionaaliset päivitykset
Kun uusi tila riippuu edellisestä tilasta, käytä setterin funktionaalista muotoa. Näin vältät vanhentuneiden sulkeumien aiheuttamat virheet.
// Risky (stale closure in async callbacks):
setCount(count + 1);
// Safe (functional update):
setCount(prev => prev + 1);
// Important for buttons that fire rapidly:
function increment() {
setCount(c => c + 1); // always uses the latest value
}Olioiden käyttäminen tilassa
Kun tila on olio, luo aina uusi olio — älä muokkaa olemassa olevaa. React vertaa olioita viitteen perusteella, eivätkä muutokset käynnistä uudelleenrenderöintiä.
const [user, setUser] = useState({ name: 'Alice', age: 30 });
// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!
// CORRECT: new object
setUser({ ...user, age: 31 });Useita tilamuuttujia
Kutsu useStatea useita kertoja erillisiä tilamuuttujia varten. Tämä on selkeämpää kuin yksi suuri tilaolio, jos arvot eivät muutu yhdessä.
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);Laiska alustaminen
Jos alkutilan laskeminen vaatii paljon resursseja, välitä useStatelle funktio. Se suoritetaan vain ensimmäisellä renderöinnillä, ei jokaisella uudelleenrenderöinnillä.
// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());
// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());Milloin tilaa ei pidä käyttää
Kaikkien muuttujien ei tarvitse olla tilaa. Johdetut arvot (total = items.reduce(…)) kannattaa laskea renderöinnin aikana eikä tallentaa tilaan. Propeista johdettu tila on yleensä merkki ylisuunnittelusta.
Tilan nostaminen
Kun kaksi sisarkomponenttia tarvitsee yhteisen tilan, nosta tila niiden yhteiselle esi-isälle ja välitä se alaspäin propseina. Tämä on Reactin perustavanlaatuinen tilanhallintamalli ennen kontekstin tai storen käyttöönottoa.
Pikatarkistus
Miksi funktionaalista muotoa setCount(prev => prev + 1) pitäisi käyttää muodon setCount(count + 1) sijaan?
Kertaus: useState
useState palauttaa parin [value, setter]. Alkuarvo määrittää tyypin (tai käytä eksplisiittistä geneeristä tyyppiä). Setter käynnistää uudelleenrenderöinnin. Käytä funktionaalisia päivityksiä, kun uusi tila riippuu vanhasta. Oliot: levitä aina ominaisuudet uuteen olioon, älä koskaan muokkaa vanhaa. Käytä laiskaa alustusta paljon laskentaa vaativiin alkuarvoihin. Nosta tila yhteisille esi-isille, kun sisarkomponenttien on jaettava se.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”useState-hook: tila ja uudelleenrenderöinnit” ilmainen?
Kyllä – oppitunnin ”useState-hook: tila ja uudelleenrenderöinnit” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”useState-hook: tila ja uudelleenrenderöinnit”?
Kutsu useState-funktiota paikallisen tilan lisäämiseksi komponenttiin, päivitä tilaa setter-funktiolla ja ymmärrä, milloin ja miksi React renderöi uudelleen Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”useState-hook: tila ja uudelleenrenderöinnit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- JSX: syntaksi ja transpilaus
- Funktionaaliset komponentit ja propsit
- useState-hook: tila ja uudelleenrenderöinnit
- Listat, avaimet ja ehdollinen renderöinti