react虚拟DOM 中的 diff 算法

1. 定义 state,有了数据
2. 有一个模板
3. 数据 + 模板生成虚拟 DOM(虚拟 DOM 就是一个 js对象, 用它来描述真实 DOM)
4. 用虚拟 DOM 的结构生成真实的 DOM, 来显示
5. state 发生变化
6. 数据 + 模板 生成新的虚拟 DOM (极大地提升性能)
7. 比较原始虚拟 dom和原始虚拟 dom的区别, 找到区别是 span 中内容
8. 直接操作 DOM, 改变 span 中的内容

那第七步是如何比对的, 采用的就是 diff 算法.

什么时候会被比对? :
当数据发生改变的时候, 虚拟 DOM 才会做新的比对
那么什么时候数据发生改变?
要么改变了 state, 要么改变 props, 其实 props 发生改变也是父组件的 state 发生改变, 所以归根结底其实都是调用 setState 的时候数据发生变化, 虚拟 dom 才进行比对.

那么再说一下 setState,
为什么它是异步的, 是为了提升底层性能. 多次 setState 变更成 1 次, 节省性能上的耗费

左侧是个虚拟 dom, 数据发生改变时, 右侧生成一个新的虚拟 DOM, 进行同层比对, 比较最上面第一层看差异, 如果一致, 到下一层, 发现不一致, react 就不会往下比了. 于是把原始页面上的虚拟 DOM 对应下面所有的节点 dom都删除, 重新生成一遍节点下的所有 dom, 用重新生成的替换原始页面上的 dom, 也就是只比对一层虚拟 DOM.

这么做性能上其实让一部分节点无法复用, 虽然造成渲染浪费, 但是这种比对的好处是比对的算法简单, 只需要一层层对比, 对比速度快. 减少了比对算法上的性能消耗.

---

为什么需要 key 值
如果 key 值一旦是 index 的话, 就无法保证在原始的虚拟 dom树上的 key 值和新虚拟 dom 树上的 key 值一致.
所以为了稳定和性能