我很难理解为什么这样：
addItem = item => {
this.setState({ grudges: [grudge, ...this.state.grudges] });
}
相当尴尬的实施存在。岂不
this.state.grudges.push(grudge)
满足？
这是不够的，因为React state is expected to be immutable：
永远不要直接改变this.state，因为之后调用setState（）可能会替换你所做的突变。把this.state看作是不可变的。
这个'尴尬的实现'也是不正确的，this.state不应该与this.setState一起使用，因为setState is asynchronous并且可能导致竞争条件：
将setState（）视为请求而不是更新组件的立即命令。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不保证立即应用状态更改。
<...>
setState（）并不总是立即更新组件。它可以批量推迟更新或推迟更新。这使得在调用setState（）之后立即读取this.state是一个潜在的陷阱。
一种正确的方法是使用更新程序功能：
addItem = item => {
this.setState(({ grudges }) => ({ grudges: [grudge, ...grudges] }));
}
它还受益于解构语法。
这是必要的，因为React不跟踪状态的变化，例如Vue。你必须明确地告诉我们状态发生了变化。如果通过直接修改this.state来更改状态，则状态将更新，但UI将不会更新，因为React将不知道更改。
在反应中，您应该只使用setState更改状态：
永远不要直接改变this.state，因为之后调用setState（）可能会替换你所做的突变。把this.state看作是不可变的。