Ātrs ievads setState vietnē React.js

Kā efektīvi izmantot setState un no kādām kļūmēm jāizvairās

TL; DR - Gadījumā, ja esat vizuāls skolēns, pārejiet pie manis izveidotā videoklipa: ReactJS - Kā darbojas setState

Vai skatīties to šeit:

Ievads setState

Vispirms jāapzinās fakts, ka funkcija React setState darbojas asinhronā veidā. Tas varētu izjaukt dažus izstrādātājus, jo stāvokļa vērtības nav tūlīt pieejamas pēc atjaunināšanas.

SetState izmantošanai ir divas variācijas: pieeja uz objektu un funkcionālā pieeja.

Apskatīsim abus darbībā. Mēs sapratīsim procesa objekta setState problēmu.

Izveidosim vienkāršu lietojumprogrammu.

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

Tagad mēs pievienosim šo lietojumprogrammu mūsu saknes DOM mezglā.

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

Iepriekš izpildītais kods, izpildot, atveido vērtību un ziņojumu no valsts objekta, kā arī atveido pogu.

Ja paskatās uz klikšķu apstrādātāju, mums ir divas secīgas setState funkcijas, kas piekļūst šai.valsts vērtībai.

Mēs sagaidām, ka, noklikšķinot uz pogas, pareizā stāvokļa vērtība jānorāda zemāk esošajā div (izvelk atsaucei):

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

this.state.messageSatur vērtības nothis.state.value

Mēs sagaidām, ka, noklikšķinot uz pogas, abām stāvokļa vērtībām jābūt vienādām.

Apskatīsim šī iznākumu.

Sākotnējā izeja ir parādīta zemāk, jo vērtība ir 0, lai sāktu.

Pēc pirmā klikšķa mēs sagaidām zemāk redzamo rezultātu:

render->state=1 -click-state 1

bet tā vietā mēs to saņemam:

Pēc otrā klikšķa izvade joprojām neatbilst, kā parādīts zemāk.

Tagad jūs, iespējams, snaužat vai skrāpējat galvu :)

Funkcija onClick ()

Tātad, apskatīsim funkciju onClick (), lai izprastu problēmu.

Tā kā pirms pirmās setState izpildes pabeigšanas setState izsaukums ir asinhrons, atsauce uz otro setState var norādīt uz iepriekšējo, nevis pirmo pašreizējo atjaunināto vērtību.

Mēs to novērsīsim, izmantojot setState funkcionālo aspektu.

Lai parādītu labojumu, izveidosim vēl vienu pogu:

Click-setState fn

Un pievienojiet jaunu klikšķu apstrādātāju vietnē onClickfn (), kā parādīts zemāk

Iepriekš minētajā metodē tiek izmantots funkcionālais parametrs setState.

Tā var būt bultiņas funkcija, kā parādīts iepriekš, vai parasta ES5 funkcija.

Šī funkcija kā argumentus ņem divus parametrus: pirmais ir prevState, bet otrais ir rekvizīti (ja jums ir nepieciešami arī rekvizīti, kas tiek nodoti no vecākā komponenta). Šeit mēs aplūkojam tikai prevState.

Iepriekš esošais prevState attiecas uz funkciju setState, jo tas ir pēdējais atjauninātais stāvoklis. Tas vienmēr norādīs uz pareizo vērtību.

Apskatīsim izvadi pēc pāris klikšķiem. Noklikšķinot uz otrās pogas, jūs atradīsit, ka vērtības vienmēr tiek sinhronizētas.

Iepriekš minētajā piemērā varat redzēt, ka, izmantojot funkcionālo parametru setState, tiek pareizi salikts iepriekšējais stāvoklis, un tiek iegūtas paredzamas stāvokļa vērtības.

Vēl viens brīdinājums, kas mums jāzina: setState () aizņem vēl vienu atzvanīšanas funkciju, kas tiek izpildīta, tiklīdz valsts vērtības ir veiksmīgi atjauninātas.

Tas ir ļoti ērti situācijā, kad jums ir jāveic kāda darbība, tiklīdz setState tiek veiksmīgi atjaunināts.

Apskatīsim pēdējo piemēru.

Pieņemsim, ka mēs pēc atjaunināšanas vēlamies reģistrēt stāvokļa vērtību, un mēs rakstām kodu, kā norādīts zemāk. Tam es izmantošu onClickfn () apdarinātāju.

Bet ļauj redzēt console.logun pārbaudīt, vai vērtība ir pareiza vai nē. Pēc trim klikšķiem tiek parādīts šāds statuss:

Jūs ievērosiet, ka reģistrētā vērtība nav pēdējā atjauninātā vērtība. Salabosim to un redzēsim rezultātu.

Iepriekš minētajā piemērā mēs izmantojam setState () otro atzvanīšanas parametru. Šis atzvanīšana tiks veikta, tiklīdz setState () būs pabeidzis darbību.

Apskatīsim galīgo izvadi ar iepriekš modificēto kodu.

Iesaiņošana

Es ceru, ka šis nelielais raksts atbrīvo dažus nepareizus priekšstatus par setState.

Pilns pirmkods ir pieejams vietnē jsbin.

Priecīgu kodēšanu!

Uzziniet kopā ar mani @ Studentu + Fullstack treneris (@rajeshpillai): //twitter.com/rajeshpillai

Veicināšana: Īpašs 10 ASV dolāru talons vidējiem lasītājiem manam gaidāmajam tiešraides ReactJS-Beyond pamatu kursam par udemy gadījumā, ja vēlaties atbalstīt mūsu atvērtā pirmkoda mācību programmu Priekšgala inženierijas apguve 12 līdz 20 nedēļu laikā