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

Posted 2022-04-21 wangxi01

class Example extends React.Component 
  constructor() 
    super();
    this.state = 
      val: 0
    ;
  
  
  componentDidMount() 
    this.setState(val: this.state.val + 1);
    console.log(this.state.val);    // 第 1 次 log

    this.setState(val: this.state.val + 1);
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => 
      this.setState(val: this.state.val + 1);
      console.log(this.state.val);  // 第 3 次 log

      this.setState(val: this.state.val + 1);
      console.log(this.state.val);  // 第 4 次 log
    , 0);
  

  render() 
    return null;
  
;

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。

**原因：**在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

详细请看 https://github.com/LuNaHaiJiao/blog/issues/26