React中的任务饥饿行为

0 b 0 0 1 1 0 0 0 
1.

[ -1, -1, 4395.2254, 3586.2245, -1, -1, -1 ] 
1.

function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { 
  // 获取旧任务 
  const existingCallbackNode = root.callbackNode; 
 
  // 记录任务的过期时间，检查是否有过期任务，有则立即将它放到root.expiredLanes， 
  // 便于接下来将这个任务以同步模式立即调度 
  markStarvedLanesAsExpired(root, currentTime); 
 
  ... 
 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

export function markStarvedLanesAsExpired( 
  root: FiberRoot, 
  currentTime: number, 
): void { 
  // 获取root.pendingLanes 
  const pendingLanes = root.pendingLanes; 
  // suspense相关 
  const suspendedLanes = root.suspendedLanes; 
  // suspense的任务被恢复的lanes 
  const pingedLanes = root.pingedLanes; 
 
  // 获取root上已有的过期时间 
  const expirationTimes = root.expirationTimes; 
 
  // 遍历待处理的lanes，检查是否到了过期时间，如果过期， 
  // 这个更新被视为饥饿状态，并把它的lane放到expiredLanes 
 
  let lanes = pendingLanes; 
  while (lanes > 0) { 
 
    /* 
     pickArbitraryLaneIndex是找到lanes中最靠左的那个1在lanes中的index 
     也就是获取到当前这个lane在expirationTimes中对应的index 
     比如 0b0010，得出的index就是2，就可以去expirationTimes中获取index为2 
     位置上的过期时间 
    */ 
 
    const index = pickArbitraryLaneIndex(lanes); 
    const lane = 1 << index; 
    // 上边两行的计算过程举例如下： 
    //   lanes = 0b0000000000000000000000000011100 
    //   index = 4 
 
    //       1 = 0b0000000000000000000000000000001 
    //  1 << 4 = 0b0000000000000000000000000001000 
 
    //    lane = 0b0000000000000000000000000001000 
 
    const expirationTime = expirationTimes[index]; 
    if (expirationTime === NoTimestamp) { 
      // Found a pending lane with no expiration time. If it's not suspended, or 
      // if it's pinged, assume it's CPU-bound. Compute a new expiration time 
      // using the current time. 
      // 发现一个没有过期时间并且待处理的lane，如果它没被挂起， 
      // 或者被触发了，那么去计算过期时间 
      if ( 
        (lane & suspendedLanes) === NoLanes || 
        (lane & pingedLanes) !== NoLanes 
      ) { 
 
        expirationTimes[index] = computeExpirationTime(lane, currentTime); 
      } 
    } else if (expirationTime <= currentTime) { 
      // This lane expired 
      // 已经过期，将lane并入到expiredLanes中，实现了将lanes标记为过期 
      root.expiredLanes |= lane; 
    } 
    // 将lane从lanes中删除，每循环一次删除一个，直到lanes清空成0，结束循环 
    lanes &= ~lane; 
  } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { 
  // 获取旧任务 
  const existingCallbackNode = root.callbackNode; 
 
  // 记录任务的过期时间，检查是否有过期任务，有则立即将它放到root.expiredLanes， 
  // 便于接下来将这个任务以同步模式立即调度 
  markStarvedLanesAsExpired(root, currentTime); 
 
  ... 
 
  // 若有任务过期，这里获取到的会是同步优先级 
  const newCallbackPriority = returnNextLanesPriority(); 
 
  ... 
 
  // 调度一个新任务 
  let newCallbackNode; 
  if (newCallbackPriority === SyncLanePriority) { 
    // 过期任务以同步优先级被调度 
    newCallbackNode = scheduleSyncCallback( 
      performSyncWorkOnRoot.bind(null, root), 
    ); 
  } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

function performConcurrentWorkOnRoot(root) { 
 
  ... 
 
  // 去执行更新任务的工作循环，一旦超出时间片，则会退出renderRootConcurrent 
  // 去执行下面的逻辑 
  let exitStatus = renderRootConcurrent(root, lanes); 
 
  ... 
 
  // 调用ensureRootIsScheduled去检查有无过期任务，是否需要调度过期任务 
  ensureRootIsScheduled(root, now()); 
 
  // 更新任务未完成，return自己，方便Scheduler判断任务完成状态 
  if (root.callbackNode === originalCallbackNode) { 
    return performConcurrentWorkOnRoot.bind(null, root); 
  } 
  // 否则retutn null，表示任务已经完成，通知Scheduler停止调度 
  return null; 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

function renderRootConcurrent(root: FiberRoot, lanes: Lanes) { 
 
  // workLoopConcurrent中判断超出时间片了， 
  // 那workLoopConcurrent就会从调用栈弹出， 
  // 走到下面的break，终止循环 
 
  // 然后走到循环下面的代码 
  // 就说明是被时间片打断任务了，或者fiber树直接构建完了 
  // 依据情况return不同的status 
  do { 
    try { 
      workLoopConcurrent(); 
      break; 
    } catch (thrownValue) { 
      handleError(root, thrownValue); 
    } 
  } while (true); 
 
 
  if (workInProgress !== null) { 
      // workInProgress 不为null，说明是被时间片打断的 
      // return RootIncomplete说明还没完成任务 
    return RootIncomplete; 
  } else { 
 
    // 否则说明任务完成了 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

function workLoopConcurrent() { 
  // 调用shouldYield判断如果超出时间片限制，那么结束循环 
  while (workInProgress !== null && !shouldYield()) { 
    performUnitOfWork(workInProgress); 
  } 
} 
1.
2.
3.
4.
5.
6.