第11题：setState是同步的还是异步的？

生命周期和合成事件中

在 React 的生命周期和合成事件中， React 仍然处于他的更新机制中，这时无论调用多少次 setState，都会不会立即执行更新，而是将要更新的·存入 _pendingStateQueue，将要更新的组件存入 dirtyComponent。

当上一次更新机制执行完毕，以生命周期为例，所有组件，即最顶层组件 didmount 后会将批处理标志设置为 false。这时将取出 dirtyComponent 中的组件以及 _pendingStateQueue 中的 state 进行更新。这样就可以确保组件不会被重新渲染多次。

componentDidMount() {
    this.setState({
      index: this.state.index + 1
    })
    console.log('state', this.state.index);
  }

所以，如上面的代码，当我们在执行 setState 后立即去获取 state，这时是获取不到更新后的 state 的，因为处于 React 的批处理机制中， state 被暂存起来，待批处理机制完成之后，统一进行更新。

所以。setState 本身并不是异步的，而是 React 的批处理机制给人一种异步的假象。

异步代码和原生事件中

componentDidMount() {
    setTimeout(() => {
      console.log('调用 setState');
      this.setState({
        index: this.state.index + 1
      })
      console.log('state', this.state.index);
    }, 0);  
}

如上面的代码，当我们在异步代码中调用 setState 时，根据 JavaScript 的异步机制，会将异步代码先暂存，等所有同步代码执行完毕后在执行，这时 React 的批处理机制已经走完，处理标志设被设置为 false，这时再调用 setState 即可立即执行更新，拿到更新后的结果。

在原生事件中调用 setState 并不会出发 React 的批处理机制，所以立即能拿到最新结果。

最佳实践

setState 的第二个参数接收一个函数，该函数会在 React 的批处理机制完成之后调用，所以你想在调用 setState 后立即获取更新后的值，请在该回调函数中获取。

this.setState({ index: this.state.index + 1 }, () => {
      console.log(this.state.index);    
})

以上关于第11题：setState是同步的还是异步的？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。