react diff

传统diff

通过循环递归对节点的依次对比,复杂度是O(n3)

react diff

react对传统diff进行了优化,将复杂度降为O(n)

react基于这几个前提对diff进行了优化:

  • 忽略跨层级操作,因为DOM节点跨层级操作很少。
  • 不同类的组件,则会生成不同的树形结构,相同类的组件,会生成相似的树形结构。
  • 对同一层级的一组子节点,可以通过唯一key进行区分。

1 tree diff

只会对相同层级的DOM节点进行比较,只需要一次遍历,便可以完成整棵树的遍历。如果节点不存在,则该节点及其子节点都会被删掉,对于不同层级的节点,只有创建和删除操作。

2 component diff

  • 针对同类型组件,按照tree diff策略对比。如果开发人员确切知道virtual DOM没有变化,react提供的shouldComponentUpdate()方法可以直接省去tree diff。
  • 针对不同类型组件,则直接判断该组件为dirty component,从而替换整个组件下的所有子节点。

3 element diff

当节点处于同一层级,可能除夕只需要对这些节点进行移动,不需要每次都删除创建,react剔除添加唯一key来区分。react通过判断key是否存在相同节点,如果存在,再进行判断进行移动操作。不存在再进行相应的创建删除。

与vue的diff区别

  • 判断2个节点是否相同:vue认为className不一样,就不同,react则认为相同,只是属性不同,只需要更新其属性。
  • 同一层级对比:Vue从两端至中间对比,react从左至右对比。react策略存在短板,如果一个集合只吧最后一个移到第一个,react会移动前面所有节点,vue只移动最后一个节点到最前面。
posted @ 2019-07-03 21:27  迪迪的博客  阅读(...)  评论(...编辑  收藏