知识深度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}
  • )

    相关内容

    热门资讯

    谷歌安卓10系统打不开,原因排... 最近是不是你也遇到了这个让人头疼的问题:谷歌安卓10系统打不开?别急,让我来帮你一步步排查,找出原因...
    安卓系统转苹果吃鸡,体验全新i... 你知道吗?最近身边的小伙伴们都在热议一个话题:从安卓系统转到苹果手机,体验吃鸡游戏的新鲜感。这可不是...
    双系统d盘安装安卓,轻松实现手... 你有没有想过,在电脑上同时拥有Windows系统和安卓系统,是不是就像拥有了两个世界的大门呢?想象一...
    安卓系统后台运行程序,高效运行... 你有没有发现,手机里的安卓系统后台运行程序有时候就像那些调皮的小精灵,悄无声息地在你不知道的时候忙碌...
    苹果ipad如何改安卓系统,轻... 你有没有想过,把你的苹果iPad换成安卓系统,是不是会有一种全新的使用体验呢?想象那些你熟悉的安卓应...
    安卓隐藏系统状态栏,安卓隐藏系... 你有没有发现,手机屏幕下方那个小小的状态栏,有时候真的挺碍眼的?尤其是当你沉浸在游戏或者追剧的时候,...
    bb10系统安装安卓,轻松实现... 你有没有想过,把那老式的BB10系统升级成安卓,让它焕发第二春呢?想象你的老手机瞬间变成了一个功能强...
    安卓系统的安全怎样关,全面关机... 亲爱的安卓用户们,你是不是也和我一样,时不时会对安卓系统的安全性能感到一丝担忧呢?毕竟,谁都不想自己...
    屏蔽更新鸿蒙和安卓系统,探索未... 亲爱的读者们,你是否也像我一样,对手机系统更新有着一种复杂的情感呢?一边期待着新功能的到来,一边又担...
    deepin系统成为安卓版,开... 你知道吗?最近科技圈可是炸开了锅,因为Deepin系统竟然推出了安卓版!这可不是什么小打小闹,而是意...
    有安卓系统的手表吗,搭载安卓系... 你有没有想过,在手腕上戴一块既能看时间又能玩游戏的神奇小玩意儿?没错,我说的就是有安卓系统的手表!想...
    康佳电视安卓系统能改系统吗,解... 你家的康佳电视是不是也跟我的一样,时不时地闹个小脾气,让你想给它换个操作系统呢?别急,今天就来聊聊这...
    安卓系统怎么连凯迪拉克,智能驾... 你有没有想过,你的安卓手机和那辆酷炫的凯迪拉克之间也能来个亲密接触呢?没错,就是那种无缝连接的感觉,...
    安卓系统如何伪装成ios系统,... 你有没有想过,如果你的安卓手机突然变成了苹果的iOS系统,那会是怎样的场景呢?想象你手中的设备瞬间拥...
    安卓系统自带的屏幕录制,屏幕录... 亲爱的手机控们,你是否有过这样的时刻:想要记录下手机屏幕上的精彩瞬间,却又不知道如何操作?别担心,今...
    安卓系统更新后流畅度,体验升级... 你有没有发现,自从你的安卓手机更新了系统后,感觉好像变快了?没错,这就是今天我们要聊的话题——安卓系...
    神武3安卓跟苹果系统,安卓与苹... 你有没有发现,最近手机游戏界又掀起了一股热潮?没错,就是那款让人欲罢不能的神武3!不过,说到玩这款游...
    安卓手机双系统好处,安卓手机的... 你有没有想过,你的安卓手机其实可以拥有双重身份呢?没错,就是那个听起来就让人兴奋的“双系统”!今天,...
    咋录音软件推荐安卓系统,轻松捕... 你有没有想过,有时候想要记录下生活中的点点滴滴,或者制作一段属于自己的音乐作品,一款好用的录音软件可...
    安卓7.1系统好不好,体验升级... 你有没有听说安卓7.1系统最近在手机圈里可是火得一塌糊涂呢?这不,我就来给你好好捋一捋,看看这个系统...