Virtual-Dom算法

React的virtual Dom

React组件挂载：JSX/TSX ==>JavaScript对象==>真实DOM

无论是.jsx还是.tsx，都是先把组件中的render()方法返回的Html标签结构转化成JavaScript对象，生成
一个虚拟的DOM树，然后经历一系列的逻辑操作后，使用ReactDOM.render()（import * as ReactDOM from 'react-dom'）方法将虚拟的DOM转化为真实的DOM树。

应用Virtual DOM算法的几个步骤：

1. 用JavaScript对象结构表示DOM树的结构，然后用这个树构建一个真正的DOM树，并插入到文档中。
2. 当状态变更的时候，重新构造一棵新的对象树（新的JavaScript树）。然后用新的树和旧的树进行比较，比较两棵树的差异
3. 把比较后的得到的差异应用到之前构造的真正的DOM树上，这样视图就更新了。

创建virtual Dom的目的：

相对于直接操作页面的DOM，直接操作JavaScript对象（虚拟Dom树）处理起来更快，而且更简单。

通过对比缓存在内存中的新旧JavaScript对象树，我们可以获取到先后的差异，这样我么就可以针对这个明确的差异去修改对应的真实DOM结构，而不需要整体或者频繁的去改动真实的DOM结构。

比较两棵虚拟DOM树的差异（DIFF算法）

具体的Diff算法原理不在此讨论

DOM树的差异体现在对其操作上：

1. 替换掉原来的节点，div ==> span
2. 移动、删除、新增子节点
3. 修改节点的属性，比如修改ClassName
4. 对文本节点的文本内容修改

为什么要给节点添加唯一标识key:

进行react开发的时候，我们经常会在控制台看到未添加标识符key的警告。虽然大部分情况下，忽略该警告程序依旧可以正常运行。但是给每个节点添加一个唯一的key，则会在程序代码运行性能上提高很多。需要说明的是这个key不是给开发者使用的，是给react应用Virtual-Dom Diff算法时应用的。

针对列表节点的比较:

同一层节点中插入某个节点，比如在ABCDE五个节点中插入一个F节点使其变为ABCFDE。如果没有给每个节点绑定唯一的标识符key，那么更新过程则是将D变成F、E变成D、最后再新增一个E。可以看到，React会逐个对节点进行更新，转换到目标节点，最后插入新增的节点，这里面涉及到的DOM操作非常多。而如果给每个节点绑定一个唯一的标识符key，那么React就能够找到正确的位置去插入新的节点。

同一层次的节点顺序调换，如果没有提供key，那么这里的节点顺序调整则是一个完全删除然后重建的过程。如果提供了key，那么React就能直接定位到正确的节点，从而进行顺序的调换及更新。

上面涉及到有无key的组件变化情况，可以通过组件进入不同的生命周期观察到。这也表明组件的生命周期与Virtual-Dom Diff算法是联系在一起的。

References

• 如何实现一个Virtual Dom算法
• React DOM Diff算法解析