为什么建议传递给setState的参数是一个callback而不是 一个对象

React 的 setState 方法可以接受两种类型的参数：

对象形式： 直接传递一个新的状态对象

this.setState({ count: 1 });

函数形式： 传递一个回调函数（返回新的状态）

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

推荐传递函数而不是对象的原因：

setState 是异步更新的

React 的 setState 操作是异步的，React 会合并多个 setState 调用，并在下一次重新渲染时一次性更新。因此

• 如果你使用对象形式，可能会出现“覆盖旧状态”的情况，导致数据不一致。

例如：

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

这里，this.state.count 在第一次调用时是旧值，第二次调用时也依然是旧值，导致 每次 setState 都是基于初始值计算的，最终 count 只加了 1，而不是 2。

setState 是基于旧状态来计算新状态的

如果你需要基于 先前的状态 计算新的状态（比如计数器的递增），那么必须使用函数形式。这是因为，React 不会直接读取当前的 state，它会在异步批量更新时合并多个 setState 调用。

使用回调函数，可以保证你计算新状态时，获取到的是最新的 prevState。

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

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

在上面的代码中，prevState 会是最新的 state，确保你每次操作时都是基于上次的状态。

实际例子：

错误用法：

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

如果 this.state.count 初始为 0，那么以上代码可能只会执行一次 count 的增加，最终 count 为 1，而不是 2。原因是 React 的 setState 是异步的，this.state.count 在第一次 setState 调用后不会立即更新，所以第二次调用 setState 依然是基于初始状态计算的。

正确用法：

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

在这种写法中，React 会根据每次执行 setState 的顺序，将 prevState 设置为最新的状态，保证你对 count 的增量是按顺序进行的。最终 count 会是 2。

总结

• 对象形式：适用于你没有依赖先前状态的情况，通常在只进行简单的状态修改时使用。

• 回调函数形式：适用于你依赖先前状态来计算新状态的情况，保证更新的正确性，尤其是在多个 setState 更新时。