react中如何做到中断diff过程和恢复

workLoop是 实现时间切片 和 可中断渲染的核心，简要说明如下：

// 并发任务的入口function workLoopConcurrent() {// Perform work until Scheduler asks us to yield// 有任务 & 是否需要中断while (workInProgress !== null && !shouldYield()) {performUnitOfWork(workInProgress);}}const scheduler = {// 任务放到队列里，等待空闲执行taskQueue: [{// 每个任务是个回调的概念, 且回调任务是可中断的callback: workLoopConcurrent}],// 判断: 是否需要中断, 将控制权交给主进程shouldYieldToHost() {// 没有剩余时间if (currentTime >= deadline) {// 但需要渲染 和 有更高优任务if (needsPaint || scheduling.isInputPending()) {return true; // 中断}// 是否超过 300msreturn currentTime >= maxYieldInterval;}// 还有剩余时间return false;},// 执行入口可见workLoop() {// 当前第一个任务currentTask = taskQueue[0];// 每次 currentTask 退出 就是一个时间切切片while (currentTask !== null) {// 任务没有过期, 但一帧已经无可用时间 或 需要被中断, 则让出主线程// 每一次执行均进行超时检测，做到让出主线程。// expirationTime >currentTime： 任务已过期// hasTimeRemaining :有剩余时间// shouldYieldToHost:是否暂停任务，让出主线程if (currentTask.expirationTime > currentTime&& (!hasTimeRemaining || shouldYieldToHost())) {break;}// 表示任务到了过期时间，并且有剩余时间来执行，没有到达需要浏览器渲染的时候// 那么我们执行任务const callback = currentTask.callback;// 拿到任务const continuationCallback = callback(didUserCallbackTimeout);// 执行任务// 如果该任务后, 还有连续回调if (typeof continuationCallback === 'function') {// 则保留当前currentTask.callback = continuationCallback;} else {// 将currentTask移除该队列pop(taskQueue);}// 更新currentTask,取出任务优先级最高的那个任务currentTask = peek(taskQueue);}},}

简而言之:

有个任务队列 queue，该队列存放可中断的任务。

workLoop对队列里取第一个任务currentTask，进入循环开始执行。

如果任务执行完后，还有连续的回调，则 currentTask.callback = continuationCallback

否则移除已完成的任务

当该任务没有时间 或 需要中断 (渲染任务 或 其他高优任务插入等)，则让出主线程。

否则执行任务 currentTask.callback()

更新任务currentTask，继续循环走起。

这里还涉及更多细节，例如:

requestAnimationFrame 计算一帧的空余时间；

使用new MessageChannel () 执行宏任务;

优先级;

…

这里不做详细说明。