【Diff算法图解】带你探索React、Vue2.x的Diff算法

本文介绍了React和Vue2.x的Diff算法,详细阐述了Virtual DOM的概念,以及React和Vue在比较新旧节点时如何高效地更新DOM。重点讨论了React的单端比较和Vue2.x的双端比较策略,包括移动、增加、移除节点的处理,并分析了React Diff的局限性和Vue2.X Diff的优化之处。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


前言

我们都知道,在框架中,当dom节点发生变化时,并不会去改变所有的dom结构,而是对应的改变其中需要改变的部分。那我们思考一下,这里面的原理是什么呢?

在看文章之前,我们先来了解一下虚拟dom,然后慢慢分析,找到其中的奥妙!

一、Virtual DOM(虚拟dom)

Virtual DOM 其实就是一棵以 JavaScript 对象(VNode 节点)作为基础的树,用对象属性来描述节点,相当于在js和真实dom中间加来一个缓存。

我们需要对比虚拟dom和真实dom之间的差异,来进行响应的更新。

实现步骤可如下(以Vue为例):

  1. 用JavaScript对象结构表述dom树的结构,然后用这个树构建一个真正的dom树,插到浏览器的页面中。
  2. 当状态改变了,也就是我们的state做出修改,vue便会重新构造一棵树的对象树,然后用这个新构建出来的树旧树进行对比(只进行同层对比),记录两棵树之间的差异
  3. 把2记录的差异在重新应用到步骤1所构建的真正的dom树,视图就更新了。

这个时候我们应该就有疑问了,上面说要进行同层对比,应该怎么去进行对比呢?难道是暴力法一个个比吗?(开发者肯定不会这么傻)

没错!方法就是我们今天要谈的diff算法,下面开始进入正题!

我们在探索之前,首先来看一看diff算法的基本思路:

  • 只比较同一级,不跨级比较
  • tag不相同,直接删掉重建,不再深度比较
  • tag和key,两者都相同,则认为是相同节点,不在深度比较

diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁

patch: 可以简单的理解为给当前DOM节点进行更新,并且调用diff算法对比自身的子节点;

key:Vnode的唯一标识符(确保节点唯一性),来辨别节点是否相同。

二、React Diff

实现思想

思路:递增法,通过判断新节点的位置是否是递增的。由此来判断节点是否需要改变。
在这里插入图片描述
我们来观察这个图,很明显prevList的结点索引为0-1-2-3,而nextList的节点索引也是0-1

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值