我的回答:
一 。setState是同步执行的,但是state并不一定会同步更新。
二。 setState在不同模式下,效果是不同的。
1如果是在concurrent模式下都是异步的。 reactDOM.createRoot
2如果是在legacy模式下,
三。this.state 是根据 isBatchingUpdate(values)的值,确定是否批处理更新。( isBatchingUpdates:是否批处理更新: 默认值是flase,默认是同步的。)
四。合成事件,或者钩子函数中(onClick,componnetDidMount),会调用batchedUpdatestae(),把isUpdates值变tue,放在队列里面,批量更新。
在原生事件中使用,或者setTimeout(异步执行) 。里面使用 。false保持不变,立即执行同步更新。
为什么需要批处理?因为(1 提高性能。 2 父组件穿props属性和state不一致)
参考视频:https://www.bilibili.com/video/BV1df4y1C7P9
https://www.bilibili.com/video/BV1uh411177Q?from=search&seid=519735711874763743
参考博客:https://blog.csdn.net/zrq1210/article/details/103781692?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&dist_request_id=413028cf-a3fd-4056-ba51-6167fc67dd5e&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control
1 完全不需要 依赖这个 特性。如果需要更新后的值,
class component componentDIdmount, componentDIdupdate
function componet ,useEffect的回调函数中执行。
2 不同模式下 react的效果不同。
3中模式:
legac y模式(le ga cy 遗产,遗物): react DOM。render . 0 0 .触发 的是异步的。批处理,context != 异步,同步。
batchedUpdate是异步的,没有命中batchedUpdate就是i同步的,
放在setTimeout里面的执行的是,同步。
concurrent模式: reactdom.createRoot 。都是异步。(blocking模式: reatDOM .createBlockingRoot(0 (concure模式的第一步))
lagacy模式下,我们讨论为什么设定为异步更新?
为什么设定的是异步的呢?
原因1
this.setState是 异步的,batchedUpdates批处理。
事件,事件里面,只会出发一次render,提高react的性能。
state立刻改变,render会慢一点,diff算法。
原因2 :
props是:hello world。父元组给子元组传递值,props和state不能保持一致。
拿到最新的数据。this.state.message。
如何同步获取state?
方式1 :获取一处更新的数据。回调。
(要更新的数据,callback)
传入一个回调函数。(类似于vue nextTick)
方法2 : componentDidIUpdate()
也可以拿去。(获取异步更新的方式)
consoel.log(this.state.message)
两种情况是同步更新的:
1 在setTimeout中更新:
将setState放入定时器中!
1 setTime(()=>{
},0)
2 原生DOM事件: