Skip to main content

React setState 的同步与异步

  • setState 隐式合并策略 同一执行栈且同一组件下存在多个 setState，执行合并策略，每次执行的数据将被 push 至合并队列，依次执行，这种情况下，是异步
  • 异步任务队列中的回调函数中 如 setTimeout, Promise.then 脱离了合并策略，所以是同步执行
test() {  this.setState({ count: 0 })  console.log('0', this.state.count)
  this.setState({ count: this.state.count + 1 })  console.log('+1', this.state.count)
  this.setState({ count: 2 })  console.log('2', this.state.count)
  new Promise((resolve) => {    this.setState({ count: this.state.count + 1 })    console.log('Promise:: +1', this.state.count)    resolve(void 0)  }).then(() => {    // 同 setTimeout    this.setState({ count: this.state.count + 1 })    console.log('Promise.then:: +1', this.state.count)  })
  console.log('end')}


// 执行结果：// +1 1// 2 1
// Promise:: +1 1// end// Promise.then:: +1 3// setTimeout:: +1 4

参考#