虚拟DOM和react中的diff算法总结

时间:2022-08-20 14:17:00
一、虚拟DOM
1.什么是虚拟DOM及原理
       把真实DOM树,变成js对象树,将之前的和新的作比较,通过diff算法,按照不同的地方进行渲染。
 
2.什么情况下使用虚拟DOM
      当修改组件内部状态时,如props或state发生改变。
 
二、diff算法
 
1.使用传统的diff算法进行节点的循环遍历,复杂度是 O(n^3)。
 
2.diff
     是逐层比较的算法,一旦发现节点消失,就删除,一旦发现新节点,就创建,发现相同的,就保留。
3.缺点:
     (1)两棵树变化非常陡峭,是低效的。
     (2)兄弟节点排序和插入新节点是低效的。
 
 
4.diff的两个重要假设,如下图:
      第二个假设是通过加key值来来区别兄弟节点。key不能使用index值,在插入数据时会产生新的问题,因为标识的index对应的值会发生变化。但是可以给index加“”,避免产生混淆。但最好使用id值。
同层key值不能相等,不同层没有影响。
虚拟DOM和react中的diff算法总结
5.diff算法
(1)同层级的比较
    有3种方式,删除、移动和添加。
 
(2)跨层移动:
        只进行同层级的比较,如果不同层级,不进行比较。如果进行跨层移动的话,它直接将移除地方的节点删除掉,移入地方添加新的节点,而不是进行移动。这样只需进行一次比较。这样就将复杂度降低为O(n),但不建议跨层移动。
虚拟DOM和react中的diff算法总结
(3)不同组件:
        react是基于组件的,同组件比较用虚拟DOM,不同组件直接删除掉,重新渲染。当出现如下情况是,跨层级,react自动认为不是同一个组建,删点重构所有子组件。如下图,直接把D及其子节点,换成G及其子节点。
       下图的D和G虽然结构相似,但是react断定不是同一类型的组件,虽然这样很耗费性能,但这种情况在react里很少踹出现。
 
 
虚拟DOM和react中的diff算法总结