虚拟DOM是React用来优化与浏览器交互的一种技术。
在React出现之前，许多现有的框架都是在每次变化时直接操作DOM的。
首先，什么是DOM？
DOM*（文档对象模型*）是一个页面的树状表示，从<html> 标签开始，一直到每一个子节点，这些节点被称为节点。
它保存在浏览器的内存中，与你在页面中看到的内容直接相关。 DOM有一个API，你可以用来遍历它，访问每一个节点，过滤它们，修改它们。
如果你没有使用jQuery和朋友们提供的抽象API，那么这个API就是你可能已经看到过很多次的熟悉的语法。
document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()
React为React的渲染保留了一个DOM的副本：虚拟DOM。
虚拟DOM的解释
每次DOM发生变化时，浏览器都要做两个密集的操作：重绘（对一个元素的视觉或内容的改变，不影响相对于其他元素的布局和定位）和回流（重新计算页面的一部分布局--或整个页面的布局）。
React使用虚拟DOM来帮助浏览器在需要对页面进行修改时使用更少的资源。
当你在一个组件上调用setState() ，指定一个与之前不同的状态时，React将该组件标记为脏。这很关键。React只在一个Component明确地改变状态时才会更新。
接下来发生的事情是。
- React相对于被标记为dirty的组件更新虚拟DOM（有一些额外的检查，比如触发
shouldComponentUpdate()）。 - 运行differing算法来协调这些变化
- 更新真正的DOM
为什么虚拟DOM会有帮助：批处理
最关键的是，React将许多变化分批进行，并对真实DOM进行唯一的更新，通过同时改变所有需要改变的元素，所以浏览器必须执行的重绘和回流以呈现这些变化，只需执行一次。
