React,Vue2和Vue3在原理等内容上的异同

一,在diff算法上的异同

相同点:
1.虚拟DOM在比较时只比较同一层级节点,复杂度都为 O(n),降低了算法复杂度。
2.都使用key比较是否是相同节点,都是为了尽可能的复用节点。
3.都是操作虚拟DOM,最小化操作真实DOM,提高性能(其实虚拟DOM的优势 并不是在于它操作DOM快)。
4.都是不要用 index作为 key。

不同点:
1.diff算法遍历节点方向:
React的是仅向右移动,Vue2的是双端向中间移动,Vue3的是在Vue2的基础上增加最长递增子序列的算法优化。

2.diff算法比较变量:
vue维护四个变量:

oldStartIdx => 旧头索引
oldEndIdx => 旧尾索引
newStartIdx => 新头索引
newEndIdx => 新尾索引

两边方向同时比较,由新的位置来获取真实DOM;如果老的先走完,就添加;如果新的先走完,就删除
react维护三个变量:

1.nextIndex => 遍历nextChildren时候的index,每遍历一个元素加1 (遍历新节点)
2.lastPlacedIndex => 上一次从prevChildren中取出来元素时,这个元素在prevChildren中的index(新节点对应)
3.oldIndex => 元素在数组中的位置(旧节点对应的位置)

节点移动前提是:oldIndex < lastPlacedIndex

移动的原则:
首个节点(指的是新节点)不执行移动操作(除非它要被移除),以该节点为原点,其它节点都去寻找自己的新位置;
将原来的元素往右移,通过lastIndex来控制。在lastIndex左边的,就往lastIndex右边移动;在lastIndex右边的,就不需要动。

nextIndex : 往右遍历,逐渐+1
oldIndex:根据nextIndex在旧结点中寻找对应的元素,如果能找到比较oldIndex和lastPlacedIndex,否则添加
lastPlacedIndex:可以理解为是一个比较指引,当发生移动的时候lastPlacedIndex值保持上一次比较值,不做移动使用oldIndex值
oldIndex = 4 > lastPlacedIndex 不做操作,且 lastPlacedIndex = oldIndex = 4
oldIndex = 0 < lastPlacedIndex 移动, lastPlacedIndex保持不变

3.diff算法比对方式:
React只比较节点类型和key,Vue比较节点类型和key,还有属性

你可能感兴趣的