react中的虚拟DOM
数据驱动原理
用虚拟DOM：
·1. state数据
·2. JSX模板
·3. 数据 + 模板相结合，生成虚拟DOM（虚拟DOM就是一个js对象，用它来描述真实的DOM）['div', {id: 'abc'}, ['span', {}, 'hello']]（损耗了极小的性能）
·4.用虚拟DOM的结构生成真实的DOM<div id = 'abc'><span>hello</span></div>
·5. state 发生变化
·6. 数据 + 模板 生成新的虚拟DOM （极大地提升了性能）['div', {id: 'abc'}, ['span', {}, 'bye']]
·7. 比较原始虚拟DOM和新的虚拟DOM的区别，找出区别是span中的内容
·8. 直接操作DOM，改变span中的内容
使用虚拟DOM完成数据驱动涉及到关键的一点就是如何比较两个虚拟DOM的差异
- 同层比对，列表使用不同的key值
- 用虚拟DOM完成数据驱动涉及到关键的一点就是如何比较两个虚拟DOM的差异
-
同级比较
diff算法中只会比较同级的元素，一旦发现某一级有所不同，则会把其子级丢弃，直接用新的差异的以及以及其下的所有自己替换。这也做的好处就是算法简单，也就提高了比对速度，因此也提升了性能 -
引用key值
for循环中需要给每个item增加一个key值，是因为当进行虚拟DOM比对时，我们需要比较出相同的元素和不同的，需要做两层循环比较，用上了key值则我们可以清楚比较出哪一个新增或删除了什么
注意：需要注意的是在开发中有些人习惯使用index做key值，如果我们创建了a、b、c三个item，key值分别定义为其index：0、1、2
当我们删除了a，则b、c 、key值变为了0、1，则每一项之间无法根据key值对应起来了因此建议是用稳定的值作为key值，比如id