En hurtig introduktion til setState i React.js

Sådan bruges setState effektivt, og hvilke faldgruber der skal undgås

TL; DR - Hvis du er en visuel elev, skal du gå over til den video, jeg lavede: ReactJS - Hvordan setState fungerer

Eller se det her:

En introduktion til setState

Den første ting at være opmærksom på er det faktum, at setState-funktionen i React fungerer asynkront. Det kan muligvis slå nogle udviklere op, da tilstandsværdierne ikke er umiddelbart tilgængelige efter opdateringen.

Der er to variationer af brugen af ​​setState: den objektbaserede tilgang og den funktionelle tilgang.

Lad os se begge i aktion. Vi kommer til at forstå problemet med objektbaseret setState i processen.

Lad os oprette en simpel applikation.

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

Nu monterer vi denne applikation til vores rod-DOM-node.

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

Ovenstående kode gengiver, når den udføres, værdien og meddelelsen fra tilstandsobjektet og gengiver også en knap.

Hvis du ser på klikhåndtereren, har vi to på hinanden følgende setState-funktioner, der får adgang til denne.statværdien.

Den opførsel, vi forventer, er, at når der klikkes på knappen, skal den korrekte tilstandsværdi gengives i nedenstående div (ekstraheret til reference):

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

Den this.state.messageindeholder værdier frathis.state.value

Vi forventer, at begge tilstandsværdier skal være de samme, når der klikkes på knappen.

Lad os se resultatet af dette.

Den oprindelige output vises nedenfor, da værdien er 0 til at begynde med.

Efter det første klik forventer vi nedenstående output:

render->state=1 -click-state 1

men vi får dette i stedet:

Ved det andet klik matcher output stadig ikke som vist nedenfor.

Nu kan du måske snooze eller skrabe dig i hovedet :)

Funktionen onClick ()

Så lad os se på funktionen onClick () for at forstå problemet.

Da setState-opkaldet er asynkront, før den første setState-udførelse kan gennemføres, kan henvisningen til det andet setState muligvis pege på den forrige værdi og ikke den første aktuelle opdaterede.

Vi løser dette ved at bruge det funktionelle aspekt af setState.

Lad os oprette en knap til for at demonstrere rettelsen:

Click-setState fn

Og tilføj en ny klikhåndterer påClickfn () som vist nedenfor

Ovenstående metode bruger den funktionelle parameter i setState.

Dette kan være en pilfunktion som vist ovenfor eller den normale ES5-funktion.

Denne funktion tager to parametre som argumenter: den første er prevState, og den anden er rekvisitterne (hvis du også har brug for rekvisitter, som sendes fra den overordnede komponent). Her ser vi kun på den tidligere stat.

PrevState ovenfor vedrører setState-funktionen, da den er den sidst opdaterede tilstand. Dette vil altid pege på den korrekte værdi.

Lad os se output efter et par klik. Du finder ud af, at værdierne altid er synkroniserede, når du klikker på den anden knap.

I eksemplet ovenfor kan du se, at brug af den funktionelle setState-parameter batches den forrige tilstand korrekt, og du får forudsigelige tilstandsværdier.

En yderligere advarsel, vi skal være opmærksom på: setState () tager endnu en tilbagekaldsfunktion, som udføres, når tilstandsværdierne er opdateret.

Dette er meget praktisk i en situation, hvor du skal udføre nogle operationer, når setState opdateres med succes.

Lad os se et sidste eksempel.

Antag, at vi vil logge tilstandsværdien efter opdateringen, og vi skriver koden som nedenfor. Jeg vil bruge onClickfn () -handleren til dette.

But lets see the console.log and verify whether the value is correct or not. After three clicks, you get this status:

You will observe that the logged value is not the last updated value. Let’s fix this and see the output.

In the above example, we are using the setState() second callback parameter. This callback will be executed once the setState() has completed its operation.

Let’s see the final output with the above modified code.

Wrapping up

I hope this small article clears up some misconceptions about setState.

The complete source code is available at jsbin.

Happy coding!

Learn with me @Learner + Fullstack Coach (@rajeshpillai): //twitter.com/rajeshpillai

Kampagne: Særlig $ 10-kupon til mellemlæsere til min kommende live ReactJS-Beyond basics-kursus på udemy, hvis du ønsker at støtte vores open source-læseplan Mastering frontend engineering om 12 til 20 uger