【React的Fiber及中断-重启逻辑的设计】

前言

react的循环渲染逻辑可以参考我的这篇文章。【react循环渲染】

中断-重启的效果

以前的同步阻塞渲染的火焰峰图

现在开启中断-重启逻辑的火焰峰图

可以看到React的中断-重启分片的设计能够降低原本同步循环渲染带来的卡顿问题，分片的设计也使得React能够交换不同优先级任务间的执行顺寻。不过这也为React引入了另一个问题，并发渲染导致的同一页面不同组件在同一帧读取到不同store值的问题（react提供的解决方式useSyncExternalStore）。

中断-重启逻辑

入口

前言的文章即是按照同步阻塞渲染逻辑来debugger的。中断-重启分片渲染逻辑与阻塞渲染逻辑分道扬镳始于这个判断（因本人不知道如何才能让react自动走到这个判断上来，索性debugger的时候直接把shouldTimeSlice改成true了）

// 中断-重启调用栈
performConcurrentWorkOnRoot -> renderRootConcurrent -> workLoopConcurrent -> performUnitOfWork -> beginWork
// 相较于同步循环渲染区别就在于workLoopConcurrent的调用
function workLoopConcurrent() {// Perform work until Scheduler asks us to yieldwhile (workInProgress !== null && !shouldYield()) {performUnitOfWork(workInProgress);}
}
// 通过额外添加!shouldYield()来增加跳出循环的时机，释放栈给其它任务然后再在某一时候重启中断的循环

shouldYield()函数会在执行时间超过5ms的时候返回true进而跳出当前的while循环

function shouldYield () {const timeElapsed = performance.now() - startTimeif (timeElapsed  < 5) {return false}return true
}

中断

通过控制shouldYield函数返回true来跳出workLoopConcurrent的while循环，进而进入为之后重启做准备的逻辑。

// 进入中断流程之后renderRootConcurrent函数的返回值
function renderRootConcurrent() {if (workInProgress !== null) {return RootInProgress} else {return workInProgressRootExitStatus; // 返回完成状态}
}
// 如果返回的是RootInProgress则会进入后续的重启准备中。像同步流程中结束之后返回workInProgressRootExitStatus，则会进入finishConcurrentRender函数开启commitRoot(虚拟dom到真实dom的创建渲染过程)

调试项目中的自定义组件，主要是展示与上方FiberNode中的type关系，非流程相关的图片，可以忽略不看

重启准备

从入口部分粘贴的代码部分中可以看到performConcurrentWorkOnRoot函数即为终端重启调用栈的开始，这里的返回为下一次的开启创造了函数执行的条件

此时函数栈弹出到workLoop函数中，并将continuationCallback赋值成上面返回的函数，最后赋值给currentTask.callback，并在下一次的while循环通过shouldYieldToHost()进行循环的跳出

function workLoop() {while() {if(shouldYieldToHost()) {break; // 通过此处跳出上述循环}const callback = currentTask.callback; // 任务队列中当前任务的执行函数const continuationCallback = callback(); // 任务执行完成后的返回值if (typeof continuationCallback === 'function') {currentTask.callback = continuationCallback;}}if (currentTask !== null) {return true} else {return false}
}

中断到准备重启函数调用栈弹出顺序

// ---> 代表函数栈弹出方向
workLoopConcurrent ---> renderRootConcurrent -> performConcurrentWorkOnRoot -> flushWork -> performWorkUntilDeadline
// 弹出到performWorkUntilDeadline会执行schedulePerformWorkUntilDeadline()
const performWorkUntilDeadline = () => {let hasMoreWork = true;try {hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);} finally {if (hasMoreWork) {schedulePerformWorkUntilDeadline();} else {isMessageLoopRunning = false;scheduledHostCallback = null;}}
}// schedulePerformWorkUntilDeadline 是一个全局let变量schedulePerformWorkUntilDeadline = () => {port.postMessage(null); // 此时会推送一个为null的消息，等待下一次时间循环被取出};

MessageChannel（扩展）

扩展：React这里的port使用的是什么消息发布订阅功能（MessageChannel）。port.postMessage()可以任务具有宏任务的作用，会遵循事件循环来等待任务的调用。

const { port1, port2 } = new MessageChannel();
port1.onmessage = (event) => {console.log("port1收到消息", event);
};
import React from "react";
const MessageChannelIndex = () => {function testEventLoop () {console.log("我是事件循环同步任务的开始");setTimeout(() => {console.log("我是setTimeout");}, 0);port2.postMessage("我是port2");console.log("我是事件循环同步任务的结束");}return (<div><button onClick={testEventLoop}>开始</button></div>);
};export default MessageChannelIndex;

看下打印效果

宏任务可以让浏览器能够调度高优先级的像用户输入，滚动，I/O等高优先级的任务进行插队，从而防止卡顿。

重启

当事件循环来到port1.onmessage订阅的函数执行时，循环渲染变可以开始重启了。

// 订阅函数
channel.port1.onmessage = performWorkUntilDeadline
// 开始循环渲染的调用栈顺序
performWorkUntilDeadline -> flushWork -> workLoop -> performConcurrentWorkOnRoot -> renderRootConcurrent -> workLoopConcurrent

结语

按照上述流程循环往复知道全部渲染完成。