react虚拟dom机制与diff算法

React的一个突出特色是拥有极速地渲染性能。该功能依靠的就是facebook研发团队弄出的虚拟dom机制以及其独特的diff算法。下面简单解释一下react虚拟dom机制和diff算法的实现思想：

要讲虚拟dom机制必须提到一个概念——虚拟dom树，这是react在真实dom树基础上创建的一个抽象的树，应用、虚拟dom与真实dom的关系以下图显示：

而标准的dom机制以下图所示：

对比两个图就能够发现标准dom机制下，用户在应用上的操做是直接对真实dom进行操做的，而在react应用中，用户在应用中对dom的操做实际上是对虚拟dom的操做，用户的操做产生的数据改变或者state变量改变（此处的改变具体的讲就是事件函数对dom的操做）都会保存到虚拟dom上，以后再批量的对这些更改进行diff算法计算，对比操做先后的虚拟dom树，把更改后的变化再同步到真实dom上。举个例子：
标准dom机制下对某一节点在事件函数中作以下操做：

var A=document.getElementById('test');
 A.style.backgroundColor = "black";
 A.style.backgroundColor = "red";
 A.style.backgroundColor = "black";

如上所示，在标准dom机制下，会对A节点进行三次的dom操做。
而在react应用的事件函数中进行如上操做时，一样会在虚拟dom上进行三次dom的操做，但在真实dom中，它只会执行一次dom操做，即A.style.backgroundColor = "black";由于在react虚拟dom机制中，它会把全部的操做都会合并，只会对比刚开始的状态和最后操做的状态，二者中找出不一样再同步到真实dom中，这就大大减小了真实dom的操做，而众所周知，dom操做是很耗性能的，这是react能作到极速渲染的缘由之一。

另一个缘由就是react独特的diff算法，一样给出标准diff算法和react diff算法的描述，对比了就会明白了：
首先讲一下diff算法的处理方法，对操做先后的dom树同一层的节点进行对比，一层一层对比，以下图：

在标准dom机制下：在同一位置对比先后的dom节点，发现节点改变了，会继续比较该节点的子节点，一层层对比，找到不一样的节点，而后更新节点。

在react的diff算法下，在同一位置对比先后dom节点,只要发现不一样，就会删除操做前的domm节点（包括其子节点），替换为操做后的dom节点。

对比两种diff算法，你们能够发现，react的diff算法下，当dom节点更改时，会大大减小dom树的节点遍历，这也是其另一个能够实现极速渲染的一个缘由。

欢迎朋友们交流！嗷呜~