虚拟DOM工作流程(vue/React)

最新推荐文章于 2022-06-18 13:54:45 发布
最新推荐文章于 2022-06-18 13:54:45 发布
阅读量443 收藏 2
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45752063/article/details/109095240
版权
本文深入探讨了Vue和React中虚拟DOM的工作流程。在Vue中，模板转换为虚拟DOM，数据变化时通过diff算法生成patch来更新实际DOM。而在React中，jsx构建虚拟DOM，数据变更后利用React Fiber进行分片比较，同样生成patch来优化DOM操作。这两个库都利用虚拟DOM提高了UI渲染效率。
摘要由CSDN通过智能技术生成

虚拟DOM工作流程(vue/React)

vue
  1. 根据模板 ->创建虚拟dom(jsx)
  2. render函数渲染jsx -> 虚拟对象模型
  3. 在mounterd显然真实dom
  4. Data选项数据改变时
  5. 再一次生成vdom
  6. 通过diff算法【使用js进行比较】比对生成patch补丁对象
  7. 根据patch补丁对象重新渲染真实dom
React
  1. 根据模板 -> vdom [jsx]
  2. render渲染jsx -> 虚拟dom对象模型
  3. 在componentDidmount渲染真实dom
  4. 当data发生改变时
  5. 再一次生成vdom
  6. 通过 React Filber 【React 16版本以上使用】算法进行比较生成patch补丁对象
  7. 根据patch补丁对象重新渲染真实dom
diff算法

我们先根据真实DOM生成一个虚拟 DOM，当虚拟DOM某个节点的数据改变后会生成一个新的Vdom，然后Vdom和真实DOM作对比，发现有不一样的地方就直接修改在真实的DOM上。

filber算法

filber 算法就是一一分片,把一个耗时长的任务分成很多小片，每一个小片运行时间很短，虽然总时间依然很长，但是在小片执行完之后，都给其他任一个务执行的机会，这样线程就不会被独占了，其他任务依然有运行的机会

