网站内容更新策略( ReactJS中的批量更新的策略(一)|)
优采云 发布时间: 2021-10-10 16:00网站内容更新策略(
ReactJS中的批量更新的策略(一)|)
在这个文章中,我们将继续从源码的角度学习React JS中的批量更新State策略,以便我们继续深入研究React。
前面文章列表
1.batchingStrategy 策略
现在我们开始看batchingStrategy的策略定义。
目前React中batchingStrategy的定义是ReactDefaultBatchingStrategy。
ReactDefaultBatchingStrategy 由两部分组成。
实现就在这里。
请注意,在实现中定义了一个叫做 pooled 的东西。稍后我们将讨论这种设计的原则和好处。
React 将所有组件放入池中,然后将它们交给 runBatchedUpdates 来执行更新操作。
同理,也有asap这个概念,后续文章也有讨论。
对所有组件执行 performUpdateIfNecessary 判断并更新组件。
2. 组件是否需要更新的比较 performUpdateIfNeeded
两种逻辑,比较组件是否需要更新,在第二种情况下直接进行强制更新。
ReactReconciler.receiveComponent 在元素级别进行比较,但如果不同,则调用 receiveComponent。
其他状态,直接调用updateComponent。
注意这里updateComponent函数的内部实现是递归的。这样的设计,方便及时获取哪些组件的更新状态,方便前台获取使用。
到此,我们已经完成了 React 的更新逻辑策略的整个部分。接下来我们继续看看React是如何更新页面UI的以及一些剩余的小知识点。