Bootstrap

react setState 是同步还是异步?

在 React 中,setState() 方法既有同步(Synchronous)的行为,也有异步(Asynchronous)的行为,具体取决于使用方式和场景。

通常情况下,setState() 方法是异步执行的,也就是说,React 不会立即更新组件 state 的值,而是将这个更新动作放到一个队列中,等待合适的时机再去执行。这样可以避免频繁的重新渲染,提高性能。

但在某些情况下,setState() 也可能是同步执行的,如在生命周期函数 componentDidUpdate() 和回调函数中调用 setState()。此时,React 会立即更新组件 state 的值,并且会触发重渲染。

下面是一个示例,展示了在生命周期函数、事件处理函数和回调函数中调用 setState() 的不同行为:

在该示例中,componentDidMount() 方法中调用 setState() 是异步执行的,会等待 1 秒钟后输出更新后的值。而在事件处理函数 handleClick() 中调用 setState() 也是异步执行的,因此也会等待后续的 console.log() 输出后再去更新。

但在 render() 方法中调用 setState() 是同步执行的,不会等待后续代码的输出,直接将 count 的值设置为2并输出。

另外,如果在 setState() 方法中传入一个回调函数,那么这个回调函数会在 state 更新完成后被立即执行,此时也可以认为是同步执行。

 

;