添加功能的尴尬实现

Question

我很难理解为什么这样:

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

相当尴尬的实施存在.岂不

this.state.grudges.push(grudge)

满足？

Answer 1

这是不够的,因为React状态应该是不可变的:

永远不要直接改变this.state,因为之后调用setState()可能会替换你所做的突变.把this.state看作是不可变的.

这个'尴尬的实现'也是不正确的,this.state不应该与this.setState因为setState异步一起使用,并可能导致竞争条件:

将setState()视为请求而不是更新组件的立即命令.为了获得更好的感知性能,React可能会延迟它,然后在一次通过中更新几个组件.React不保证立即应用状态更改.

<...>

setState()并不总是立即更新组件.它可以批量推迟更新或推迟更新.这使得在调用setState()之后立即读取this.state是一个潜在的陷阱.

一种正确的方法是使用更新程序功能:

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

它还受益于解构语法.