React-为什么要使用虚拟DOM_为什么react不直接操作真实dom而是去操作虚拟dom?

什么是虚拟DOM（Virtual DOM）

首先，解释下虚拟DOM。虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一一对应。虚拟DOM的工作原理是：数据 -> 全新的虚拟DOM -> 与上一个状态的虚拟DOM进行diff算法比较，得到一个Patch -> 把这个Patch打到浏览器的DOM上。所以虚拟DOM叫的挺高端，其实就有点类似DocumentFragment，把多次DOM操作做一个批处理。于是，有一件很有意思的事情，如果你手动在DOM里删除一些节点，使得虚拟DOM与真实DOM不能一一对应了，再改变state重新render页面，页面就乱了。

diff算法

其次，想分享下diff算法。前两天看司徒正美推销他的Avalon，也分析了下React，说了一句话，现在前端框架比的是算法。diff算法说白了就是比较两个文件不同的算法。一般diff算法的复杂度是O(n3)。Facebook工程师根据前端页面特点做了两个假设（如果你好奇是什么假设这么神奇，可以来问我），把比较前后两个状态虚拟DOM的diff算法的复杂度降到了O(n)。这个diff算法分为三部分，我用三句话总结：
1. 虚拟DOM树同一位置不同类型（标签不同）的节点：删除前一状态节点，插入后一状态节点，哪怕节点有子节点也这样做；
2. 虚拟DOM树同一位置相同类型但个别属性不同的节点，对前一状态节点进行属性重设；
3. 列表节点（就是我们用循环创建的类似Array的节点），如果没有unique key（没有控制台会报警告