setState中为什么有时候是同步的，有时候是异步的？

SUNYIMIN commented 4 years ago

constructor(props) {
     super(props)
    this.state = {
      val: 0
    }
  }
 componentDidMount() {
    this.setState({
      val: this.state.val + 1
    })
    console.log(this.state.val)

    this.setState({
      val: this.state.val + 1
    })
    console.log(this.state.val)

    setTimeout(() => {
      this.setState({
        val: this.state.val + 1
      })
      console.log(this.state.val)

      this.setState({
        val: this.state.val + 1
      })
      console.log(this.state.val)
    },0)

  }

答案： 0 0 2 3

SUNYIMIN commented 4 years ago

1.合成事件中的setState


constructor(props) {
     super(props)
    this.state = {
      val: 0
    }
  }
change = () => {
    this.setState({
      val: 1
    })
    console.log(this.state.val) // 0
  }
    render() {
        return (
            <div>
              <div onClick={this.change}>测试</div>
           </div>
          );
        }
    }```

SUNYIMIN commented 4 years ago

总结 :

setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。 setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。 setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。

参考：https://juejin.im/post/5b45c57c51882519790c7441

SUNYIMIN / react-review

setState中为什么有时候是同步的，有时候是异步的？ #7