2.1 組件1 state屬性知識點:setState是同步還是異步?


我的回答:

 

一 。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

 https://blog.csdn.net/ddh3110/article/details/102204429?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&dist_request_id=40b940b3-cb9d-4a86-84e9-45c4d6b6fc88&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事件:

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM