this.setState同步异步问题

this.setState中的回调函数在state改变之后且组件重新render后执行

state={
        count:1
    }

react事件监听回调和react生命周期钩子中是异步执行

  onClick=()=>{
        this.setState(state=>({
                count:state.count+1
        }),()=>{
            console.log("onClick"+this.state.count)  //2
        })
        console.log("onClick"+this.state.count)  //1
    }

componentDidMount() {
      this.setState(state=>({
          count:state.count+1
      }))
      console.log(" componentDidMountk"+this.state.count)  //1
    }

render() {
      console.log("render()"+this.state.count)  //2
      return(
          <Button onClick={this.onClick}>更新</Button>
      )
  }

在非react控制的异步函数中是同步执行的
比如定时器回调，promise回调，原生事件监听回调
且count值是在render之后输出的

onClick1=()=>{
        setTimeout(()=>{
            this.setState(state=>({
                count:state.count+1
            }))
            console.log("onClick"+this.state.count)  //2
        })

    }
 onClick2=()=>{
    const p=this.ref.current
     	p.onclick=()=>{
            this.setState(state=>({
                count:state.count+1
            }))
            console.log("onClick"+this.state.count)  //2
        }
    }

    onClick3=()=>{
       Promise.resolve().then(value => {
           this.setState(state=>({
               count:state.count+1
           }))
           console.log("onClick"+this.state.count)  //2
       })

    }

在异步执行中，多次调用问题
调用setState多次，render都是只渲染一次

 //函数形式，render输出的count为3
    onClick1=()=>{
           this.setState(state=>({count:state.count+1}))
           console.log("onClick"+this.state.count)  //1
           this.setState(state=>({count:state.count+1}))
           console.log("onClick"+this.state.count)  //1
    }
    //对象形式，render输出的count为2
    onClick2=()=>{
        this.setState({count:this.state.count+1})
        console.log("onClick"+this.state.count)  //1
        this.setState({count:this.state.count+1})
        console.log("onClick"+this.state.count)  //1
    }
    //render输出的count为2
    onClick3=()=>{
        this.setState(state=>({count:state.count+1}))
        console.log("onClick"+this.state.count)  //1
        this.setState({count:this.state.count+1})
        console.log("onClick"+this.state.count)  //1
    }
    //render输出的count为3
    onClick3=()=>{
        this.setState({count:this.state.count+1})
        console.log("onClick"+this.state.count)  //1
        this.setState(state=>({count:state.count+1}))
        console.log("onClick"+this.state.count)  //1
    }