Skip to main content

虚拟dom

虚拟 dom

  • React 厉害的地方并不是说它比 DOM 快,而是说不管你数据怎么变化,我都可以以最小的代价来进行更新 DOM。 方法就是我在内存里面用新的数据刷新一个虚拟 DOM 树,然后新旧 DOM 进行比较,找出差异,再更新到 DOM 树上。

  • 框架的意义在于为你掩盖底层的 DOM 操作,让你用更声明式的方式来描述你的目的,从而让你的代码更容易维护。没有任何框架可以比纯手动的优化 DOM 操作更快,因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作,它的实现必须是普适的

  • 框架给你的保证是,你在不需要手动优化的情况下,我依然可以给你提供过得去的性能。

React 16 Diff 策略

React 现在将整体的数据结构改为了链表结构。所以相应的 Diff 算法也得改变,以为以前的 Diff 算法就是基于树的。

老的 Diff 算法提出了三个策略来保证整体界面构建的性能

  • tree diff Web UI 中 DOM 节点跨层级的移动操作特别少,可以忽略不计。
  • component diff 拥有相同类的两个组件将会生成相似的树形结构,拥有不同类的两个组件将会生成不同的树形结构。
  • element diff 对于同一层级的一组子节点,它们可以通过唯一 id 进行区分。

React 16 的 Diff 策略