Diff算法

Diff算法

尝试找到新旧VNode的最小改变量,diff的过程就是调用patch函数的过程,比较新旧节点,一边比较一边给真实DOM打补丁

比较方式

在采用diff算法比较新旧节点的时候,比较只会在同层级进行,不会跨层级比较

img

难点

假设一个个子节点,一个个子节点,如何判断这些子节点之间的匹配关系

image-20240317114429779

原则:尽可能让匹配之后的修改复杂度小(例如需要5个操作,而到只需要3个操作),算法复杂度不能太高

设计

比较重要的VNode属性:

export default class VNode {
  ......
  key: string | number | void,  // key值,被当作节点的标志,不同的key被认为一定是不同的节点
  tag: string | void,           // 标签名
}

Step.1:在匹配时,对首尾两侧的相同节点进行猜测和判断

Step.2:对于剩下的没匹配上的,按照key建立一个字典,再对没匹配上的,拿着自己的key在字典里面进行查询,做进一步匹配

Step.3:现在一定有全匹配上了,或者全匹配上了。如果还有没匹配的,删除;如果还有没匹配上的,添加