A setState gyors bemutatása a React.js fájlban

Hogyan lehet hatékonyan használni a setState-t és milyen buktatókat kell elkerülni

TL; DR - Abban az esetben, ha vizuális tanuló vagy, menj át az általam készített videóra: ReactJS - Hogyan működik a setState

Vagy nézze meg itt:

Bevezetés a setState-be

Az első tudnivaló az a tény, hogy a setState függvény a React-ban aszinkron módon működik. Ez egyes fejlesztőket felboríthat, mivel az állapotértékek a frissítés után nem állnak azonnal rendelkezésre.

A setState használatának két változata van: az objektum-alapú és a funkcionális megközelítés.

Lássuk mindkettőt működés közben. Meg fogjuk érteni az objektum alapú setState problémáját a folyamat során.

Hozzunk létre egy egyszerű alkalmazást.

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

Most csatlakoztatjuk ezt az alkalmazást a gyökér DOM csomópontunkhoz.

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

A fenti kód végrehajtásakor megjeleníti az állapotobjektum értékét és üzenetét, valamint egy gombot is megjelenít.

Ha megnézi a kattintáskezelőt, két egymást követő setState függvényünk van, amelyek elérik az this.state értéket.

Várható viselkedésünk az, hogy amikor a gombra kattintunk, a helyes állapotértéket meg kell adni az alábbi div-ben (referenciaként kivonva):

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

A (z) this.state.messageértékeit tartalmazzathis.state.value

Arra számítunk, hogy a gombra kattintva mindkét állapotértéknek meg kell egyeznie.

Lássuk ennek kimenetét.

A kezdeti kimenet az alábbiakban látható, mivel az érték kezdetben 0.

Az első kattintás után az alábbi kimenetet várjuk:

render->state=1 -click-state 1

de helyette ezt kapjuk:

A második kattintásra a kimenet még mindig nem egyezik az alábbiak szerint.

Mostanra lehet, hogy szundít vagy kapkodja a fejét :)

Az onClick () függvény

Tehát nézzük meg az onClick () függvényt a probléma megértéséhez.

Mivel a setState hívás aszinkron, mielőtt az első setState végrehajtás befejeződik, a második setState hivatkozása az előző, és nem az első aktuálisan frissített értékre mutathat.

Megoldjuk ezt a setState funkcionális aspektusának használatával.

A javítás bemutatásához hozzunk létre még egy gombot:

Click-setState fn

És adjon hozzá egy új kattintáskezelőt azClickfn () webhelyen az alábbiak szerint

A fenti módszer a setState funkcionális paraméterét használja.

Ez lehet egy nyílfunkció a fentiek szerint, vagy a normál ES5 funkció.

Ez a függvény két paramétert vesz fel argumentumként: az első a prevState, a második pedig a props (ha kellenek a kellékek is, amelyeket a szülő komponens ad át). Itt csak az prevState-t vizsgáljuk.

A fenti prevState a setState függvényre vonatkozik, mivel ez az utolsó frissített állapot. Ez mindig a helyes értékre mutat.

Lássuk a kimenetet pár kattintás után. Megállapítja, hogy az értékek mindig szinkronban vannak, amikor a második gombra kattint.

A fenti példában láthatja, hogy a funkcionális setState paraméter használata helyesen kötegeli az előző állapotot, és kiszámítható állapotértékeket kap.

Még egy figyelmeztetés, amellyel tisztában kell lennünk: a setState () még egy visszahívási funkciót vesz igénybe, amelyet az állapotértékek sikeres frissítése után hajtanak végre.

Ez nagyon hasznos olyan helyzetben, amikor a setState sikeres frissítése után valamilyen műveletet kell végrehajtania.

Lássunk egy utolsó példát.

Tegyük fel, hogy naplózni akarjuk az állapotértéket a frissítés után, és a kódot az alábbiak szerint írjuk. Ehhez az onClickfn () kezelőt fogom használni.

De megnézheti console.logés ellenőrizheti, hogy az érték helyes-e vagy sem. Három kattintás után megkapja ezt az állapotot:

Megjegyzi, hogy a naplózott érték nem az utolsó frissített érték. Javítsuk ki ezt, és nézzük meg a kimenetet.

A fenti példában a setState () második visszahívási paramétert használjuk. Ez a visszahívás akkor lesz végrehajtva, ha a setState () befejezte működését.

Lássuk a végleges kimenetet a fenti módosított kóddal.

Csomagolás

Remélem, hogy ez a kis cikk kitisztít néhány tévhitet a setState-ről.

A teljes forráskód a jsbin címen érhető el.

Boldog kódolást!

Tanulj velem @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