Kako učinkovito koristiti setState i koje zamke izbjegavati
TL; DR - U slučaju da ste vizualni učenik, prijeđite na video koji sam napravio: ReactJS - Kako funkcionira setState
Ili pogledajte ovdje:
Uvod u setState
Prvo čega treba biti svjestan je činjenica da funkcija setState u Reactu djeluje asinkrono. To bi moglo potaknuti neke programere, jer vrijednosti stanja nisu odmah dostupne nakon ažuriranja.
Dvije su varijacije upotrebe setState: objektni pristup i funkcionalni pristup.
Pogledajmo kako jedno i drugo djeluje. U procesu ćemo razumjeti problem s objektnim setState.
Stvorimo jednostavnu aplikaciju.
class App extends React.Component { constructor() { super(); this.state = { value: 0, message: 'default click state' } } onClick = () => { this.setState({ value: this.state.value + 1 }); this.setState({ message: `click-state ${this.state.value}` }); } render(){ return( render->state={this.state.value} - {this.state.message} Click-setState ); }}Sada ćemo ovu aplikaciju montirati na naš korijenski DOM čvor.
ReactDOM.render( , document.getElementById("root"));Gornji kôd, kada se izvrši, prikazuje vrijednost i poruku iz stanja stanja, a također generira gumb.
Ako pogledate rukovatelj klikom, imamo dvije uzastopne funkcije setState koje pristupaju vrijednosti this.state.
Ponašanje koje očekujemo je da bi se prilikom klika na gumb trebala prikazati točna vrijednost stanja u donjem div-u (izvučeno za referencu):
render->state={this.state.value} - {this.state.message} this.state.messageSadrži vrijednosti izthis.state.value
Očekujemo da bi obje vrijednosti stanja trebale biti iste kada se klikne gumb.
Pogledajmo rezultate ovoga.
Početni izlaz prikazan je u nastavku, jer je vrijednost 0 za početak.
Nakon prvog klika očekujemo donji izlaz:
render->state=1 -click-state 1ali umjesto toga dobivamo ovo:
Pri drugom kliku izlaz se i dalje ne podudara kao što je prikazano dolje.
Do sada ste možda drijemali ili se češkali po glavi :)
Funkcija onClick ()
Pa, pogledajmo funkciju onClick () da bismo razumjeli problem.
Budući da je setState poziv asinkron prije nego što se izvrši prvo izvršavanje setState, referenca na drugi setState može ukazivati na prethodnu vrijednost, a ne na prvu trenutno ažuriranu.
To ćemo popraviti upotrebom funkcionalnog aspekta setState.
Da bismo demonstrirali popravak, stvorimo još jedan gumb:
Click-setState fnI dodajte novi obrađivač klikova naClickfn () kao što je prikazano dolje
Gornja metoda koristi funkcionalni parametar u setState.
To može biti funkcija strelice kao što je gore prikazano ili uobičajena ES5 funkcija.
Ova funkcija uzima dva parametra kao argumente: prvi je prevState, a drugi je rekviziti (u slučaju da su vam potrebni i rekviziti, koji se prosljeđuju iz roditeljske komponente). Ovdje istražujemo samo prevState.
Iznad prevState odnosi se na funkciju setState jer je posljednje ažurirano stanje. To će uvijek ukazivati na točnu vrijednost.
Pogledajmo izlaz nakon nekoliko klikova. Otkrit ćete da su vrijednosti uvijek sinkronizirane kada kliknete drugi gumb.
U gornjem primjeru možete vidjeti da upotreba funkcionalnog parametra setState ispravno usklađuje prethodno stanje i dobivate predvidljive vrijednosti stanja.
Još jednog upozorenja kojeg moramo biti svjesni: setState () uzima još jednu funkciju povratnog poziva koja se izvršava nakon uspješnog ažuriranja vrijednosti stanja.
To je vrlo zgodno u situaciji kada morate učiniti neku operaciju nakon što se setState uspješno ažurira.
Pogledajmo konačni primjer.
Pretpostavimo da želimo zabilježiti vrijednost stanja nakon ažuriranja, a kôd pišemo kao ispod. Za to ću upotrijebiti rukovatelj onClickfn ().
No, console.logprovjerimo je li vrijednost točna ili ne. Nakon tri klika dobivate ovaj status:
Primijetit ćete da zabilježena vrijednost nije zadnja ažurirana vrijednost. Popravimo ovo i vidimo izlaz.
U gornjem primjeru koristimo drugi parametar povratnog poziva setState (). Taj će se povratni poziv izvršiti nakon što setState () dovrši svoju operaciju.
Pogledajmo konačni izlaz s gore izmijenjenim kodom.
Završavati
Nadam se da će ovaj mali članak razjasniti neke zablude o setStateu.
Kompletni izvorni kod dostupan je na jsbin.
Sretno kodiranje!
Uči sa mnom @Learner + Fullstack Coach (@rajeshpillai): //twitter.com/rajeshpillai
Promotion: Special $10 coupon for medium readers for my upcoming live ReactJS-Beyond the basics course on udemy in case you wish to support our open source curriculum Mastering frontend engineering in 12 to 20 weeks