简单的理解 react 虚拟 dom和 diff 算法

说明

• react 初学者
• 对 js 应用有一定的了解

虚拟 DOM

一般情况下我们这样去渲染 dom

• 应用--真实 dom

而在 react 当中使用虚拟 dom 作为过渡

• 应用--虚拟 dom--真实 dom

• 从上可以看出，在普通的 js 应用中用户是通过直接操作真实 dom 去改变应用的；
• 而在 react 当中，中间是对虚拟 dom 的操作，进而改变 state 和 props 的改变保存到虚拟 dom 上。
• 然后再渲染到真实 dom 上面

看下面一个 demo

• 在标准 dom 下面执行的操作

 let obj= document.getElementById('test');
 obj.style.color = "black";
 obj.style.color = "red";
 obj.style.color = "black";
复制代码

可以看到这里执行了三次 dom 操作

• 在 react 中，当然我们也在虚拟 dom 上执行了三次同样的操作，但是我们可以看到其实只改变了一个状态，
• 我们把这里 color 的状态保存下来，然后通过 state 或者 props 传给真实的 dom ，然后完成渲染就 ok 了。
• 可以看出其中节省了很多资源。

什么事 Diff 算法

• 简而言之就是对操作前后的 dom 树同一层的节点进行对比，一层一层对比

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

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

对比两种diff算法，大家可以发现，react的diff算法下，当dom节点更改时，会大大减少dom树的节点遍历，这也是其另外一个可以实现极速渲染的一个原因。