我的回答:
一 。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事件: