【React】第十一部分 setState更新状态的两种写法

【React】第十一部分 setState更新状态的两种写法

---

---

11. setState更新状态的两种写法

11.1 对象式

setState(stateChange,[callback])
	- stateChange 修改状态对象
	- callback是可选的回调函数，它在状态更新完毕、界面也更新后(render调用后)才被调用
	- 如果需要立马得到更新后的值，就可以在该函数就获取	

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

11.2 函数式

setState(update, [callback])
	- update返回的是stateChange对象的函数
	- update可以接收到state和props
	- callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用

handleSubtract = () =>{
    this.setState((state,props)=>{
      return {count:state.count-1}
    },()=>{
      console.log(this.state.count);
    })
  }

11.3 总结

总结:
		1.对象式的setState是函数式的setState的简写方式(语法糖)
		2.使用原则：
				(1).如果新状态不依赖于原状态 ===> 使用对象方式
				(2).如果新状态依赖于原状态 ===> 使用函数方式
				(3).如果需要在setState()执行后获取最新的状态数据, 要在第二个callback函数中读取
		3. 须知:在异步环境下执行setState()是同步的,在同步环境下执行setState()是异步

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！