React中的高优先级任务插队机制

Component.prototype.setState = function(partialState, callback) {  
  this.updater.enqueueSetState(this, partialState, callback, 'setState');  
}; 
1.
2.
3.

enqueueSetState(inst, payload, callback) {  
    // 获取当前触发更新的fiber节点。inst是组件实例  
    const fiber = getInstance(inst);  
    // eventTime是当前触发更新的时间戳  
    const eventTime = requestEventTime();  
    const suspenseConfig = requestCurrentSuspenseConfig();  
    // 获取本次update的优先级  
    const lane = requestUpdateLane(fiber, suspenseConfig);  
    // 创建update对象  
    const update = createUpdate(eventTime, lane, suspenseConfig);  
    // payload就是setState的参数，回调函数或者是对象的形式。  
    // 处理更新时参与计算新状态的过程  
    update.payload = payload;  
    // 将update放入fiber的updateQueue  
    enqueueUpdate(fiber, update);  
    // 开始进行调度 
     scheduleUpdateOnFiber(fiber, lane, eventTime);  
  } 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

const lane = requestUpdateLane(fiber, suspenseConfig); 
1.

const update: Update<*> = {  
  eventTime,  
  lane,  
  suspenseConfig,  
  tag: UpdateState,  
  payload: null,  
  callback: null,  
  next: null,  
}; 
1.
2.
3.
4.
5.
6.
7.
8.
9.

