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回调函数中