亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

從源碼的角度看 React JS 中批量更新 State 的策略(下)

截图

这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用。

前置文章列表

1. batchingStrategy 策略

现在我们开始来看 batchingStrategy 的策略定义。
目前 React 中 batchingStrategy 的定义为 ReactDefaultBatchingStrategy
ReactDefaultBatchingStrategy 包含两部分。

  • 最重要的部分 FLUSH_BATCHED_UPDATES。

截图

实现在这里。
注意实现里定义了一个叫 pooled 的东西,后续我们会展开讨论这样设计的原理与好处。
React 将所有的组件丢到 pool 中去,然后都交给 runBatchedUpdates 去执行更新操作了。
同样,还有一个 asap 的概念,也在后续文章中讨论。

截图

对所有的组件进行 performUpdateIfNecessary 的判断,并更新组件。

截图

  • 另一个实现为 RESET_BATCHED_UPDATES,用于将 isBatchingUpdates 重置为 false,等待下次组件的批量更新。

截图

2. 组件是否需要更新的比较 performUpdateIfNeeded

两个逻辑,比较组件是否需要更新,以及第二种条件下直接进行强制更新。
ReactReconciler.receiveComponent 在元素级别进行了比较,不过不一样那么就调用 receiveComponent
其他状态直接调用 updateComponent
注意这里的 updateComponent 函数的内部实现是递归的,这样的设计便于及时获取到哪些组件是已更新的状态,便于前台进行获取使用。

截图

截图

到这里我们就把整个 React 的更新逻辑策略的部分走完了,接下来我们会继续看一下 React 如何进行页面UI 的更新以及一些遗留的小知识点。

點擊查看更多內容
7人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消