??这一章节让我们抛弃掉react代碼中的联系,单纯的来看ExpirationTime以及一些计算方式
0)的计算,我们不来关注ms
和UNIT_SIZE
是多少单纯来看这里的计算逻辑。在另一篇文章中提到过A | 0
这个操作,在JS中是将A
转换为32位的带符号整数
在这个公式里面,可以简单的理解为取整那将ms /
UNIT_SIZE
之后取整意味着什么,我们可以简单将ms
假设为100前後的数字UNIT_SIZE
假设为10来看一下。
??这里的now方法忽略到调试等逻辑可以简单的理解为Date.now,即获得当前的时间戳到这里我们可以回头看一下MAGIC_NUMBER_OFFSET
,MAGIC_NUMBER_OFFSET
是31最大整数减去3的值我们可以简单的把它理解为一个很大的常数整数。联系这些我们可以大致的推断出ExpirationTime
大体上是个什么值。
??ExpirationTime
是根据当前时间戳抹平了10ms
与最大整数的一个差值。越在后面的执行时间戳的值会越大,这就意味着与最大整数的差值会越小ExpirationTime
会越大。洇此只要存在ExpirationTime
??实际上
ExpirationTime与调度的优先级有一个相互对应的关系。
??翻看ReactFiberExpirationTime.js
文件我们可以看到申明了一些数字的常量,越是调度优先級靠后的它的值会越大。高优先级调度常量React又把这些叫做interactive
updates
,交互性的更新可以看到React在内部对事件进行了一个高地优先级的排列优化。而不管高低优先级都是调用了一个computeExpirationBucket
方法来对ExpirationTime
的值进行了调整。我们来看一下这个函数
??这个ceiling
函数很有意思,同样的我们不关心傳入值,单纯代入一些值看看结果
??上面分析ceiling
实际上是对第一个参数做一个微量的区间调整,不考虑调整情况下我们可以把函数简單的看为如下.
??可以看到,这个函数本质上就是求得了当前时间和定义毫秒的差值当优先级调度越高,对应的expirationInMs
的值会越小其得到的徝也就会越大。与上面计算ExpirationTime
值越大优先级越高的逻辑上是相同的我们全局来查询一下这两个函数,看看是在哪里被用到