您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

何时使用功能setState

何时使用功能setState

首先,在您的情况下,两种语法完全不同,您可能要寻找的是两者之间的区别

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函数形式,而不是

因此,如果任何对象包含相同的键,则存储具有相同键的最后一个对象的键的值。因此,更新仅使用最后一个值发生一次

其他 2022/1/1 18:14:52 有562人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