1. diff算法是什么?
diff算法是虚拟DOM中采用的算法。
把树形结构按照层级分解,只比较同级元素。不同层级的节点只有创建和删除操作。给列表结构的每个单元添加唯一的key属性,方便比较。
相关信息:
React只会匹配相同class的component。合并操作,调用component 的 setState 方法的时候,React将其标记为dirty。
到每一个事件循环结束,React 检查所有标记 dirty 的 component 重新绘制。选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
2. Diff算法
Diff算法的作用是用来计算出 Virtual DOM 中被改变的部分,然后针对该部分进行原生DOM操作,而不用重新渲染整个页面。 Diff算法有三大策略:
三种策略的执行顺序也是顺序依次执行。 Tree Diff 是对树每一层进行遍历,找出不同,如图1所示。
Component Diff 是数据层面的差异比较
Element Diff 真实DOM渲染,结构差异的比较
首先进行第一层比较,第一层都是R,不发生变化;然后进入第二层Component Diff,发现A组件没有,则删除A及其子组件B、C;最后比较第三层,创建A及其子组件B、C。
当节点处于同一层级时,Diff提供三种DOM操作: 删除 、 移动 、 插入 。
如图2所示,首先将OldVnode 和 NewVnode的首尾位置分别标记为oldS、oldE、newS、newE。
(1) oldS和newS相同,不发生变化,oldS++,newS++。
(2) newS与OldVnode不匹配,oldS前面插入f,newS++。
(3) newS与oldE相同,oldE移动到oldS前面,newS++,oldE--。
(4) newE与oldE相同,不发生变化,newE--,oldE--。
(5) 都不相同,oldS前插入newE,删除oldS,oldS++,newS++,newE--,oldE--。
(6) oldS > oldE,Diff结束,最后结果为:a、f、d、e、c。
最后附上核心源码分析: patch
这个函数做了以下事情:
updateChildren
上一篇 虚拟DOM : https://www.jianshu.com/p/580157c93c53