export function scheduleUpdateOnFiber(  
  fiber: Fiber,  
  lane: Lane,  
  eventTime: number,  
) {  
  // 第一步，检查是否有无限更新  
  checkForNestedUpdates();  
  ...  
  // 第二步，向上收集fiber.childLanes  
  const root = markUpdateLaneFromFiberToRoot(fiber, lane); 
  ...  
  // 第三步，在root上标记更新，将update的lane放到root.pendingLanes  
  markRootUpdated(root, lane, eventTime);  
  ...  
  // 根据Scheduler的优先级获取到对应的React优先级  
  const priorityLevel = getCurrentPriorityLevel();  
  if (lane === SyncLane) {  
    // 本次更新是同步的，例如传统的同步渲染模式  
    if (  
      (executionContext & LegacyUnbatchedContext) !== NoContext &&  
      (executionContext & (RenderContext | CommitContext)) === NoContext  
    ) {  
      // 如果是本次更新是同步的，并且当前还未渲染，意味着主线程空闲，并没有React的  
      // 更新任务在执行，那么调用performSyncWorkOnRoot开始执行同步任务 
       ...  
      performSyncWorkOnRoot(root);  
    } else {  
      // 如果是本次更新是同步的，不过当前有React更新任务正在进行，  
      // 而且因为无法打断，所以调用ensureRootIsScheduled 
      // 目的是去复用已经在更新的任务，让这个已有的任务  
      // 把这次更新顺便做了  
      ensureRootIsScheduled(root, eventTime); 
      ... 
     }  
  } else {  
    ...  
    // Schedule other updates after in case the callback is sync.  
    // 如果是更新是异步的，调用ensureRootIsScheduled去进入异步调度  
    ensureRootIsScheduled(root, eventTime);  
    schedulePendingInteractions(root, 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.

var newTask = {  
   id: taskIdCounter++,  
   // 任务函数，也就是 performConcurrentWorkOnRoot  
   callback,  
   // 任务调度优先级，由即将讲到的任务优先级转化而来  
   priorityLevel,  
   // 任务开始执行的时间点  
   startTime,  
   // 任务的过期时间  
   expirationTime,  
   // 在小顶堆任务队列中排序的依据  
   sortIndex: -1,  
 }; 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;  
export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;  
concurrent模式下的lanes：/*                               */ 0b1111111111111111111111111111100; 
1.
2.
3.

class Demo extends React.Component {  
  state = {  
    count: 0  
  }  
  onClick = () => {  
    this.setState({ count: 1 })  
    this.setState({ count: 2 })  
  }  
  render() {  
    return <button onClick={onClick}>{this.state.count}</button>  
  }  
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {  
  // 获取旧任务  
  const existingCallbackNode = root.callbackNode;  
  // 记录任务的过期时间，检查是否有过期任务，有则立即将它放到root.expiredLanes，  
  // 便于接下来将这个任务以同步模式立即调度  
  markStarvedLanesAsExpired(root, currentTime);  
  // 获取renderLanes  
  const nextLanes = getNextLanes(  
    root,  
    root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,  
  );  
  // 获取renderLanes对应的任务优先级  
  const newCallbackPriority = returnNextLanesPriority();  
  if (nextLanes === NoLanes) {  
    // 如果渲染优先级为空，则不需要调度  
    if (existingCallbackNode !== null) {  
      cancelCallback(existingCallbackNode);  
      root.callbackNode = null;  
      root.callbackPriority = NoLanePriority;  
    }  
    return;  
  }  
  // 如果存在旧任务，那么看一下能否复用  
  if (existingCallbackNode !== null) {  
    // 获取旧任务的优先级  
    const existingCallbackPriority = root.callbackPriority;  
    // 如果新旧任务的优先级相同，则无需调度  
    if (existingCallbackPriority === newCallbackPriority) {  
      return;  
    }  
    // 代码执行到这里说明新任务的优先级高于旧任务的优先级  
    // 取消掉旧任务，实现高优先级任务插队  
    cancelCallback(existingCallbackNode);  
  }  
  // 调度一个新任务  
  let newCallbackNode;  
  if (newCallbackPriority === SyncLanePriority) {  
    // 若新任务的优先级为同步优先级，则同步调度，传统的同步渲染和过期任务会走这里  
    newCallbackNode = scheduleSyncCallback(  
      performSyncWorkOnRoot.bind(null, root),  
    );  
  } else if (newCallbackPriority === SyncBatchedLanePriority) {  
    // 同步模式到concurrent模式的过渡模式：blocking模式会走这里  
    newCallbackNode = scheduleCallback(  
      ImmediateSchedulerPriority,  
      performSyncWorkOnRoot.bind(null, root),  
    );  
  } else {  
    // concurrent模式的渲染会走这里  
    // 根据任务优先级获取Scheduler的调度优先级  
    const schedulerPriorityLevel = lanePriorityToSchedulerPriority(  
      newCallbackPriority, 
    );  
    // 计算出调度优先级之后，开始让Scheduler调度React的更新任务  
    newCallbackNode = scheduleCallback(  
      schedulerPriorityLevel,  
      performConcurrentWorkOnRoot.bind(null, root),  
    );  
  }  
  // 更新root上的任务优先级和任务，以便下次发起调度时候可以获取到  
  root.callbackPriority = newCallbackPriority;  
  root.callbackNode = newCallbackNode;  
} 
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.
62.
63.

function processUpdateQueue<State>(  
  workInProgress: Fiber,  
  props: any,  
  instance: any,  
  renderLanes: Lanes,  
): void {  
  ...  
  if (firstBaseUpdate !== null) {  
    let update = firstBaseUpdate;  
    do {  
      const updateupdateLane = update.lane;  
      // isSubsetOfLanes函数的意义是，判断当前更新的优先级（updateLane）  
      // 是否在渲染优先级（renderLanes）中如果不在，那么就说明优先级不足  
      if (!isSubsetOfLanes(renderLanes, updateLane)) {  
        ...  
        /*  
        *  
        * newLanes会在最后被赋值到workInProgress.lanes上，而它又最终  
        * 会被收集到root.pendingLanes。  
        *  
        * 再次更新时会从root上的pendingLanes中找出应该在本次中更新的优先  
        * 级（renderLanes），renderLanes含有本次跳过的优先级，再次进入，  
        * processUpdateQueue wip的优先级符合要求，被更新掉，低优先级任务  
        * 因此被重做  
        * */  
        newLanes = mergeLanes(newLanes, updateLane);  
      } else {  
        // 优先级足够，去计算state  
        ... 
      }  
    } while (true);  
    // 将newLanes赋值给workInProgress.lanes，  
    // 就是将被跳过的update的lane放到fiber.lanes  
    workInProgress.lanes = newLanes; 
  }  
} 
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.

                               root（pendingLanes: 0b01110）  
                                   |  
1                                  App  
                                   |  
                                   |  
2 compeleteUnitOfWork-----------> div （childLanes: 0b01110）  
                                   /  
                                  /  
3                              <List/> ---------> <Table/> --------> p  
                          （lanes: 0b00010）   （lanes: 0b00100）  
                       （childLanes: 0b01000）       /  
                               /                   /  
                              /                   /  
4                            p                   ul  
                                                /  
                                               /  
                                              li ------> li 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

function completeUnitOfWork(unitOfWork: Fiber): void {  
  // 已经结束beginWork阶段的fiber节点被称为completedWork  
  let completedWork = unitOfWork;  
  do {  
    // 向上一直循环到root的过程  
    ...  
    // fiber节点的.flags上没有Incomplete，说明是正常完成了工作  
    if ((completedWork.flags & Incomplete) === NoFlags) {  
      ...  
      // 调用resetChildLanes去收集lanes  
      resetChildLanes(completedWork);  
      ...  
    } else {/*...*/}  
    ...  
  } while (completedWork !== null);  
  ...  
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

function resetChildLanes(completedWork: Fiber) {  
  ...  
  let newChildLanes = NoLanes;  
  if (enableProfilerTimer && (completedWork.mode & ProfileMode) !== NoMode) {  
    // profile相关，无需关注  
  } else {  
    // 循环子节点和兄弟节点，收集lanes  
    let child = completedWork.child;  
    while (child !== null) {  
      // 收集过程  
      newChildLanes = mergeLanes(  
        newChildLanes,  
        mergeLanes(child.lanes, child.childLanes),  
      );  
      childchild = child.sibling;  
    }  
  }  
  // 将收集到的lanes放到该fiber节点的childLanes中  
  completedWork.childLanes = newChildLanes;  
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

function commitRootImpl(root, renderPriorityLevel) {  
  // 将收集到的childLanes，连同root自己的lanes，一并赋值给remainingLanes  
  let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);  
  // markRootFinished中会将remainingLanes赋值给remainingLanes  
  markRootFinished(root, remainingLanes);  
  ...  
} 
1.
2.
3.
4.
5.
6.
7.

function commitRootImpl(root, renderPriorityLevel) {  
  // 将收集到的childLanes，连同root自己的lanes，一并赋值给remainingLanes  
  let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);  
  // markRootFinished中会将remainingLanes赋值给remainingLanes  
  markRootFinished(root, remainingLanes);  
  ...  
  // 在每次所有更新完成的时候都会调用这个ensureRootIsScheduled  
  // 以保证root上任何的pendingLanes都能被处理  
  ensureRootIsScheduled(root, now());  
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.