Suspense and Fiber: The Intricate Machinery Behind Reacts Rendering Elegance
来源:dev.to
时间:2024-09-16 21:07:00 373浏览 收藏
哈喽!今天心血来潮给大家带来了《Suspense and Fiber: The Intricate Machinery Behind Reacts Rendering Elegance》,想必大家应该对文章都不陌生吧,那么阅读本文就都不会很困难,以下内容主要涉及到,若是你正在学习文章,千万别错过这篇文章~希望能帮助到你!
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 ( <suspense fallback={<div>loading...</div>}> <header /> <content /> <footer /> </suspense> ); } function header() { // simulating heavy computation for (let i = 0; i < 1e9; i++) {} return <h1>header with heavy computation</h1>; } function content() { return <p>this is the content area</p>; } function footer() { return <footer>footer content</footer>; }
它是如何开始的? 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 处理纤程的实际处理。这是协调阶段。
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 的当前实现
好了,本文到此结束,带大家了解了《Suspense and Fiber: The Intricate Machinery Behind Reacts Rendering Elegance》,希望本文对你有所帮助!关注golang学习网公众号,给大家分享更多文章知识!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
264 收藏
-
335 收藏
-
283 收藏
-
416 收藏
-
482 收藏
-
304 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 541次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 506次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习