欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react diff

程序员文章站 2022-06-27 21:46:37
传统diff 通过循环递归对节点的依次对比,复杂度是O(n3) react diff react对传统diff进行了优化,将复杂度降为O(n) react基于这几个前提对diff进行了优化: 忽略跨层级操作,因为DOM节点跨层级操作很少。 不同类的组件,则会生成不同的树形结构,相同类的组件,会生成相 ......

传统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只移动最后一个节点到最前面。