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、这个是没有绝对的,开发中可以任意选择