虚拟DOM和diff

讲虚拟DOM机制之前,必须提到一个概念,虚拟DOM树,这是react在真实dom树基础上建立的一个抽象的树。应用、虚拟DOM与真实DOM的关系如下图显示:
image

标准的dom机制如下:


image

标准dom机制下,用户在对应用操作的时候是直接对真实的dom进行操作。
在react中,用户对dom操作是对虚拟dom的操作,用户操作产生的数据改变或者state变量改变(事件函数对dom的操作),都会保存到虚拟dom上,之后在批量的对这些更改进行diff算法计算。

diff算法

image

处理方法: 对操作前后的dom树同一层的节点进行对比,一层一层对比。

在标准dom机制下:同一位置对比前后的dom节点,发现节点改变了,会继续比较节点的子节点,一层层对比,找到不同的节点,然后更新节点。

在react的diff算法下,同一位置对比前后dom节点,只要dom节点更改时,就会删除操作前的dom节点(包括子节点),替换为操作后的dom节点。

当dom节点更改是,会大大减少dom树的节点遍历,可以实现快速渲染。

推荐阅读更多精彩内容