Javascript add函数的笨拙实现

我很难理解为什么会这样：

addItem = item => {
    this.setState({ grudges: [grudge, ...this.state.grudges] });
}

存在相当笨拙的实现。不会

this.state.grudges.push(grudge)

---

够了吗

这是必要的，因为React不会跟踪状态的更改，例如Vue。您必须明确地告诉react状态发生了变化。如果您通过直接修改此.state来更改状态，则状态将被更新，但UI不会被更新，因为React不知道此更改。

在React中，您应仅使用setState更改状态：

永远不要直接改变this.state，因为之后调用setState（）可能会 替换你所做的变异。把这个国家当作 不变的

---

请参阅（页面底部）

这不够，因为：

切勿直接对this.state进行变异，因为之后调用setState（）可能会替换您所做的变异。将this.state视为不可变的

此“笨拙的实现”也不正确，

This.state

不应与

This.setState

一起使用，因为这可能会导致竞争条件：

将setState（）视为更新组件的请求，而不是即时命令。为了更好地感知性能，React可能会延迟它，然后在一次过程中更新多个组件。React不保证立即应用状态更改

setState（）并不总是立即更新组件。它可以批处理更新或将更新推迟到以后。这使得在调用setState（）之后立即读取This.state成为一个潜在的陷阱

正确的方法是使用updater函数：

addItem = item => {
    this.setState(({ grudges }) => ({ grudges: [grudge, ...grudges] }));
}

它还受益于解构语法。

这不是。请不要为您不懂的语言添加标记。