1、对象式的setState

1、语法:setState(stateChange, [callback])
(1)stateChange为状态改变对象(该对象可以体现出状态的更改)
(2)callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
2、注意点
setState是一个同步的方法,但是setState引起React后续更新状态的动作是异步的

state = {count:0}
this.setState({count:count + 1})
console.log(this.state.count);

如下:页面为1,但是拿到的状态还是0
在这里插入图片描述
如果想在更新完状态后拿到该状态,应该在回调中执行

this.setState({count:count + 1},() => {
  console.log(this.state.count);
})

如下:页面为1,拿到的状态也是1
在这里插入图片描述
我们在实际开发中一般是没有这个需求的,所以一般不写回调,但如果有这个需求的时候就可以用。

2、函数式的setState

1、语法:setState(updater, [callback])
(1)updater为返回stateChange对象的函数。
(2)updater可以接收到state和props。
(3)callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

<Demo name="tom"/> // 从外部传数据进去
this.setState((state,props) => {
  console.log(state,props);
  return {count:state.count + 1}
})

在这里插入图片描述
同理,回调也是可选参数

3、总结

1、对象式的setState是函数式的setState的简写方式(语法糖)
2、一般使用原则:
(1)如果新状态不依赖于原状态 ===> 使用对象方式
(2)如果新状态依赖于原状态 ===> 使用函数方式
(3)如果需要在setState()执行后获取最新的状态数据,
要在第二个callback函数中读取
3、这个是没有绝对的,开发中可以任意选择

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