1. setState 的更新是异步的吗？

js
changeText() {
    this.setState({
        message: 'Hello World'
    })
    console.log(this.state.message)
}

上面的代码最终打印结果并不是是 Hello World。可见 setState 是异步的操作，我们并不能在执行完setState 之后立马拿到最新的 state 的结果

2. 为什么 setState 设计为异步呢？

1. 因为 setState 设计为异步，可以显著的提升性能；

   • 如果每次调用 setState 都进行一次更新，那么意味着 render 函数会被频繁调用，界面重新渲染，这样效率是很低的；
   • 最好的办法应该是获取到多个更新，之后进行批量更新；

2. 如果同步更新了 state，但是还没有执行 render 函数，那么 state 和 props 不能保持同步。 state 和 props 不能保持一致性，会在开发中产生很多的问题；

3. setState 一定是异步吗？

其实要看情况

在 React18 之前分两种情况:

1. 在组件生命周期或 React 合成事件中，setState 是异步；
2. 在 setTimeout 或者原生 dom 事件中，setState 是同步；

在 React18 之后，默认所有的操作都被放到了批处理中（异步处理）。

如果希望代码可以同步会拿到，则需要执行特殊的 flushSync 操作：

js
flushSync(() => {
    this.setState({ counter: 8888 })
})
console.log(this.state.counter)