React 源码讲解第 6 节- expirationTime 公式

我不是女神ヾ 2022-12-11 07:28 156阅读 0赞

### React 源码讲解第 6 节- expirationTime 公式 ###

*   *   *  入口
         *  currentTime 源码
         *  currentTime 解析
         *  expirationTime 源码
         *  expirationTime 解析

本节主要讲解 expirationTime 时间计算公式。

### 入口 ###

`updateContainer`

function updateContainer(element, container, parentComponent, callback) { 
    //···
      var currentTime = requestCurrentTimeForUpdate();
      var expirationTime = computeExpirationForFiber(currentTime, current$1, suspenseConfig);
    //···
      return expirationTime;
    }

### currentTime 源码 ###

`requestCurrentTimeForUpdate`

### currentTime 解析 ###

1.  在 `requestCurrentTimeForUpdate` 方法中，currentTime 初始为 0，代表没有更新。

var NoWork = 0;
    var currentEventTime = NoWork;

1.  如果 currentTime 不为 0 直接返回，否则赋值 `currentEventTime = msToExpirationTime(now())`。

`msToExpirationTime`

function msToExpirationTime(ms) { 
      // Always subtract from the offset so that we don't clash with the magic number for NoWork.
      return MAGIC_NUMBER_OFFSET - (ms / UNIT_SIZE | 0);
    }
    function expirationTimeToMs(expirationTime) { 
      return (MAGIC_NUMBER_OFFSET - expirationTime) * UNIT_SIZE;
    }

`now`

var initialTimeMs = Scheduler_now();//系统当前时间
    var now = initialTimeMs < 10000 ? Scheduler_now : function () { 
      return Scheduler_now() - initialTimeMs;
    };
    var Scheduler_now = Scheduler.unstable_now,

如果初始时间 initialTimeMs 相当小，小于10s，则 now 为调度器 Scheduler 的 now 当前时间。否则 now 为 Scheduler 的当前时间减去初始时间 initialTimeMs。

`MAGIC_NUMBER_OFFSET`

var MAX_SIGNED_31_BIT_INT = 1073741823;//最大31位整数
    var Sync = MAX_SIGNED_31_BIT_INT;//代表同步执行，不会被调度也不会被打断
    var Batched = Sync - 1;//批量处理
    var MAGIC_NUMBER_OFFSET = Batched - 1; //最大整数偏移量

由以上代码可以知道 `MAGIC_NUMBER_OFFSET` 为 1073741823-2 = 1073741821。

所以 currentTime 时间为 ：

1.  调度器 Scheduler 的 系统当前时间 now/10，抹去10ms 的误差。
2.  以上结果 |0，取整。
3.  最大偏移量 MAGIC\_NUMBER\_OFFSET- 以上结果。

即：1073741821 - (now/10|0)。

### expirationTime 源码 ###

### expirationTime 解析 ###

如果有使用 suspenseConfig，`expirationTime = computeSuspenseExpiration(currentTime, suspenseConfig.timeoutMs | 0 || LOW_PRIORITY_EXPIRATION)`;

如果没有使用 suspenseConfig，React 中有五种类型的 ExpirationTime。

switch (priorityLevel) { 
          case ImmediatePriority:
            expirationTime = Sync;
            break;
    
          case UserBlockingPriority$2:
            // TODO: Rename this to computeUserBlockingExpiration
            expirationTime = computeInteractiveExpiration(currentTime);
            break;
    
          case NormalPriority:
          case LowPriority:
            // TODO: Handle LowPriority
            // TODO: Rename this to... something better.
            expirationTime = computeAsyncExpiration(currentTime);
            break;
    
          case IdlePriority:
            expirationTime = Idle;
            break;
    
          default:
            (function () { 
              { 
                { 
                  throw ReactError(Error("Expected a valid priority level"));
                }
              }
            })();
    
        }

1.  立即执行 - 最高优先级 ImmediatePriority  
    `expirationTime = Sync`  
    //var MAX\_SIGNED\_31\_BIT\_INT = 1073741823;  
    //var Sync = MAX\_SIGNED\_31\_BIT\_INT;  
    即：expirationTime 为 `1073741821`。
