react中setState更新状态的两种方式

前言

setState在合成事件和钩子函数中是“异步”的，在原生事件和setTimeout 中都是同步的

对象式写法

setState(stateChange, [callback])

• stateChange为状态改变对象(该对象可以体现出状态的更改)
• callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

	state = {
    
    count:0}

	add = ()=>{
    
    
		// 对象式setState
		this.setState({
    
    count:this.state.count+1},()=>{
    
    
			console.log(this.state.count);
		})
	}

函数式写法

setState(updater, [callback])

• updater为返回stateChange对象的函数。
• updater可以接收到state和props。（主要区别）
• callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

	state = {
    
    count:0}

	add = ()=>{
    
    
		//函数式的setState
		this.setState( state => ({
    
    count:state.count+1}),()=>{
    
    
			console.log(this.state.count)
		})
	}

总结

• 对象式的setState是函数式的setState的简写方式(语法糖)
• 使用原则：
  • 如果新状态不依赖于原状态 ===> 使用对象方式
  • 如果新状态依赖于原状态 ===> 使用函数方式
  • 如果需要在setState()执行后获取最新的状态数据, 要在第二个callback函数中读取