知识深度07-Vue2和Vue3和React三者的diff 算法有什么区别
创始人
2024-05-31 21:02:36
0

Vue React diff

题目

Vue React diff 算法有什么区别

diff 算法

diff 算法是一个非常普遍常用的方法,例如提交 github pr 或者(gitlab mr)时,会对比当前提交代码的改动,这就是 diff 。

Vue React diff 不是对比文字,而是 vdom 树,即 tree diff 。

传统的 tree diff 算法复杂度是 O(n^3) ,算法不可用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6mMJzilG-1678420619999)(./img/tree-diff.png)]

优化

Vue React 都是用于网页开发,基于 DOM 结构,对 diff 算法都进行了优化(或者简化)

  • 只在同一层级比较,不夸层级 (DOM 结构的变化,很少有跨层级移动)
  • tag 不同则直接删掉重建,不去对比内部细节(DOM 结构变化,很少有只改外层,不改内层)
  • 同一个节点下的子节点,通过 key 区分

最终把时间复杂度降低到 O(n) ,生产环境下可用。这一点 Vue React 都是相同的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GgQtN87m-1678420620000)(./img/tree-diff-1.png)]

React diff 特点 - 仅向右移动

比较子节点时,仅向右移动,不向左移动。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P626HdCC-1678420620000)(./img/react-diff.png)]

Vue2 diff 特点 - 双端比较

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xJZBj7IU-1678420620001)(./img/vue2-diff.png)]

定义四个指针,分别比较

  • oldStartNode 和 newStartNode
  • oldStartNode 和 newEndNode
  • oldEndNode 和 newStartNode
  • oldEndNode 和 newEndNode

然后指针继续向中间移动,知道指针汇合。

Vue3 diff 特点 - 最长递增子序列

例如数组 [3,5,7,1,2,8] 的最长递增子序列就是 [3,5,7,8 ] 。这是一个专门的算法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KKxmJrkJ-1678420620002)(./img/vue3-diff.png)]

算法步骤

  • 通过“前-前”比较找到开始的不变节点 [A, B]
  • 通过“后-后”比较找到末尾的不变节点 [G]
  • 剩余的有变化的节点 [F, C, D, E, H]
    • 通过 newIndexToOldIndexMap 拿到 oldChildren 中对应的 index [5, 2, 3, 4, -1]-1 表示之前没有,要新增)
    • 计算最长递增子序列得到 [2, 3, 4] ,对应的就是 [C, D, E] ,即这些节点可以不变
    • 剩余的节点,根据 index 进行新增、删除

该方法旨在尽量减少 DOM 的移动,达到最少的 DOM 操作。

答案

  • React diff 特点 - 仅向右移动
  • Vue2 diff 特点 - 双端比较
  • Vue3 diff 特点 - 最长递增子序列

划重点

以最小的成本了解原理,知道区别,应对面试。

不要纠结于细节和源码,这会耗费你大量的时间成本 —— 除非你目的就是学习源码,这也不是本课程的重点。

连环问:diff 算法中 key 为何如此重要

无论在 Vue 还是 React 中,key 的作用都非常大。以 React 为例,是否使用 key 对内部 DOM 变化影响非常大。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d522P2sz-1678420620002)(./img/key.png)]

  • {{num}}
const todoItems = todos.map((todo) =>
  • {todo.text}
  • )

    相关内容

    热门资讯

    安卓系统弹出窗口问题,安卓系统... 手机里的安卓系统突然弹出窗口,是不是让你心头一紧,手忙脚乱?别急,今天就来和你聊聊这个让人头疼的安卓...
    安卓系统加苹果战队,科技竞技的... 你知道吗?在科技的世界里,有一场特别的较量正在悄然上演。那就是安卓系统和苹果战队的对决!这两大操作系...
    miui与安卓系统关系,深度定... 亲爱的读者,你是否曾在使用手机时,对那熟悉的MIUI界面感到亲切又好奇?今天,就让我们一起揭开MIU...
    安卓原生系统手机哪些,探索安卓... 你有没有想过,为什么你的手机总是那么流畅,那么强大?这背后,可是有一个默默无闻的英雄——安卓原生系统...
    安卓系统cpu天梯图,性能比拼... 你有没有发现,手机里的安卓系统,就像是我们的好朋友,每天都在默默无闻地工作着。而它的心脏,也就是CP...
    安卓系统通知时间,掌握生活节奏... 你有没有发现,手机里的安卓系统通知时间有时候会让人有点头疼呢?有时候它准时得像军号,有时候又懒洋洋得...
    安卓系统默认安装位置,默认安装... 你有没有发现,每次新买一台安卓手机,打开它的时候,那些默认安装的APP总是占据着固定的位置?是不是好...
    安卓系统内存优化模式,高效运行... 手机用久了是不是感觉越来越卡?别急,今天就来给你揭秘安卓系统内存优化模式的秘密,让你的手机焕发新生!...
    零信任软件安卓系统,零信任软件... 你知道吗?在科技飞速发展的今天,手机已经成为了我们生活中不可或缺的一部分。而在这其中,安卓系统凭借其...
    怎样更改安卓系统时间,安卓系统... 手机时间不对了?别急,我来教你怎样更改安卓系统时间,让你手机上的时间瞬间回到正轨!一、直接调整系统时...
    鸿蒙系统离不开安卓,基于安卓的... 你知道吗?最近在科技圈里,有一个话题可是引起了不小的讨论呢!那就是鸿蒙系统与安卓的关系。很多人都在问...
    安卓系统怎么重启应用,安卓系统... 手机里的安卓应用突然卡住了,是不是让你头疼不已?别急,今天就来教你怎么轻松重启安卓系统中的应用,让你...
    安卓系统开启远程登录,安卓系统... 你有没有想过,即使你不在家,也能轻松管理你的安卓设备呢?没错,就是安卓系统开启远程登录!这可是个超级...
    黑域安卓系统4.0,创新功能与... 亲爱的读者们,你是否对安卓系统有所好奇?今天,我要带你深入探索一个神秘而独特的存在——黑域安卓系统4...
    安卓系统基础教程,从入门到精通 你有没有想过,你的安卓手机里那些神奇的软件和功能是怎么来的呢?其实,这一切都离不开安卓系统的基础。今...
    安卓系统盒子停服,回顾辉煌历程 你有没有发现,最近你的安卓系统盒子突然有点不对劲?是不是觉得它变得有点“懒”,不再像以前那样活泼了呢...
    安卓系统怎么下蝙蝠,安卓系统下... 你有没有想过,在安卓手机上下载蝙蝠APP,竟然也能成为一门学问呢?没错,就是那个让你随时随地畅游网络...
    安卓系统能播放蓝光,安卓系统轻... 你有没有想过,你的安卓手机或者平板,竟然能播放那些高清到让人惊艳的蓝光电影呢?没错,就是那种画质细腻...
    汽车系统识别到安卓,智能驾驶新... 你知道吗?最近汽车界可是掀起了一股新潮流呢!那就是汽车系统识别到安卓,这可不是简单的兼容,而是深度融...
    工程业务系统安卓版,助力项目管... 你知道吗?最近我在手机上发现了一个超级实用的工程业务系统安卓版,简直让我爱不释手!这款应用不仅功能强...