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};
});

官方文档解释说'这会将一个原子更新排入队列，在设置任何值之前查询状态和道具的先前值。'。 但是我不理解。我知道无法保证调用setState的同步操作。但新的签名方法是同步的还是有其他影响？

有人可以解释一下吗？

Answer 1

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

假设你做了

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

鉴于setState是异步的，可能就是这种情况（如果你现在尝试就会发生这种情况），传递给setState的这两个对象都计算为{ counter: 2 }，所以在两次调用之后，你＆＃ 39; ll有一个意外的{ counter: 2 }状态对象！

如果您传递函数：

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

这将按照调用setState调用的顺序排队，并且假定函数内部的对象是动态计算的，那么您最终会得到{ counter: 3 }的正确（或预期）答案。