为什么会写出这篇文章呢？
可能的起因是以前学习框架的时候只学语法和原理不明确，被问到应用框架有什么益处也答复不上来，正是因为这种状况，所以明天要来探讨一下Virtual DOM的作用原理。
在理解Virtual DOM之前什么是DOM吧！
DOM是什么？
文件模型（Document Object Model,DOM） HTML、XML 和 SVG 文件的程序介面。它提供了文件（树）的程序的文件示意办法，并定义了拜访并扭转文件架构、格调和内容的办法。（摘取自MDN的局部阐明）
由下图能够晓得DOM是树状构造从文档根结点向下延长，上面附丽了很多节点
援用MDN的图纸
咱们常常利用js来操作DOM更新浏览器在更新触发画面的从新申明，当回流工夫以及回流（重）这两个更新机制。
重绘
画面元素更换款式的时候就触发（background-color、color…）
回流
更改画面的操作构造（构造排列）触发（更改视窗大小，css属性：position、width、height…）
很简略，这是一个很失常的运行起因，它是一个十分重要的播放器就能够只更新须要异动的局部。
Virtual DOM的流程
1、什么货色应用setState()办法的时候，React 会先复制一个dom（即为Virtual DOM ）
2、的扭转时，会比对先前的虚构 DOM 和以后的虚构 DOM 区别，当从新口头组件的不同状态
3、Virtual DOM 先用的演算法（diff算出理论的局部，比对之后的不同，再动实在的DOM，无效缩小本人的呈现），去进步须要更新的成果。
个别这是的html构造
<div id="header"> <h1 class="title">苹果</h1> <p class="content">柠檬</p> </div>这是Virtual DOM的构造，是JavaScript模仿进去的物件，会以上面的格局储存起来
{ tag: "div", props: { id: "header" }, children: [ { tag: "h1", props: { className: "title" }, children: ["Apple"] }, { tag: "p", props: { className: "content" }, children: ["lemon"] } ]}上面咱们简略模仿一下虚构dom的流程
- createELement :先应用Virtual DOM提供的createELement办法來生成真是DOM
var count = 0;var tree = render(count);var rootNode = createElement(tree);document.body.appendChild(rootNode);2、当count变动时 Virtual DOM进行比照 再将差别patch到实在的DOM
count++var newTree = render(count);var patches = diff(tree, newTree);rootNode = patch(rootNode, patches);tree = newTree;什么是patch？patch指的是在原有的DOM构造上做异动
对于diff算法
图片起源https://www.cronj.com/blog/di...
传统的diff演算法复杂度为O(n³) 解决100个节点对100万次的比值，Virtual DOM的diff演算算法为O(n)与传统的差异化预测下：
1、Virtual DOM比拟雷同层级的节点
2、同一层的同一节点再次出现一个惟一的要害，就是防止挪动被再次创立。
3、如果发现不见了其子节点也会一并打消，不会再做比对 开发者只有在数据逻辑上运行一次更新机制全副主动解决。
对于diff算法的具体了解，能够继续关注更新。