3Virtual DOM

什么是 Virtual DOM？

用JS来描述真实的DOM节点

为什么 Virtual DOM 比原生 DOM 快？

DOM是一个多叉树结构，完整比较两棵树差异需要的时间复杂度是O(n^3)。React进行算法优化，设定策略，只对比同层的节点，而不是跨层级比对，分为两步：

• 首先从上至下，从左往右遍历对象，也就是树的深度遍历，这一步中会给每个节点添加索引，便于最后渲染差异
• 一旦节点有子元素，就去判断子元素是否有不同

1. tagName组件名不同，直接删旧创新
2. 节点相同对比 style props
3. 看是否有子节点
4. 列表中绑定一个唯一的key值

对比差异，局部更新

当然了 Virtual DOM 提高性能是其中一个优势，其实最大的优势还是在于：

• 将 Virtual DOM 作为一个兼容层，让我们还能对接非 Web 端的系统，实现跨端开发。
• 同样的，通过 Virtual DOM 我们可以渲染到其他的平台，比如实现 SSR、同构渲染等等。 实现组件的高度抽象化