React understanding of setState

　　We all know React in setState () method is used to change the status of the components have been used in the project, what problems did not appear (to use too simple), but today read an article mentioned setState Note that when using two points, to deepen the understanding of setState () of.

 　　setState () The easiest way to use, it is to pass an object, object attributes that we want to change the status of the object in write-only those states that we want to change it, react this time we will do change and do not change the original state to merge, forming a new state, re-rendering components. Write a simple example, click on the button clicks, create-react-app to create a project, write the following in the App.js

import React from "react";

export default class App extends React.Component {

    state = {
        counter: 0
    }
    handleClick = () => {
        this.setState({
            counter: this.state.counter + 1
        })
    }
    render() {
        return (
            <div>
                <p>点击了{this.state.counter}次</p>
                <button onClick={this.handleClick}>点击</button>
            </div>
        )
    }
}

　　Simple enough, but then, if you want to add a clickable state hasButtonBeenClicked, as long as the counter> 0 even if clicked on, with, of course, and in setState () method, add the

hasButtonBeenClicked changes

this.setState({
      counter: this.state.counter + 1,
      hasButtonBeenClicked: this.state.counter > 0 });

　　app.js changes are as follows:

Export default class the extends the App React.Component { 

    State = { 
        counter: 0 , 
        hasButtonBeenClicked: to false  // click state defaults to false 
    } 
    the handleClick = () => {
         the this .setState ({ 
            counter: the this .state.counter +. 1 , 
            hasButtonBeenClicked: the this .state.counter> 0   // change status click 
        }); 
    } 
    the render () { 
        return (
             <div> 
                <P> whether clicked { the this.state.hasButtonBeenClicked.toString()}, 点击了{this.state.counter}次</p>
                <button onClick={this.handleClick}>点击</button>
            </div>
        )
    }
}

　　Click the button once you found a problem, whether to click display false, but they do show up once clicked.

　　

　　This is setState () asynchronous operation, always knew setState () is an asynchronous change state, but not so written, when calling to change parts of the state setState, it does not take effect immediately, React To improve efficiency, it may choose to change several states as a group, together with the status change. That is setState, if the state of the second or subsequent us to change, if dependent on a state of change, it may not take effect. Because of the asynchronous operation, or after the second state, not to take a first value of the latest state. Second row hasButtonBeenClicked in this.state.counter do not get to set the date of the first line, it is still to get the old value this.state.counter.

　　If the second state dependent on a state, it is necessary to use setState the second argument, the callback function, after only the first state set successfully, it will execute the callback, setState () changed as follows

handleClick = () => {
        this.setState({ counter: this.state.counter + 1 }, 
            () => this.setState({ hasButtonBeenClicked: this.state.counter > 0 }));
    }

　　The second point of note is repeated to change a value. When seState () repeatedly to modify the value of a state when (the handleClick for loop), it does not means all states will have values ​​out the reaction, but rather, a latest value to get away.

handleClick = () => {
        for (let index = 0; index < 5; index++) {
            this.setState({ counter: this.state.counter + 1 });
        }
    }

　　When clicks on the button, it displays the 1, instead of 5 per click, plus 1. In this case only be used in the second embodiment setState, setState the first parameter, in addition to the object, can also accept a function (state, prop) as a parameter to return the updated status, as follows, then you will find the display 5.

handleClick = () => {
    for (let index = 0; index < 5; index++) {
        this.setState(state => ({
            counter: state.counter + 1
        }))
    }
}