setState同步异步理解

state的存在是为了动态改变组件，比如根据不同的用请求，来重新渲染组件。setState()用来改变或定义state。

• setState更新state可能是异步的，内部会把多次更新合并成一次，setState是有序的，也就是说不固安setState被调用多少次，他只会最后渲染一次，之前的几次调用会被默认覆盖，所以下面的输出应该为0.这里的setState应该是异步操作。

import React from "react"
import ReactDOM from "react-dom"
class Counter extends React.Component{
    state = {number:0} 
    handleClick = (event)=>{
        this.setState({number:this.state.number+3})
        this.setState({number:this.state.number+2})
        this.setState({number:this.state.number+1})
        console.log(this.state.number) //修改状态之前位0，修改后为1 
    }
    render(){
        return(
            <div>
                <p>{this.state.number}</p>
                <button onClick={this.handleClick}>+</button>
            </div>
        )
    }
}
ReactDOM.render(<Counter />, window.app)

• 要想让setState的三次调用都被执行，有两种解决方案：

1.可以在setState中写一个函数，函数的第一个参数就是prevState；

2.可以利用嵌套，嵌套多个setState，每一个SetState第二个参数是一个回调函数，当状态设置成功后，它会调用第二个回调函数。

import React from "react"
import ReactDOM from "react-dom"
class Counter extends React.Component{
    state = {number:0} 
    handleClick = (event)=>{
        // 第1种写法：在setState中写一个函数，函数的第1个参数代表上次的状态
        this.setState((prevState)=>({number:prevState.number+1}))
        this.setState((prevState)=>({number:prevState.number+1}))
        this.setState((prevState)=>({number:prevState.number+1}))
        // 第2种写法：嵌套  setState可以写两个参数，第二个参数是一个回调函数
          this.setState({number:this.state.number+3},()=>{
            this.setState({number:this.state.number+3},()=>{
                 this.setState({number:this.state.number+3})
             })
       })
    }
 
    render(){
        return(
            <div>
                <p>{this.state.number}</p>
                <button onClick={this.handleClick}>+</button>
            </div>
        )
    }
}

ReactDOM.render(<Counter />, window.app)