2.  交互 - 次优先级 UserBlockingPriority$1  
    `expirationTime = computeInteractiveExpiration(currentTime)`  
    比如由事件触发，响应优先级也会比较高，因为涉及到用户交互。
3.  同步 - 正常优先级 NormalPriority  
    `var expirationTime`  
    即：expirationTime 为 undefined。
4.  异步 - 低优先级 LowPriority  
    `expirationTime = computeAsyncExpiration(currentTime)`  
    比如执行异步任务。
5.  延迟 - 最低优先级 IdlePriority  
    `expirationTime = Idle`  
    // var Idle = 2  
    即：expirationTime 为2。

次优先级`computeInteractiveExpiration`和 低优先级`computeAsyncExpiration(currentTime)` 都是调用 `computeExpirationBucket` 方法。区别在于常量 expirationInMs 和 bucketSizeMs 不同。

var HIGH_PRIORITY_EXPIRATION =  500 ;
    var HIGH_PRIORITY_BATCH_SIZE = 100;
    function computeInteractiveExpiration(currentTime) { 
      return computeExpirationBucket(currentTime, HIGH_PRIORITY_EXPIRATION, HIGH_PRIORITY_BATCH_SIZE);
    }
    
    var LOW_PRIORITY_EXPIRATION = 5000;
    var LOW_PRIORITY_BATCH_SIZE = 250;
    function computeAsyncExpiration(currentTime) { 
      return computeExpirationBucket(currentTime, LOW_PRIORITY_EXPIRATION, LOW_PRIORITY_BATCH_SIZE);
    }

核心代码：

var MAX_SIGNED_31_BIT_INT = 1073741823;
    var Sync = MAX_SIGNED_31_BIT_INT;
    var Batched = Sync - 1;
    var UNIT_SIZE = 10;
    var MAGIC_NUMBER_OFFSET = Batched - 1; // 1 unit of expiration time represents 10ms.
    
    function ceiling(num, precision) { 
      return ((num / precision | 0) + 1) * precision;
    }
    
    function computeExpirationBucket(currentTime, expirationInMs, bucketSizeMs) { 
      return MAGIC_NUMBER_OFFSET - ceiling(MAGIC_NUMBER_OFFSET - currentTime + expirationInMs / UNIT_SIZE, bucketSizeMs / UNIT_SIZE);
    } // TODO: This corresponds to Scheduler's NormalPriority, not LowPriority. Update
    // the names to reflect.

从以上函数中可以看出：  
只有 currentTime 是变量，也就是当前的时间戳。如果是高优先级任务。  
expirationInMs对应的是 HIGH\_PRIORITY\_EXPIRATION，也就是 5000。  
bucketSizeMs 对应的是 HIGH\_PRIORITY\_BATCH\_SIZE，也就是 250。  
所以 computeExpirationBucket 函数接收的就是 currentTime、5000 和 250。

`ceiling` 函数：

function ceiling(num, precision) { 
      return ((num / precision | 0) + 1) * precision;
    }

`ceiling` 调用：

ceiling(MAGIC_NUMBER_OFFSET - currentTime + expirationInMs / UNIT_SIZE, bucketSizeMs / UNIT_SIZE)

`ceiling` 的参数结果为：

(MAGIC_NUMBER_OFFSET - currentTime + 5000 / 10, 250/ 10)

由于上面计算过 currentTime = MAGIC\_NUMBER\_OFFSET - (now/10|0)。  
所以`ceiling` 的参数结果为：

(MAGIC_NUMBER_OFFSET - (MAGIC_NUMBER_OFFSET - (now/10|0))+ 5000 / 10, 250/ 10)

即最终 `ceiling` 的参数结果为：  
((now/10|0))+ 500,25)

((num / precision | 0) + 1) \* precision  
ceiling 的结果公式如下：  
`(((now/10|0)+ 500)/25|0)+1)*25`

expirationTime 最终的公式为：  
`MAGIC_NUMBER_OFFSET - (((now/10|0)+ 500)/25|0)+1)*25`  
即：1073741821-(((now/10|0)+ 500)/25|0)+1)\*25。

其中：  
25是250 / 10，表示以 25 为单位向上增加的，比如输入10002 ~ 10026 之间的数，最终得到的结果都是10525，但是到了 10027 得到的结果就是10550，这就是除以 25 取整的效果。