概览

文章内容选自极客时间 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发生变化时，很少发生节点的跨层移动，一般来说归结为：属性变化、顺序变化、类型变化