聊聊React中常用的setState

92 阅读1分钟

使用React避免不了使用state,而更新state除了constructor中的初始化之外,后面都要通过setState这个方法来更新,这点和小程序中的setData方法很像,但Vue中可以直接更新状态。

setState更新状态的几种写法

  1. setState(stateChange) stateChange为对象,接受一个对象为参数,直接更新state的某个值,这种方式适用新状态不依赖原状态的情况。例如:
this.setState({count: 3})
  1. setState(updater) updater为返回stateChange对象的函数: (state, props) => stateChange 接收的state和props被保证为最新的,适用于新状态依赖原状态的情况
this.setState(state => ({count: state.count + 1}))

3.setState(stateChange[,callback]) stateChange为对象,callback是可选的回调函数,在状态更新且界面更新后才执行,适用于需要使用最新的状态来进行某些操作

4.setState(updater[,callback]) updater为一个函数,callback是可选的回调函数,callback在updater执行完之后再执行

setState是同步还是异步更新

  • react相关回调函数中是异步更新,比如:react生命周期回调函数、react事件监听回调
  • 其他异步回调中式同步更新,比如:定时器回调、原生事件监听、promise回调

关于异步的setState()更新方式

多次调用, 如何处理?

  • setState({}): 合并更新一次状态, 只调用一次render()更新界面 ---状态更新和界面更新都合并了
  • setState(fn): 更新多次状态, 但只调用一次render()更新界面 ---状态更新没有合并, 但界面更新合并了