setState(prevState)

常规方式

连续执行2次setState,如下方式,往往只有一次效果,即后者的效果

  this.setState({
    time:this.state.time+1,
  })
  this.setState({
    time:this.state.time+2,
  })

相当于

this.setState(Object.assign({},{
    time:this.state.time+1,
  },{
    time:this.state.time+2,
  }))

prevState

this.setState(prevState=>({
    time:prevState.time+1,
}))

this.setState(prevState=>({
    time:prevState.time+2,
}))

如此写法,在react中,会形成一个队列,对所有setState依次调用

回答: 在React中,prevState是在this.setState()函数中使用的一个参数,用于获取之前的状态值。它是一个函数,接收一个参数prevState,然后返回一个新的状态值。在handleClick函数中,使用prevState可以通过prevState.isToggleOn来获取之前的状态值,并根据需要进行操作。\[1\]例如,可以使用prevState.isToggleOn来切换按钮的状态。在这种情况下,prevState只能在this.setState()函数中使用,而不能直接访问this.prevState。\[2\] 另外,如果你想要在React中使用类似的功能,你也可以使用React.PureComponent或React.memo来进行性能优化。React.PureComponent是一个自动实现了shouldComponentUpdate方法的组件,它会对props和state进行浅比较,以确定是否需要重新渲染组件。\[3\]而React.memo是一个高阶组件,用于包装函数组件,以实现类似的性能优化效果。\[4\] #### 引用[.reference_title] - *1* *2* [reactsetState中的prevState是什么](https://blog.csdn.net/dugushangliang/article/details/90581414)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [React——类组件==>函数组件——memo(无用的渲染、shouldComponentUpdate / Pure Component、React.memo...](https://blog.csdn.net/qq_52301431/article/details/127294553)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值