为什么 React Setstate 没有立即更新？

React 的 setState 函数并不保证立即更新组件的状态，这是因为 React 采用了一种名为批处理更新（batched updates）的性能优化策略。当您调用 setState 时，React 实际上将这个状态更改排入一个队列中，并非立即执行状态更新。这样做的目的是为了减少不必要的DOM操作和重渲染，从而提高应用程序的性能。

这里有几个关键点解释为什么 setState 不立即更新：

异步更新：setState 实际上是一个异步操作。React 会收集多次状态更改，然后一次性进行批量更新，这通常发生在浏览器的每一帧渲染结束之前。
组件生命周期：React 的设计理念是在组件的生命周期中的特定点上统一进行状态更新和渲染。如果每次调用 setState 都会立即触发重渲染，那么在处理复杂组件时会产生性能问题。
避免不必要的渲染：假设您在一个事件处理函数中连续调用了多次 setState。如果每次调用都立即更新，那么浏览器可能会进行多余的渲染操作，这显然是不高效的。通过批量更新，React 可以合并这些状态更改，并只进行一次渲染。
并发模式：在 React 的未来版本中（如 React 18 引入的并发模式），React 更加智能地调度更新，以便更好地利用浏览器的渲染能力，提供流畅的用户体验。

举个例子，假设在一个组件的事件处理函数中，你连续调用了三次 setState，每次都改变了组件状态中的一个值：

javascript
this.setState({ value: this.state.value + 1 });
this.setState({ value: this.state.value + 1 });
this.setState({ value: this.state.value + 1 });

在上述代码中，你可能期望 value 的值会增加三次。但由于 React 的批处理和异步更新，这三次调用可能会合并成一次更新，value 只增加一次。

了解 setState 是异步的，对于编写正确的 React 代码非常重要。如果你需要在状态更新后立即执行某些操作，应该使用 setState 的回调函数，或者使用生命周期方法，比如 componentDidUpdate。

javascript
this.setState({ value: this.state.value + 1 }, () => {
  console.log('状态更新完成，新的值为:', this.state.value);
});

在这个例子中，打印状态的操作会在状态更新且组件重新渲染后执行。

2024年6月29日 12:07 回复

这是因为它是异步发生的，所以意味着那时可能还没有更新......

根据 React v.16 文档，您需要使用第二种形式来setState()接受函数而不是对象：

状态更新可能是异步的

React 可以将多个 setState() 调用批处理为单个更新以提高性能。

由于 this.props 和 this.state 可能会异步更新，因此您不应依赖它们的值来计算下一个状态。

例如，以下代码可能无法更新计数器：

shell
// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

要修复此问题，请使用 setState() 的第二种形式，它接受函数而不是对象。该函数将接收先前的状态作为第一个参数，并将应用更新时的 props 作为第二个参数：

shell
// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

2024年6月29日 12:07 回复

您应该调用第二个函数作为 setState 的回调，因为 setState 是异步发生的。就像是：

shell
this.setState({pencil:!this.state.pencil}, myFunction)

然而，在您的情况下，由于您希望使用参数调用该函数，因此您必须更具创意，并且也许创建自己的函数来调用道具中的函数：

shell
myFunction = () => {
  this.props.updateItem(this.state)
}

将它们结合在一起应该可以工作。

2024年6月29日 12:07 回复

3个答案

状态更新可能是异步的

你的答案