简谈react中的虚拟DOM

相信你在看到此篇前也翻阅大量的对DOM的文章讲解和介绍 react中的虚拟DOM

此篇我尽量说人话（大白话），不然想必你在看到别的大神的文章早就懂了。

不说废话了，上干货。

1、首先简单对Html中的DOM和react中的虚拟DOM讲解。

Html中的DOM是什么？我简短概括下：DOM是HTML中每一个节点的元素或者是表现被外面的 html 套着。这样的结构很像计算机里的文件夹。例如，“我的电脑”是最外层，里面套着 C、D、E、F 盘，每个盘里又有很多文件夹，文件夹里又有文件夹，逐个打开后才能看到具体的文件。

而react的虚拟DOM：说准确来讲他就是一个js对象是一个复杂的js的js对象，随着对前端知识学习的深入，我们会发现 JavaScript 操纵 DOM 是非常普遍的事情。就比如很多网页一开始加载出来的只是个普通的框架架子，只显示出一个 loading 图标的转圈动画，只有等 JavaScript 从服务器上请求到真正的数据后操纵 DOM 来显示数据，才能看到内容，这就是典型的异步加载。

也可能你早就听过Html中的DOM和react中的虚拟DOM和和直接去操作真实的DOM往往比js中的虚拟DOM还要麻烦和繁琐。一个网页往往很复杂，浏览器构造出来的 DOM 树往往很庞大，有的甚至有几千个节点。在这么庞大的一棵树上频繁地改动，对浏览器（尤其是移动浏览器）来说是不小的工作量，稍不注意就会出现卡顿。
于是，有人发明了一种便捷的方法，叫作虚拟 DOM。

简单来说（人话），就是用 JavaScript 模拟了一棵简单的 DOM 树，然后在这上面演练（模拟一个虚拟的js对象）所有的 DOM 操作，等时机成熟时（js数据的增删改）再把虚拟 DOM树和真正的浏览器的 DOM 树做对比，算出差异，一次性地改变真正的 DOM 树。

这两个步骤从整体上大大提高了 JavaScript 操纵 DOM 树的效率。