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算法的几个步骤：
- 用JavaScript对象结构表示DOM树的结构，然后用这个树构建一个真正的DOM树，并插入到文档中。
- 当状态变更的时候，重新构造一棵新的对象树（新的JavaScript树）。然后用新的树和旧的树进行比较，比较两棵树的差异
- 把比较后的得到的差异应用到之前构造的真正的DOM树上，这样视图就更新了。
创建virtual Dom的目的：
相对于直接操作页面的DOM，直接操作JavaScript对象（虚拟Dom树）处理起来更快，而且更简单。
通过对比缓存在内存中的新旧JavaScript对象树，我们可以获取到先后的差异，这样我么就可以针对这个明确的差异去修改对应的真实DOM结构，而不需要整体或者频繁的去改动真实的DOM结构。
比较两棵虚拟DOM树的差异（DIFF算法）
具体的Diff算法原理不在此讨论
DOM树的差异体现在对其操作上：
- 替换掉原来的节点，
div==>span - 移动、删除、新增子节点
- 修改节点的属性，比如修改
ClassName - 对文本节点的文本内容修改
为什么要给节点添加唯一标识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
