【面试题】当面试官让我回答React和Vue框架的区别(1)

最新推荐文章于 2024-06-15 14:41:39 发布

2401_84446787

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量783

点赞数 9

分类专栏：程序员文章标签： vue.js react.js javascript

本文链接：https://blog.csdn.net/2401_84446787/article/details/138363983

版权

程序员专栏收录该内容

161 篇文章 0 订阅

订阅专栏

两者对diff算法的优化基本上思路是相同的：

tag不同认为是不同节点
只比较同一层级，不跨级比较
同一层级的节点用key唯一标识，tag和key都相同则认为是同一节点

diff 算法源码实现相同之处

在处理老节点部分，都需要把节点处理 key - value 的 Map 数据结构，方便在往后的比对中可以快速通过节点的 key 取到对应的节点。同样在比对两个新老节点是否相同时，key 是否相同也是非常重要的判断标准。所以不同是 React, 还是 Vue，在写动态列表的时候，都需要设置一个唯一值 key，这样在 diff 算法处理的时候性能才最大化。

react和vue中虚拟DOM的差别

react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的操作。

按颗粒度分为tree diff, component diff, element diff. tree diff 比较同层级dom节点，进行增、删、移操作。如果遇到component，就会重新tree diff流程。

参考链接

dom的更新策略不同

react 会自顶向下全diff。vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。

在react中，当状态发生改变时，组件树就会自顶向下的全diff, 重新render页面，重新生成新的虚拟dom tree, 新旧dom tree进行比较，进行patch打补丁方式，局部更新dom。所以react为了避免父组件更新而引起不必要的子组件更新，可以在shouldComponentUpdate做逻辑判断，减少没必要的render，以及重新生成虚拟dom，做差量对比过程。

在vue中，通过Object.defineProperty 把 data 属性全部转为 getter/setter。同时watcher实例对象会在组件渲染时，将属性记录为dep, 当dep 项中的 setter被调用时，通知watch重新计算，使得关联组件更新。

Diff 算法借助元素的 Key 判断元素是新增、删除、修改，从而减少不必要的元素重渲染。

diff 算法源码实现不同之处

react的diff

声明newChildren就是即将更新的 JSX 对象

当newChildren类型为object、number、string，代表同级只有一个节点
- 检查上次更新时的fiber节点是否存在对应的DOM节点
  - 存在：DOM节点是否可以复用（通过tag和key进行判断）
    - 可以：将上次更新的fiber节点副本作为本次新生成的fiber节点并返回
    - 不可以：标记当前节点为待删除节点，新生成一个fiber节点并返回
  - 不存在：新生成一个fiber节点并返回
当newChildren类型为Array，同级有多个节点，会进行两次遍历：
- 第一层遍历:
  - 遍历newChildren，i = 0，将newChildren[i]与oldFiber比较，判断DOM节点是否可复用。
  - 如果可复用，i++，比较newChildren[i]与oldFiber.sibling是否可复用。可以复用则重复此步骤。
  - 如果不可复用，立即跳出整个遍历。
  - 如果newChildren遍历完或者oldFiber遍历完（即oldFiber.sibling === null），跳出遍历。
由上述，第一次遍历完可能存在以下2种情况: a. 若是因为"不可复"用导致的跳出遍历：newChildren没有遍历完，oldFiber也没有遍历完。 b. 若是因为"newChildren遍历完或者oldFiber遍历完"导致的跳出遍历：可能newChildren遍历完，或oldFiber遍历完，或他们同时遍历完。（带着第一轮遍历的结果去进行第二轮的遍历）
- 第二轮遍历：第二轮遍历的时候会将剩余未比较的老节点和剩余未比较的新节点进行遍历
  - newChildren没遍历完，oldFiber遍历完：遍历余下的newChildren依次进行插入
  - newChildren遍历完，oldFiber没遍历完：遍历剩下的oldFiber依次进行删除
  - newChildren与oldFiber都没遍历完：这意味着有节点在这次更新中改变了位置。
