React学习小记--setState的同步与异步

react中,state不能直接修改,而是需要使用setState()来对state进行修改,那什么时候是同步而什么时候是异步呢?

基础代码:

    setCounter = (v) => {
        this.setState({
            counter: this.state.counter + v
        })
    }
    changeValue = () => {
        //调用增加函数 每次counter + 1
        this.setCounter(1)
    }
    render(){
        return (
            <div className="set-state-page" >
               <h2 onClick={this.changeValue}>setState page</h2>
               {this.state.counter}
           </div>
        )
    }

异步执行

合成事件中的异步

在setCounter()中加入一行console.log(this.state.counter),观察运行setState后的counter

    setCounter = (v) => {
        this.setState({
            counter: this.state.counter + v
        })
        console.log("异步的counter", this.state.counter)
    }

通过运行上述代码:

生命周期中的异步

加入生命周期componentDidMount()

    componentDidMount(){
        this.changeValue()
    }

刷新页面后直接得到运行结果:

同步执行

setState的回调中同步

setState()第二个参数是一个回调函数,在setState结束后执行,我们在回调函数中执行log

代码改为(同时保留是异步的log进行对比):

    setCounter = (v)=>{
        this.setState({
            counter: this.state.counter + v
        },()=>{
            console.log("同步的counter", this.state.counter);
        })
        console.log("异步的counter", this.state.counter)
    }

运行结果如下:

原生事件中的同步

通过document.getElementById来获取到一个元素并通过addEventListener给它添加一个click事件,观察这个是否同步

   componentDidMount(){                 
       document
           .getElementById("btn")
           .addEventListener("click",this.changeValue)
   }
   render(){
       return (
          <div className="set-state-page" >
              <button id="btn">{this.state.counter}</button>
          </div>
       )
   }

运行结果如下: