Suspense and Fiber: The Intricate Machinery Behind React&#s Rendering Elegance
DDD
发布时间：2024-09-16 18:21:13
|
400人浏览过
|
来源于dev.to
转载
react fiber 是 react 并发渲染的核心，它使框架能够将任务分解为更小的单元，并优先处理更重要的任务，从而实现更流畅、响应更灵敏的用户界面。当与 suspense 配合使用时，它允许 react “暂停”渲染，在等待数据获取或计算等任务完成时显示后备 ui。
fiber 是一个 javascript 对象，代表 react 中的一个工作单元。它在渲染过程中保存有关组件的重要信息：
那篇文章中的所有代码都是伪代码。真实文件链接可以在文末找到
{
tag, // the type of fiber (e.g., hostcomponent, functioncomponent)
statenode, // the actual dom node or instance for class components
memoizedprops, // props used during the last render
memoizedstate, // state used during the last render
return, // parent fiber
sibling, // next sibling fiber
child, // first child fiber
alternate, // link to the previous fiber (for reconciling updates)
}
纤程树 允许 react 高效地遍历组件树，执行渲染工作，并跟踪更新、状态和 dom 突变。
让我们构建一个由页眉、内容和页脚组件组成的简单应用程序。为了强调 fiber 的工作原理，我们将让 header 执行繁重的计算。
function app() {
return (
loading... }>
);
}
function header() {
// simulating heavy computation
for (let i = 0; i < 1e9; i++) {}
return
header with heavy computation
;
}
function content() {
return
this is the content area
;
}
function footer() {
return
;
}
它是如何开始的？ render 函数负责启动 react 中的初始渲染过程。它需要一个根组件（如 app）并为 react 创建初始的 fiber 树：
function render(element, container) {
const rootfiber = {
tag: hostroot, // root fiber tag
statenode: container, // reference to the dom container
child: null, // initial child will be added here
};
// create a new work-in-progress fiber for our app component
const appfiber = createfiberfromelement(element);
rootfiber.child = appfiber;
// start the rendering process
schedulework(rootfiber);
}
然后工作安排就开始行动了。 schedulework 负责启动工作循环并处理 fiber 树。它决定何时开始处理工作，通常使用workloop。
function schedulework(rootfiber) {
nextunitofwork = rootfiber; // set the root fiber as the starting point
requestidlecallback(workloop); // begin processing fibers when the browser is idle
}
这里，根 fiber 被设置为 nextunitofwork，react 调度 workloop 函数来处理它。 react 使用 requestidlecallback 等待浏览器空闲后再开始工作，这对于非阻塞渲染至关重要。
如前所述，workloop 和performunitofwork 处理纤程的实际处理。这是协调阶段。
听脑AI
听脑AI语音，一款专注于音视频内容的工作学习助手，为用户提供便捷的音视频内容记录、整理与分析功能。
下载
workloop 通过调用 performunitofwork 来处理每个 fiber，直到所有任务完成或浏览器需要优先处理其他任务。
function workloop() {
while (nextunitofwork && !shouldyield()) {
nextunitofwork = performunitofwork(nextunitofwork); // perform work for the next fiber
}
if (!nextunitofwork) {
// commit all completed work to the dom
commitroot();
} else {
// yield control and schedule the next chunk of work
requestidlecallback(workloop);
}
}
performunitofwork 处理各个纤维，检查 suspense 边界，启动渲染任务并管理更新。
function performunitofwork(fiber) {
const next = beginwork(fiber);
// if there's more work to do, return the next unit
if (next) {
return next;
}
// otherwise, complete the work and move to the next sibling or parent
let sibling = fiber.sibling;
if (sibling) {
return sibling;
}
return fiber.return;
}
function beginwork(fiber) {
if (fiber.tag === suspensecomponent) {
if (fiber.suspensestate === suspended) {
// render fallback ui if data is not ready
return fiber.fallback;
} else if (fiber.suspensestate === resolved) {
// render actual content once data resolves
return fiber.child;
}
}
// continue rendering for other fibers
}
完成所有工作单元后，commitroot 负责将 fiber 树提交到 dom，包括处理 suspense fallback ui。这是提交阶段。
function commitRoot() {
let fiber = rootFiber;
while (fiber) {
if (fiber.tag === SuspenseComponent && fiber.suspenseState === Suspended) {
// Commit fallback UI if Suspense is active
updateDOM(fiber.stateNode);
} else {
// Commit normal content
updateDOM(fiber.memoizedProps);
}
// If the fiber has a passive effect (i.e., useEffect), schedule it
if (fiber.effectTag === Passive) {
// Function to schedule the useEffect hooks to run after the DOM updates and browser paint
scheduleEffectHooks(fiber);
}
fiber = fiber.next; // Move to the next fiber in the tree
}
}
在提交阶段，react 会为任何具有副作用（例如 useeffect）的 fiber 调用 scheduleeffecthooks。这些钩子被推迟到 dom 更新和浏览器绘制之后，以避免阻塞渲染过程。这使得 react 能够执行非阻塞更新，同时确保 ui 稳定后及时执行副作用。
在本文中，我们探讨了 react fiber 架构的内部工作原理以及 suspense 如何与其交互以增强渲染过程。我们了解了 react 如何将渲染任务分解为更小的单元，确定重要任务的优先级，并推迟不太重要的更新，以保持用户界面流畅且响应迅速。
我们对 fiber 树结构、工作调度过程以及协调和提交阶段如何有效更新 dom 有了清晰的了解。我们还探讨了 suspense 如何集成到该架构中，在等待数据或繁重计算时显示后备内容。
如果您对本文有任何反馈或想法 - 无论部分不清楚还是可以改进 - 我很高兴听到它们。您的见解将有助于为每个人完善和增强内容。
来源和原始实现：
- 反应纤维概述：
- 反应悬念：
- performunitofwork 的当前实现：
- beginwork 的当前实现：
- commitroot 的当前实现：
- schedulework 和 workloop 的当前实现
