千锋教育-做有情怀、有良心、有品质的职业教育机构

当前位置:首页  >  关于学院  >  技术干货  >  html5技术干货  >  正文

既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?

来源:千锋教育
发布时间:2022-12-27 15:34:20
分享

为什么还需要虚拟DOM进行diff检测差异

  1.减少对真实DOM的操作 Diff 算法探讨的就是虚拟 DOM 树发生变化后,生成 DOM 树更新补丁的方式。对比新旧两株虚拟 DOM 树的变更差异,将更新补丁作用于真实 DOM,以最小成本完成视图更新。

  具体流程:

  1. 真实 DOM 与虚拟 DOM 之间存在一个映射关系。这个映射关系依靠初始化时的 JSX 建立完成;

  2. 当虚拟 DOM 发生变化后,就会根据差距计算生成 patch,这个 patch 是一个结构化的数据,内容包含了增加、更新、移除等;

  3. 最后再根据 patch 去更新真实的 DOM,反馈到用户的界面上。 这样一个生成补丁、更新差异的过程统称为 diff 算法。 这里涉及3个要点:

  4. 更新时机:更新发生在setState、Hooks 调用等操作以后

  5. 遍历算法:采用深度优先遍历,从根节点出发,沿着左子树方向进行纵向遍历,直到找到叶子节点为止。然后回溯到前一个节点,进行右子树节点的遍历,直到遍历完所有可达节点

  6. 优化策略:树、组件及元素三个层面进行复杂度的优化

  7. 忽略节点跨层级操作场景,提升比对效率。

  1. 这一策略需要进行树比对,即对树进行分层比较。树比对的处理手法是非常“暴力”的,即两棵树只对同一层次的节点进行比较,如果发现节点已经不存在了,则该节点及其子节点会被完全删除掉,不会用于进一步的比较,这就提升了比对效率

  2. 如果组件的 class 一致,则默认为相似的树结构,否则默认为不同的树结构

  3. 在组件比对的过程中:如果组件是同一类型则进行树比对;如果不是则直接放入补丁中。只要父组件类型不同,就会被重新渲染。这也就是为什么shouldComponentUpdate、PureComponent 及 React.memo 可以提高性能的原因

  4. 同一层级的子节点,可以通过标记 key 的方式进行列表对比

  5. 元素比对主要发生在同层级中,通过标记节点操作生成补丁。节点操作包含了插入、移动、删除等。其中节点重新排序同时涉及插入、移动、删除三个操作,所以效率消耗最大,此时策略三起到了至关重要的作用。通过标记 key 的方式,React 可以直接移动 DOM 节点,降低内耗 通过diff算法能准确的获取到具体的节点 进行针对操作!!!

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

相关推荐

  • vue配置跨域怎么操作 Vue配置跨域的操作非常简单。在Vue项目中,我们可以通过配置webpack来实现跨域请求。在Vue项目的根目录下找到config文件夹,然后打开index.js文件。在该文件中,我们可以找到一个名为
  • npm包管理工具有什么用途? npm(NodePackageManager)是JavaScript生态系统中最常用的包管理工具。它是随同Node.js安装的,默认包含在Node.js的安装包中。npm允许开发者轻松地安装、更新、卸
  • vue事件修饰符有哪些? 在Vue.js中,事件修饰符是一种用于修改事件触发行为的特殊修饰符。以下是常用的事件修饰符:1.`.stop`:阻止事件继续传播,即阻止事件冒泡。2.`.prevent`:阻止事件默认行为。3.`.c
  • vue路由守卫有哪些? 在Vue.js中,路由守卫是一种用于控制导航的机制,它允许您在路由切换前后执行相应的操作。VueRouter提供了三种类型的路由守卫:1.全局前置守卫(GlobalBeforeGuards):-`be
  • css绝对定位和相对定位 CSS中的绝对定位(absolutepositioning)和相对定位(relativepositioning)是用于控制元素在页面布局中的位置的两种常见定位方式。1.绝对定位(absolutepos
  • npm安装less用法介绍 npm(NodePackageManager)是Node.js的包管理器,它允许您安装、管理和共享JavaScript模块。要安装和使用Less(一种CSS预处理器),您可以按照以下步骤进行操作:1.