React 中 setstate 方法的新签名？

Question

我正在浏览下面的文章。 https://facebook.github.io/react/docs/react-component.html#setstate

我发现之前 setState 看起来像下面。

this.setState({mykey: 'my new value'});

但是有一个像下面这样的新签名。

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

官方文档解释说“这将在设置任何值之前查询 state 和 props 的先前值的原子更新。”。 但是我不理解。我知道不能保证对 setState 调用的同步操作。但是新的签名方法会是同步的还是有其他影响？

有人可以解释一下吗？

Answer 1

假设您的状态对象刚刚{ counter: 1 }开始，setState使用对象和函数调用之间的区别如下：

假设你这样做

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

鉴于 setState 是异步的，可能是这种情况（如果您现在尝试它会发生这种情况），传递给 setState{ counter: 2 }的两个{ counter: 2 }对象都会评估为，因此在两次调用之后，您将拥有一个意外的状态对象！

如果你传递函数：

setState(state => ({ counter: state.counter + 1}))
setState(state => ({ counter: state.counter + 1}))

这将按照调用它们的 setState 调用的顺序排列，并且鉴于函数内的对象是动态计算的，您最终会得到正确（或预期）的答案{ counter: 3 }.