前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系

简介: 前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系

React Fiber 虚拟 DOM 实现

Fiber是react执行渲染时的一种新的调度策略,是虚拟DOM的一种实现方式,帮助我们管理DOM更新的优先级。


fiber是个链表,有type,props,return,child 和 sibing 属性,指向第一个子节点和相邻的兄弟节点,从而构成 fiber tree;return 属性指向其父节点。


因为JavaScript是单线程的,一旦组件开始更新,主线程就一直被React控制,当js在处理大型计算的时候会导致页面出现卡帧的现象,更严重的会出现页面“假死”;而 Fiber 能将大型的计算拆分成一个个小型计算,然后按照执行顺序异步调用,这样就不会长时间霸占线程,UI也能在俩次小型计算的执行间隙进行更新,从而给与用户及时的反馈。



相关文章
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
396 0
|
JavaScript 前端开发 算法
React技术栈-虚拟DOM和DOM diff算法
这篇文章介绍了React技术栈中的虚拟DOM和DOM diff算法,并通过一个实际案例展示了如何使用React组件和状态管理来实现动态更新UI。
223 2
|
JavaScript 前端开发 算法
react中虚拟dom和diff算法
在React中,虚拟DOM(Virtual DOM)和Diff算法是两个核心概念,它们共同工作以提高应用的性能和效率。
185 4
|
JavaScript 前端开发
react学习(3)创建虚拟dom的两种方式
react学习(3)创建虚拟dom的两种方式
267 68
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
276 1
|
JavaScript 前端开发 算法
React 虚拟 DOM 深度解析
【10月更文挑战第5天】本文深入解析了 React 虚拟 DOM 的工作原理,包括其基础概念、优点与缺点,以及 Diff 算法的关键点。同时,分享了常见问题及解决方法,并介绍了作者在代码/项目上的成就和经验,如大型电商平台的前端重构和开源贡献。
223 3
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
208 3
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
443 0
react字符串转为dom标签,类似于Vue中的v-html
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题