React 中最吸引开发人员的就是虚拟 DOM和高效的 Diff 算法,优化了因为多次刷新页面带来的性能问题,开发人员也无需频繁操作DOM,从性能角度来说有很大的提升。
-
什么是虚拟 DOM Diff 算法?
在react中render执行的结果并不是真正的DOM节点,而是虚拟DOM,当页面发生变化时,需要通过Diff算法对比变化前后的虚拟DOM,从而更新视图。
虚拟DOM Diff算法逐层进行节点对比,且仅对比同级节点;同一层次的一组子节点通过唯一Id进行区分;两个相同组件差生类似的DOM结构,不同的组件产生不同的DOM结构。
-
虚拟 DOM Diff 算法分析
-
不同类型节点
对比同一父节点下的所有子节点时,发现节点不存在,直接删除该节点,该节点下的子节点也会被删除;发现又增加的新节点,会创建并添加新节点至相应位置。
例:如下图所示,我们需要作出这样的转换
转换过程如下:
D will unmount D is created C is updated A is updated D did mount B is updated R is updated
-
相同类型节点
-
类型相同,属性不同,直接重设属性
-
列表节点的比较
如下图所示,我们需要作出这样的转换
没有设置唯一的key值,转换过程如下:
C will unmount D will unmount D is created C is created D did mount C did mount A is updated R is updated
已设置唯一的key值,转换过程如下:
D is updated C is updated A is updated R is updated
-
-