还是setState的问题

来源:4-4 batchedUpdates

MeSKiL

2019-05-22

经过我的测试发现

  handleClick = () => {
    this.countNumber()
  }

  countNumber() {
    const num = this.state.number
    this.setState({
      number: num + 1,
    },()=>{
      console.log(this.state.number)
    })
    this.setState({
      number: num + 2,
    },()=>{
      console.log(this.state.number)
    })
    this.setState({
      number: num + 3,
    },()=>{
      console.log(this.state.number)
    })
  }

三个回调函数输出的都是3,由此可见应该是在批量调度后,react将三个setState合并为了同一个setState,在进行一次总的setState后,执行了三个回调函数,所以输出的都是三。是这么理解的么

写回答

1回答

Jokcy

2019-05-23

状态跟新和执行回调的步骤是不一样,更新状态在渲染阶段,而调用回调是在提交阶段,所以肯定是批量跟新之后再一起调用回调的。

1
1
MeSKiL
非常感谢!
2019-05-24
共1条回复

React源码深度解析 高级前端工程师必备技能

掌握React源码,让你的开发水平没有上限,更不惧前端未来的到来

1749 学习 · 336 问题

查看课程