React 中 setState 什么时候是同步的,什么时候是异步的?

118 阅读1分钟

在 React 中,setState 方法的更新可能是同步的也可能是异步的,这取决于更新状态的方式和调用时机。

当使用 setState 方法更新状态时,React 会根据一定规则来决定是否同步更新状态。以下情况下,setState 方法是同步更新状态:

  1. 当在 React 事件处理函数中调用 setState 方法时,React 会立即更新组件状态,并重新渲染组件。
  2. 在非 React 事件处理函数中,如果调用了 setState 方法并且没有指定回调函数,则 React 会同步更新状态。

除上述情况外,setState 方法通常是异步更新状态的。具体来说:

  1. 在 React 生命周期或生命周期相关方法中(如componentDidMount、shouldComponentUpdate等)调用 setState 方法时,React 会异步更新状态,并在合适的时候批量更新组件状态,以提高性能。
  2. 在 React 合成事件(SyntheticEvent)处理函数中调用 setState 方法时,React 也会异步更新状态,并在合适的时间批量更新组件状态,以提高性能。
  3. 当在 setState 方法中传入回调函数时,React 也会异步更新状态,然后在更新完成后调用回调函数。

需要注意的是,无论是同步更新状态还是异步更新状态,都不能保证立即得到更新后的状态值,因为 setState 方法是异步的,并且 React 会对多个 setState 命令进行批量处理,以减少不必要的重绘。如果需要在更新状态后获取最新的状态值,可以使用 setState 的回调函数来实现。