react中setState()更新状态是异步还是同步的?

setState()更新状态是异步还是同步的?

legacy模式:React.render(</App>,rootNode)
blocking模式:ReactDom.createBlockingRoot(rootNode).render(</App>
concurrent模式:ReactcreateRoot(rootNode).render(</App>)
先来句总结:
Legacy模式命中batchedUpdates时异步
Legacy模式未命中batchedUpdates时同步
Concurrent模式都是异步

setState()更新状态的2种写法
	1.setState(updater,[callback]),
			update为返回stateChange对象的函数:(state,props)=>stateChange
			接收的state和props被保证为最新的
	2.setState(stateChange,[callback])
			stateChange为对象,
			callback是可选的回调函数,在状态更新且界面更新后才执行
	总结:
		对象方式是函数方式的简写方式
				如果新状态不依赖于原状态,=====>使用对象方式
				如果新状态依赖于原状态,=====>使用函数方式
		如果需要在setState()后获取最新的状态数据,在第二个callback函数中读取
1.执行setState()的位置?
	在react控制的回调函数中:生命周期勾子 / react 事件监听回调
	非react控制的异步回调函数中: 定时器回调 / 原生事件监听回调 / promise回调 / ...
2.异步 or 同步?
	react相关回调中:异步
	其他异步回调中:同步
关于异步的setState()
	1.多次调用,如何处理?
			setState({}):合并更新一次状态,只调用一次render()更新界面----状态更新和页面更新都合并了
			setState(fn):更新多次状态,但只调用一次render()更新界面 ---状态更新没有合并,但界面更新合并了
	2.如何得到异步更新后的状态数据?
			在setState()的callback回调函数中
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值