```
  - index： 新集合的遍历下标。
  - oldIndex：当前节点在老集合中的下标
  - maxIndex：在新集合访问过的节点中，其在老集合的最大下标**如果当前节点在新集合中的位置比老集合中的位置靠前的话，是不会影响后续节点操作的，这里这时候节点不用动**
```
  操作过程中只比较oldIndex和maxIndex，规则如下：
```
  - 当oldIndex>maxIndex时，将oldIndex的值赋值给maxIndex
  - 当oldIndex=maxIndex时，不操作
  - 当oldIndex<maxIndex时，将当前节点移动到index的位置diff过程如下：


  - 节点B：此时 maxIndex=0，oldIndex=1；满足 maxIndex< oldIndex，因此B节点不动，此时maxIndex= Math.max(oldIndex, maxIndex)，就是1
  - 节点A：此时maxIndex=1，oldIndex=0；不满足maxIndex< oldIndex，因此A节点进行移动操作，此时maxIndex= Math.max(oldIndex, maxIndex)，还是1
  - 节点D：此时maxIndex=1, oldIndex=3；满足maxIndex< oldIndex，因此D节点不动，此时maxIndex= Math.max(oldIndex, maxIndex)，就是3
  - 节点C：此时maxIndex=3，oldIndex=2；不满足maxIndex< oldIndex，因此C节点进行移动操作，当前已经比较完了 当ABCD节点比较完成后，diff过程还没完，还会整体遍历老集合中节点，看有没有没用到的节点，有的话，就删除
```

更详细的diff参考这里

vue的diff

patch函数会接受两个参数：oldVnode 和 vnode，其分别指旧的vnode和新的vnode

只有新节点
- createElm 创建新的节点
只有旧节点
- 删除旧节点
新旧节点都存在：通过 sameVnode 判断节点是否一样：
- 一样：直接调用 patchVnode 去处理这两个节点
  - Vnode 是文本节点，则更新文本（文本节点不存在子节点）
    - 当新Vnode.text 存在，而且和旧 VNode.text 不一样时，直接更新这个 DOM 的文本内容
    - 新Vnode 的 text 为空，直接把文本DOM 赋值给空
  - Vnode 有子节点，则处理比较更新子节点
    - 新旧节点都有子节点，而且不一样，那就执行updateChildren
      - updateChildren 维持新旧节点首尾的四个指针进行遍历对比，遵循的原则是：能不移动，尽量不移动。不行就移动，实在不行就新建
    - 只有新子节点：执行创建
    - 只有旧子节点：执行删除
- 不一样：直接创建新节点，删除旧节点

为什么react不使用双指针提升比较效率

react在源码中注释道：React 不能通过双端对比进行 Diff 算法优化是因为目前 Fiber 上没有设置反向链表，而且想知道就目前这种方案能持续多久，如果目前这种模式不理想的话，那么也可以增加双端对比算法。

也就是说虽然更新的JSX对象即newChildren为数组形式，但是和newChildren中每个值进行比较的是上次更新的Fiber节点，Fiber节点的同级节点是由sibling指针链接形成的链表。

即 newChildren[0]与oldFiber比较，newChildren[1]与oldFiber.sibling比较。

单链表无法使用双指针，所以无法对算法使用双指针优化。

基于以上原因，Diff算法的整体逻辑会经历两轮遍历：

第一轮遍历：处理更新的节点。
第二轮遍历：处理剩下的不属于更新的节点（新增、删除、移动）。

总结

Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。

3.数据驱动视图

数据驱动视图：就是数据变化的时候，相应的视图会得到更新。开发者只需要关注数据的变化而不用再去手动的操作DOM。

vue中的数据驱动视图

Vuejs的数据驱动是通过MVVM这种框架来实现的。MVVM框架主要包含3个部分:model、view和 viewModel。

Model:指的是数据部分，对应到前端就是javascript对象
View:指的是视图部分，对应前端就是dom
ViewModel:就是连接视图与数据的中间件

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

就是连接视图与数据的中间件

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84446787

关注

9
点赞
踩
21

收藏

觉得还不错? 一键收藏
2
评论
【面试题】当面试官让我回答React和Vue框架的区别(1)

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就是连接视图与数据的中间件技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
复制链接

扫一扫