setState 不立即更新状态 - Javascript

当使用 setState() 更新组件状态时，React 并不会立即进行更新操作。React 会将更新的状态放入队列中，并等待下一次的渲染周期进行更新操作。

为什么要这样做？

React 采用了异步更新机制，这样可以将多次状态更新合并成一次更新，从而提高性能。如果每次调用 setState() 都立即更新状态，可能会导致一些不必要的重渲染的操作，影响程序的性能。

如何处理异步更新？

如果你需要在状态更新后立即执行一些操作，可以将一个回调函数作为 setState() 的第二个参数传入，这个回调函数会在状态更新完成后被立即执行。

this.setState({ 
  count: this.state.count + 1 
}, () => {
  // 在状态更新后执行一些操作
});

注意事项

如果你需要使用到前一个状态值进行更新操作，建议使用函数式的 setState()，这样可以避免异步更新导致的前一个状态值错误问题。

this.setState((prevState, props) => {
  return { count: prevState.count + 1 }
});

结论

虽然 setState() 的更新不是立即的，但是这种机制并不会影响程序的正确性，反而能够提高程序的性能。如果需要在状态更新后执行一些操作，使用回调函数或函数式的 setState() 即可。