setState in principle React

setState principle

React pages to update the core idea around the state, then the state is the principle setState update of what it is?

Analysis following code:

import React from "react";

export default class extends React.Component{

    state={
        count:1
    }

    add = ()=>{
        this.setState({count:this.state.count+1})
        console.log("add");
        this.setState({count:this.state.count+1})
        console.log("add");
        this.setState({count:this.state.count+1})
        console.log("add");
    }

    render (){
        console.log("render");
        
        return(
            <div>
                <h2>{this.state.count}</h2><button onClick={this.add}>+</button>
            </div>
        )
    }
}

According to operating results can be found, click on the "+" button, add three outputs, also said three setState statement will be executed, but our results show our count value increased by only once, to 2, rather than increase three times becomes 4, this is why?

Analysis of the results presentation:

React entire system has a concept called the transaction, the transaction has a status value isTrans, default is false, meaning that the current transaction is not turned on, or that currently do not have this concept of a transaction, the above code, button a button binding called the add click event (commissioned in the document body), when the button is clicked, isTrans this state value is set to true, means opening a thing, start trigger event, an event which has invoked this.setState function, while maintaining an internal setState array (to be understood that a wait queue queue update, attention has not been updated, but wait for the update), then the object {count: 2} in the queue, then the process proceeds to the next judgment is true or isTrans false, if true means isTrans is not the end of things, the end setState method, and then execute the next statement output "add". So it will not update the state, the second call to the same is true, to the time of the last call state, things did not end, but the end of the add method has been called, so the value isTrans will be set to false, means that a transaction has been completed, enter update process, the objects {count: 2} into the queue object to be read (to be updated value) in the queue queue, and the combined (combined in order to take out), proceed case isTrans authenticity determination, it is determined is false, then update the state, empty the queue (waiting for the next thing to come), call the render method to re-render the page.

Summary of the steps: 1. The combined read queue and the queue

2, the modified state values

3, clear queue empty queue

4, call the render method to re-render the page

Analysis of the code below:

import React from "react";

export default class extends React.Component {

    state = {
        count: 1
    }

    add = () => {
        Promise.resolve().then(
            () => {
                this.setState({ count: this.state.count + 1 })
                console.log("add");
                this.setState({ count: this.state.count + 1 })
                console.log("add");
                this.setState({ count: this.state.count + 1 })
                console.log("add");
            }
        )
        console.log("end");
    }

    render() {
        console.log("render");

        return (
            <div>
                <h2>{this.state.count}</h2><button onClick={this.add}>+</button>
            </div>
        )
    }
}

Analysis of the results presentation

This difference between the code and the code of the code is in the setState asynchronous environment, a result which will be set to state 4.

Because it is run in an asynchronous environment, so when the add method is called asynchronous code asynchronous tasks will be thrown into the queue, after executing the console.log ( "end") statement means that the method call ends, then perform asynchronous Code this case, because the end isTrans things because the called method is set to false, this also represents the end of a transaction, and therefore each time the function is executed setState when put into the queue objects {count: 2} into them, and then directly modify the state, empty the queue, call render, and so, count values ​​in the state has been modified to 4 after performing three times.

Attachment: analysis