setState并不是立即生效

[lixingdecai]

这是新手的一个必趟误区。
认为setState()结束后会渲染页面。但是并不是这样。

看例子

componentDidMount(){
  this.setState({
    val: this.state.count + 1
  });
  //第一次输出
  console.log(this.state.count);

  this.setState({
    val: this.state.count + 1
  });
  //第二次输出
  console.log(this.state.count);

  setTimeout(()=>{
    this.setState({val: this.state.count + 1});
    //第三次输出
    console.log(this.state.count);
    this.setState({
        val: this.state.val + 1
    });
    //第四次输出
    console.log(this.state.count);
  }, 0);  
}

输出结果 0 0 2 3

四次打印，分为两组，这两组的调用栈都是不同的

看看setState的调用流程
this.setState() == 传入state/ 还有回调 ==> enqueueSetState() / enqueueCallback ==> 是否处于批量更新模式 ==> updateComponent == > 更新pending state or props