虚拟DOM

虚拟DOM

概念：真实DOM树的抽象，本质是一个js对象，包含tag,props以及children属性

优点

1.减少DOM操作次数。将多次操作合并为一次操作。比如向页面上添加1000个节点，需要操作1000次。而虚拟DOM只需操作一次
2.减少DOM操作范围。
3.跨平台。因为虚拟DOM本质是一个js对象

缺点

需要额外创建函数，如createElement或h

diff算法

1.将两颗树逐层对比，找出需要更新的节点
2.先看标签名(tag)。标签名不同直接替换
3.再看属性(props)。属性不同直接替换
4.再往下找children，先看标签，再看属性，以此类推

diff算法中的key

在虚拟DOM中，模拟的是真实的树，假设在一个节点上由三个子结点A，B，C。用索引index当作key
1.删掉了B(index=1)，此时留下的是A(index=0)，C(index=2)
2.因为0、1、2在真实DOM中是一个伪数组。此时删掉了一个元素数组长度由3减小到2,最大索引由2变成了1
3.最终剩下的节点就是index为0和1的节点，最终剩下的就是A(index=0)和B(index=0)
4.本来打算删除B,但是把index当作key，由于index是变化的，而每个key与节点又是一一对应的
diff算法中的key是节点的唯一标识，每个节点都有自己的标识，key不要使用index，因为index是会变化的，我们需要保持key值与节点一一对应
一句话总结：最终剩下的key是啥，剩下的节点就是剩下的key所对应的