React setState：同步还是异步？

2024-02-06 00:12:27

React 中 setState 的同步与异步行为

React 作为当今最流行的 JavaScript 框架之一，提供了诸如 setState 等状态管理方法，允许组件根据用户交互或其他事件更新其状态。然而，setState 在不同情况下表现出同步或异步行为，这可能会让开发者感到困惑。

在 React 中，setState 主要在两种情况下表现为异步：

生命周期方法和合成事件： 在组件生命周期方法（如 componentDidMount 或 componentWillUpdate）和合成事件处理程序（如 onClick 或 onChange）中调用 setState 时，更新是异步的。这意味着在这些方法执行后，组件的状态不会立即更新。相反，React 会将状态更新安排在下次重新渲染之前。

在以下情况下，setState 在 React 中是同步的：

原生事件处理程序： 在原生 DOM 事件处理程序（如 addEventListener）中调用 setState 时，更新是同步的。这意味着状态更新将在事件处理程序执行后立即生效。
异步方法： 在使用 setTimeout、setInterval 或 Promise 等异步方法中调用 setState 时，更新是同步的。这主要是由于这些方法通常涉及到 JavaScript 事件循环的宏任务和微任务。

理解 setState 的同步与异步行为对于避免意外行为和确保应用程序的正确功能至关重要。例如，在生命周期方法或合成事件处理程序中使用 setState 时，需要意识到状态更新不会立即生效。

有几种技术可以用来避免 setState 异步性的影响：

使用 callback 函数： 在生命周期方法或合成事件处理程序中调用 setState 时，可以使用 callback 函数来处理状态更新后的操作。
使用 useLayoutEffect 钩子： useLayoutEffect 钩子可以在 DOM 更新后立即运行，这可以用于在状态更新后执行同步操作。
延迟状态更新： 如果需要在生命周期方法或合成事件处理程序中同步更新状态，则可以使用 setTimeout(setState, 0) 方法来延迟更新，使其在事件循环的下一个宏任务中执行。