react源码阅读4 ExpirationTime

react更新中优先级依赖的标识ExpirationTime。阅读React包的源码版本为16.8.6。

  这一章节，让我们抛弃掉react代码中的联系，单纯的来看ExpirationTime以及一些计算方式。

ExpirationTime是什么。

  ExpirationTime是一个数字，你可以在react-reconciler包下的ReactFiberExpirationTime.js文件中找到它的定义。

export type ExpirationTime = number;

ExpirationTime在React中有什么作用。

  既然ExpirationTime相关的定义出现在react-reconciler包之下，说明它的作用肯定是和React调用有关。我们从ReactFiberExpirationTime函数入手，该函数接收一个ms，返回一个ExpirationTime。

// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
// Math.pow(2, 30) - 1
const MAX_SIGNED_31_BIT_INT = 1073741823
export const NoWork = 0;
export const Never = 1;
// 1073741823 - 1
export const Sync = MAX_SIGNED_31_BIT_INT;
// 1073741823 - 2
export const Batched = Sync - 1;

const UNIT_SIZE = 10;
// // 1073741823 - 3
const MAGIC_NUMBER_OFFSET = Batched - 1;

export function msToExpirationTime(ms: number): ExpirationTime {
   
  // Always add an offset so that we don't clash with the magic number for NoWork.
  return MAGIC_NUMBER_OFFSET - ((ms / UNIT_SIZE) | 0);
}

  我们先跳过首部的变量定义，直接看函数msToExpirationTime。msToExpirationTime接收一个ms，返回ExpirationTime。函数首先进行((ms / UNIT_SIZE) | 0)的计算，我们不来关注ms和UNIT_SIZE是多少，单纯来看这里的计算逻辑。在另一篇文章中提到过《关于JS中number位(Bit)操作的一些思考》，A | 0这个操作，在JS中是将A转换为32位的带符号整数，在这个公式里面，可以简单的理解为取整。那将ms / UNIT_SIZE之后取整意味着什么，我们可以简单将ms假设为100前后的数字，UNIT_SIZE假设为10来看一下。

(95 / 10) | 0 = 9;
(100 / 10) | 0 =