首先,在您的情况下,两种语法完全不同,您可能要寻找的是两者之间的区别
this.setState({pictures: this.state.picture.concat(pics)})
和
this.setState(prevState => ({
pictures: prevState.pictures.concat(pics)
}))
要了解为什么第二种方法是首选方法,您需要了解React在内部使用setState做什么。
React将首先将您传递给的对象合并setState()
到当前状态。然后,它将启动该和解事务。由于调用setState()
可能不会立即更新您的状态。
React可以将多个setState()
调用批处理为一个更新,以提高性能。
考虑一个简单的情况,要理解这一点,在您的函数中,您可能会多次调用setState,例如
myFunction = () => {
...
this.setState({pictures: this.state.picture.concat(pics1)})
this.setState({pictures: this.state.picture.concat(pics1)})
this.setState({pictures: this.state.picture.concat(pics1)})
...
}
在简单的应用程序中,这不是有效的用例,但是随着应用程序变得复杂,可能会在多个地方发生多个setState调用,并执行相同的操作。
因此,为了执行有效的更新,React通过提取传递给每个setState()
调用的所有对象来进行批处理,将它们合并在一起形成一个对象,然后使用该对象来进行处理setState()
。根据setState文档
Object.assign(
prevIoUsState,
{quantity: state.quantity + 1},
{quantity: state.quantity + 1},
...
)
后续呼叫将覆盖同一周期中先前呼叫的值,因此数量只会增加一次。如果下一个状态取决于上一个状态,我们建议使用updater函数形式,而不是