【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()是异步
总结
以上就是今天要讲的内容，希望对大家有所帮助！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/82856.html
