概览
文章内容选自极客时间 ebay 技术专家王沛的《 React 实战进阶》第 5 讲，本文的主题是 理解 Virtual DOM 及 key 属性的作用。
小结
1 算法复杂度为 O(n)；
2 虚拟 DOM 如何计算 diff；
2 key 属性的作用。
内容
1 Virtual DOM 与 React 组件的联系：
JSX 的运行基础
2 diff 时机
调用 render() 产生新的 Virtual DOM 后
3 diff 的原理
策略：广度优先分层比较 ，从 根节点 开始，
diff 处理：不同的变化，不同的处理
（1）属性变化及顺序
如图：
image.png
处理：借助标识（key）,交换顺序
（2）节点类型
如图：
image.png
处理：直接删除原有节点，创建新节点，不管旧节点是否还会用到
（3）节点跨层移动
如图：
image.png
处理：在 old 层删除原有节点，在 new 层创建新节点
总结：删除节点时，不考虑节点后续是否会用到，存在一定的性能问题
原因：UI发生变化时，很少发生节点的跨层移动，一般来说归结为：属性变化、顺序变化、类型变化