Jeffery Feng
关注
专栏目录
从虚拟dom知识无痛深入vue与react的原理
didadidadidadida的博客
03-29 1564
我们都知道像vue、react都有用到虚拟dom,那么虚拟dom到底是什么？框架为什么不直接操作真实dom而要在中间要引入虚拟dom呢？vue和react的虚拟dom又有什么异同呢？我们就从虚拟dom开始讲起，再来逐步引入讲解vue与react的部分原理及其异同，这里会顺便讲解到数据驱动视图及视图驱动数据，顺便明白MVVM、MVC这两种模式，顺便引入相关的八股文知识点，不小心一下子就明白了一大堆知识。
前端框架及项目面试－聚焦Vue3、React、Webpack（最新升级版，包升级）
01-13
此外，Vue3还对性能进行了优化，如虚拟DOM的改进和Teleport等新特性，使页面渲染更加高效。 React作为Facebook推出的JavaScript库，它的核心理念是组件化开发。在React中，一切皆为组件，这极大地提高了代码的复用...
谈谈Vue/React中的虚拟DOM(vDOM)与Key值
weixin_34138377的博客
06-11 455
谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一、DocumentFragment 在了解虚拟DOM前，先来了解DOM的一个对象属性——DocumentFragment。 在一次操作中，需要频繁操作DOM时，就可以先将要改变的节点附在DocumentFragment上，之后再将该对象渲染到DOM中，改方法只对DOM进行了一次操作，可以显著提高性能。 但是该方法只适用于局部操作，而在真...
对比了React17和Vue3后，我总结了这些面试可用的亮点​
azl397985856的专栏
03-01 1453
作为前端最火的两个框架，React 和 Vue 是面试必考的内容。特别是到了中高级前端岗，对于框架的考察会更加深入，比如：Vue3.0 相对于 Vue2.x 有哪些变化？为什么 v-for...
深入分析虚拟DOM的渲染过程和特性
油墨香^-^的博客
06-18 542
作者 | code秘密花园/ ConardLi 导读 React的虚拟 DOM和 Diff算法是 React的非常重要的核心特性，这部分源码也非常复杂，理解这部分知识的原理对更深入的掌握 React是非常必要的。 本来想将虚拟 DOM和 Diff算法放到一篇文章，写完虚拟 DOM发现文章已经很长了，所以本篇只分析虚拟 DOM。 本篇文章从源码出发，分析虚拟 DOM的核心渲染原理，以及 React对它做的性能优化点。 说实话 React源码真的很难读😅，如果本篇文章帮助到了你，那么请给个赞👍支持
react虚拟dom原理_快速了解React及其虚拟DOM的工作原理
cumian9828的博客
07-18 525
react虚拟dom原理This is part of my “React for beginners” series on introducing React, its core features and best practices to follow. More articles are coming! 这是我的“初学者React”系列的一部分，该系列介绍了React，其核心功能和可遵循的最...
Vue虚拟Dom节点、VDOM渲染流程、diff算法、JSX
weixin_42357865的博客
11-10 573
Vue虚拟Dom节点、VDOM渲染流程、diff算法、JSX，Vue中为什么要是用jsx
前端面试必刷/跨域/浏览器工作原理/Vue/React/性能优化
12-06
Vue以其简洁易学的API和组件化思想受到广大开发者喜爱，它的响应式系统和虚拟DOM使得开发高效且易于维护。而React则以其组件化的开发模式和JSX语法著称，通过React Hooks的引入，使得状态管理和副作用处理更加灵活。...
virtual-dom：关于Vue，React，Preact和Omi等框架源码的解读
02-06
在IT行业中，虚拟DOM（Virtual DOM）是一种优化前端性能的关键技术，它被广泛应用于现代JavaScript框架，如Vue、React、Preact以及Omi等。这些框架都采用了虚拟DOM的概念来提高用户界面的更新效率，从而提供更流畅的...
VUE,REACT相关视频下载
03-17
- **虚拟 DOM**：React 使用虚拟 DOM 来提高性能。 - **单向数据流**：React 推荐使用单向的数据流动模型，使数据更易于追踪和调试。 - **强大的生态系统**：React 拥有丰富的第三方库和工具。 2. **应用场景**...
浅谈React的最大亮点之虚拟DOM
08-27
主要介绍了浅谈React的最大亮点之虚拟DOM,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
DOM渲染流程
weixin_30369041的博客
05-15 126
渲染引擎——webkit和Gecko Firefox使用Geoko——Mozilla自主研发的渲染引擎 Safari和Chrome都使用webkit，Webkit是一款开源渲染引擎 dom渲染流程： 　　1、浏览器解析html源码，然后创建一个DOM树。在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DO...
关于 Virtual Dom 的简单了解（snabbdom，Vue， React）
博客
04-16 2270
Virtual Dom 即根据最终状态在内存中绘制出一棵 Virtual Dom Tree，使用 Diff 算法与现存的 Dom Tree 对比并更新。 Virtual Dom 并不能提升性能, 直接操作 Dom 理论上是最快的。 1. Snabbdom Example(官方实例) 2. 深入浅出 1.) Virtual Node /*...
vue与react虚拟dom对比
qq_41123620的博客
01-29 3082
虚拟dom: 同 vue和react都采用了虚拟dom算法，以最小化更新真实DOM，从而减小不必要的性能损耗。 按颗粒度分为tree diff, component diff, element diff. tree diff 比较同层级dom节点，进行增、删、移操作。如果遇到component， 就会重新tree diff流程。 差异 dom的更新策略不同 react 会自顶向下全diff. vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。 1. 在react中，当状态发生改变时，组件
虚拟DOM实现流程
忆初
08-06 433
  尚未使用虚拟DOM 方案一： 1． state数据 2．JSX模版 3，数据＋模版结合，生成真实的DOM，来显示 4． state发生改变 5.   数据＋模版结合，生成真实的DOM，替換原始的DOM   缺陷： 第一次生成了ー个完整的DOM片段 第二次生成了一个完整的DOM片段 第二次的D0M替换第一次的DOM，非常耗性能 方案二： 1． state数据 2．J...
面试官：谈谈虚拟dom在Vue和React中的应用
ITMuch的专栏
01-31 445
作为国内应用最广的两个框架，Vue 和 React 是前端必须掌握的内容，也是面试的重点。但大多数读者都只擅长其中一个框架，当面试涉及到另一个框架的内容时，就答不好了。比如虚拟dom，两...
[react] react的虚拟DOM和vue的虚拟DOM有什么区别？
歌谣的博客
09-20 617
[react] react的虚拟DOM和vue的虚拟DOM有什么区别？ React 是数据先生成 vdom，然后对比 vdom（实现上并非先后顺序，两棵树边遍历边生成新的树），最后通过新的 DOM 树渲染。 Vue 是数据先进性对比，先通过数据的不同，再去更新 vdom（这不知道理解的是否正确） 一个 diff 树 一个diff 数据 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
什么是虚拟DOM?(vue,react)什么是diff算法?
苦夏木禾
04-27 386
虚拟DOM什么是DOMDOM树为什么原生JS会浪费性能?什么是虚拟DOM？工作原理为什么虚拟DOM性能更优秀？什么是diff算法？     在这三个框架中(vue,react),都是使用虚拟DOM来提高效率的,那么来说说什么是虚拟DOM?为什么要用?还有它是怎么工作的? 什么是DOM 浏览器中的一个概念,用JS对象来表示页面上的元素,并提供用于操作DOM对象的API DOM树 一个网页呈现的概念 网页呈现的过程: 浏览器请求服务器获取页面HTML代码 浏览器要先在内
React 16.7 Fiber源码解读 （二）之运行流程
辰辰沉沉大辰沉
02-01 2514
Fiber Debugger Fiber Debugger是React官方的一个图形化展示fiber运行过程的动态demo. 点击Edit按钮，可将以下代码复制到编辑框，点击运行Run即可查看 log('Render <div>Hello</div&am
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值