Nopea setState-esittely React.js: ssä

Kuinka setStatea käytetään tehokkaasti ja mitä sudenkuoppia vältetään

TL; DR - Jos olet visuaalinen oppija, siirry tekemäni videoon: ReactJS - Kuinka setState toimii

Tai katso se täällä:

Johdanto setStateen

Ensinnäkin on otettava huomioon se, että React: n setState-toiminto toimii asynkronisesti. Se saattaa viedä joitain kehittäjiä ylös, koska tilan arvot eivät ole heti käytettävissä päivityksen jälkeen.

SetStaten käytössä on kaksi muunnelmaa: olio- ja toiminnallinen lähestymistapa.

Katsotaanpa molemmat toiminnassa. Opimme ymmärtämään objektipohjaisen setState-ongelman prosessissa.

Luodaan yksinkertainen sovellus.

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 ); }}

Nyt asennamme tämän sovelluksen juuri DOM-solmuun.

ReactDOM.render( , document.getElementById("root"));

Yllä oleva koodi, kun se on suoritettu, hahmottaa arvon ja viestin tilaobjektista ja tekee myös painikkeen.

Jos katsot napsautusten käsittelijää, meillä on kaksi peräkkäistä setState-toimintoa, jotka käyttävät this.state-arvoa.

Odotamme käyttäytymistä on, että kun painiketta napsautetaan, oikea tilan arvo tulisi tehdä alla olevassa div: ssä (purettu viitteeksi):

 render->state={this.state.value} - {this.state.message} 

this.state.messageSisältää arvotthis.state.value

Odotamme, että molemmat tilan arvot ovat samat, kun painiketta napsautetaan.

Katsotaanpa tämän tulos.

Alkuperäinen lähtö näkyy alla, koska arvo on aluksi 0.

Ensimmäisen napsautuksen jälkeen odotamme seuraavaa tulosta:

render->state=1 -click-state 1

mutta saamme sen sijaan:

Toisella napsautuksella lähtö ei täsmää alla olevan kuvan mukaisesti.

Nyt olet saattanut torkuttaa tai naarmuttaa päätäsi :)

OnClick () -toiminto

Katsotaan siis onClick () -funktiota ongelman ymmärtämiseksi.

Koska setState-kutsu on asynkroninen ennen ensimmäisen setState-suorituksen saattamista päätökseen, viittaus toiseen setState-tilaan voi viitata edelliseen arvoon eikä ensimmäiseen nykyiseen päivitettyyn.

Korjaamme tämän käyttämällä setStaten toiminnallista aspektia.

Korjauksen osoittamiseksi luodaan vielä yksi painike:

Click-setState fn

Ja lisää uusi napsautuskäsittelijä onClickfn () alla olevan kuvan mukaisesti

Yllä oleva menetelmä käyttää funktionaalista parametria setStatessa.

Tämä voi olla nuolitoiminto, kuten yllä on esitetty, tai normaali ES5-toiminto.

Tämä funktio käyttää kahta parametria argumentteina: ensimmäinen on prevState ja toinen on rekvisiitta (jos tarvitset myös rekvisiittaa, joka välitetään pääkomponentista). Tässä tarkastelemme vain edeltävää valtiota.

Edellä oleva prevState liittyy setState-toimintoon, koska se on viimeisin päivitetty tila. Tämä osoittaa aina oikean arvon.

Katsotaanpa tulos muutaman napsautuksen jälkeen. Huomaat, että arvot ovat aina synkronoituna, kun napsautat toista painiketta.

Yllä olevasta esimerkistä näet, että funktionaalisen setState-parametrin avulla erätään edellinen tila oikein ja saat ennustettavissa olevat tilan arvot.

Vielä yksi varoitus, joka meidän on oltava tietoisia: setState () vie vielä yhden soittopyynnön, joka suoritetaan, kun tilan arvot on päivitetty onnistuneesti.

Tämä on erittäin kätevää tilanteessa, jossa joudut tekemään joitain toimintoja, kun setState päivittyy onnistuneesti.

Katsotaanpa viimeinen esimerkki.

Oletetaan, että haluamme kirjata tilan arvon päivityksen jälkeen, ja kirjoitamme koodin alla olevalla tavalla. Käytän tähän onClickfn () -käsittelijää.

Mutta antaa nähdä console.logja tarkistaa, onko arvo oikea vai ei. Kolmen napsautuksen jälkeen saat tämän tilan:

Huomaa, että kirjattu arvo ei ole viimeisin päivitetty arvo. Korjataan tämä ja katsotaan tulos.

Yllä olevassa esimerkissä käytämme toista soittopyyntöparametriä setState (). Tämä takaisinsoitto suoritetaan, kun setState () on suorittanut toimintansa.

Katsotaanpa lopullinen lähtö yllä olevalla muokatulla koodilla.

Käärimistä

Toivon, että tämä pieni artikkeli puhdistaa väärinkäsityksiä setStatesta.

Täydellinen lähdekoodi on saatavana osoitteesta jsbin.

Hyvää koodausta!

Opi kanssani @Learner + Fullstack Coach (@rajeshpillai): //twitter.com/rajeshpillai

Tarjous: Erityinen 10 dollarin kuponki keskiluokan lukijoille tulevalle reaaliaikaiselle ReactJS-Beyond the basics -kurssilleni, jos haluat tukea avoimen lähdekoodin opetussuunnitelmaa Käyttöliittymän suunnittelun hallitseminen 12-20 viikossa