diff算法的作用
计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面。

  传统diff算法
  通过循环递归对节点进行依次对比,算法复杂度达到 O(n^3) ,n是树的节点数,这个有多可怕呢?——如果要展示1000个节点,得执行上亿次比较。。即便是CPU快能执行30亿条命令,也很难在一秒内计算出差异。
  react的diff算法

  diff算法是调和的具体实现。

    调和:将Virtual DOM树转换成actual DOM树的最少操作的过程 称为 调和 。

  diff策略
    React用 三大策略 将O(n^3)复杂度 转化为 O(n)复杂度

  策略一(tree diff):
    Web UI中DOM节点跨层级的移动操作特别少,可以忽略不计。

  策略二(component diff):
    拥有相同类的两个组件 生成相似的树形结构,
    拥有不同类的两个组件 生成不同的树形结构。

  策略三(element diff):
    对于同一层级的一组子节点,通过唯一id区分。

  tree diff算法

  (1)React通过updateDepth对Virtual DOM树进行层级控制
  (2)对树分层比较,两棵树 只对同一层次节点 进行比较。如果该节点不存在时,则该节点及其子节点会被完全删除,不会再进一步比较。
  (3)只需遍历一次,就能完成整棵DOM树的比较。
    

  对于策略一,React 对树进行了分层比较,两棵树只会对同一层次的节点进行比较。

  只会对相同层级的 DOM 节点进行比较,当发现节点已经不存在时,则该节点及其子节点会被完全删除,不会用于进一步的比较。

  如果出现了 DOM 节点跨层级的移动操作。

  如上图这样,A节点就会被直接销毁了。

  Diif 的执行情况是:create A -> create C -> create D -> delete A

  component diff
  React对不同的组件间的比较,有三种策略
  (1)同一类型的两个组件,按原策略(层级比较)继续比较Virtual DOM树即可。

  (2)同一类型的两个组件,组件A变化为组件B时,可能Virtual DOM没有任何变化,如果知道这点(变换的过程中,Virtual DOM没有改变),可节省大量计算时间,所以 用户 可以通过 shouldComponentUpdate() 来判断是否需要 判断计算。

  (3)不同类型的组件,将一个(将被改变的)组件判断为dirty component(脏组件),从而替换 整个组件的所有节点

  注意:如果组件D和组件G的结构相似,但是 React判断是 不同类型的组件,则不会比较其结构,而是删除 组件D及其子节点,创建组件G及其子节点。

  element diff
  当节点处于同一层级时,diff提供三种节点操作:删除、插入、移动

  插入:组件 C 不在集合(A,B)中,需要插入

  删除:(1)组件 D 在集合(A,B,D)中,但 D的节点已经更改,不能复用和更新,所以需要删除 旧的 D ,再创建新的。

  (2)组件 D 之前在 集合(A,B,D)中,但集合变成新的集合(A,B)了,D 就需要被删除。

  移动:组件D已经在集合(A,B,C,D)里了,且集合更新时,D没有发生更新,只是位置改变,如新集合(A,D,B,C),D在第二个,无须像传统diff,让旧集合的第二个B和新集合的第二个D 比较,并且删除第二个位置的B,再在第二个位置插入D,而是 (对同一层级的同组子节点) 添加唯一key进行区分,移动即可。

  element diff
  当节点处于同一层级时,diff提供三种节点操作:删除、插入、移动

  插入:组件 C 不在集合(A,B)中,需要插入

  删除:(1)组件 D 在集合(A,B,D)中,但 D的节点已经更改,不能复用和更新,所以需要删除 旧的 D ,再创建新的。

  (2)组件 D 之前在 集合(A,B,D)中,但集合变成新的集合(A,B)了,D 就需要被删除。

  移动:组件D已经在集合(A,B,C,D)里了,且集合更新时,D没有发生更新,只是位置改变,如新集合(A,D,B,C),D在第二个,无须像传统diff,让旧集合的第二个B和新集合的第二个D 比较,并且删除第二个位置的B,再在第二个位置插入D,而是 (对同一层级的同组子节点) 添加唯一key进行区分,移动即可。

  移动的条件:

  • 对新集合中的节点进行循环遍历,新旧集合中是否存在相同节点

  • nextIndex: 新集合中当前节点的位置

  • lastIndex: 访问过的节点在旧集合中最右的位置(最大位置)

  • If (child._mountIndex < lastIndex)

  情形一:新旧集合中存在相同节点但位置不同时,如何移动节点

  

  (1)看着上图的 B,React先从新中取得B,然后判断旧中是否存在相同节点B,当发现存在节点B后,就去判断是否移动B。
  B在旧 中的index=1,它的lastIndex=0,不满足 index < lastIndex 的条件,因此 B 不做移动操作。此时,一个操作是,lastIndex=(index,lastIndex)中的较大数=1.

  注意:lastIndex有点像浮标,或者说是一个map的索引,一开始默认值是0,它会与map中的元素进行比较,比较完后,会改变自己的值的(取index和lastIndex的较大数)。

  (2)看着 A,A在旧的index=0,此时的lastIndex=1(因为先前与新的B比较过了),满足index<lastIndex,因此,对A进行移动操作,此时lastIndex=max(index,lastIndex)=1

  (3)看着D,同(1),不移动,由于D在旧的index=3,比较时,lastIndex=1,所以改变lastIndex=max(index,lastIndex)=3

  (4)看着C,同(2),移动,C在旧的index=2,满足index<lastIndex(lastIndex=3),所以移动。

  由于C已经是最后一个节点,所以diff操作结束。

  情形二:新集合中有新加入的节点,旧集合中有删除的节点

  (1)B不移动,不赘述,更新l astIndex=1

  (2)新集合取得 E,发现旧不存在,故在lastIndex=1的位置 创建E,更新lastIndex=1

  (3)新集合取得C,C不移动,更新lastIndex=2

  (4)新集合取得A,A移动,同上,更新lastIndex=2

  (5)新集合对比后,再对旧集合遍历。判断 新集合 没有,但 旧集合 有的元素(如D,新集合没有,旧集合有),发现 D,删除D,diff操作结束。

  diff的不足与待优化的地方

  看图的 D,此时D不移动,但它的index是最大的,导致更新lastIndex=3,从而使得其他元素A,B,C的index<lastIndex,导致A,B,C都要去移动。

理想情况是只移动D,不移动A,B,C。因此,在开发过程中,尽量减少类似将最后一个节点移动到列表首部的操作,当节点数量过大或更新操作过于频繁时,会影响React的渲染性能。

diff算法的更多相关文章

  1. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  2. React Diff算法

    Web界面由DOM树来构成,当其中某一部分发生变化时,其实就是对应的某个DOM节点发生了变化.在React中,构建UI界面的思路是由当前状态决定界面.前后两个状态就对应两套界面,然后由React来比较 ...

  3. React的Diff算法

    使用React或者RN开发APP如果不知道Diff算法的话简直是说不过去啊.毕竟"知其然,知其所以然"这句老话从远古喊到现代了. 以下内容基本是官网文章的一个总结.压缩.这次要谦虚 ...

  4. ReactiveNative学习之Diff算法

    React 源码剖析系列 - 不可思议的 react diff深入浅出React(四):虚拟DOM Diff算法解析React diff 算法总结链接引用的文章React出于性能的考虑,为了避免频繁操 ...

  5. Vue源码终笔-VNode更新与diff算法初探

    写完这个就差不多了,准备干新项目了. 确实挺不擅长写东西,感觉都是罗列代码写点注释的感觉,这篇就简单阐述一下数据变动时DOM是如何更新的,主要讲解下其中的diff算法. 先来个正常的html模板: & ...

  6. React——diff算法

    react的diff算法基于两个假设: 1.不同类型的元素会产生不同的树 2.通过设置key,开发者能够提示那些子组件是稳定的 diff算法 当比较两个树时,react首先会比较两个根节点,接下来具体 ...

  7. 详解vue的diff算法

    前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...

  8. 浅析vue2.0的diff算法

    一.前言 如果不了解virtual dom,要理解diff的过程是比较困难的. 虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTe ...

  9. Virtual DOM 系列三:Diff算法

    DOM操作是昂贵的,为了减少DOM操作,才有了Virtual DOM.而Virtual DOM的关键就是通过对比新旧vnode,找出差异部分来更新节点.对比的关键算法就是Diff算法. 历史由来: d ...

  10. 虚拟DOM和react中的diff算法总结

    https://blog.csdn.net/qq_26708777/article/details/78107577 一.虚拟DOM 1.什么是虚拟DOM及原理        把真实DOM树,变成js ...

随机推荐

  1. vi/vim编辑器使用方法详解

    vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中的记事本一样,它的强大不逊色于任何最新的文本编辑器.他是我们使用Linux系统不能缺少的工具.由于对Unix及li ...

  2. PHP 奇葩的debug_zval_dump的输出

    有段代码: $a1 = 'Hello world!'; $a2 = &$a1; echo "test1 :"; debug_zval_dump($a1); $b1 = 'H ...

  3. 自力更生Collections.sort发现比较结果混乱?Comparator的锅还是强转类型导致?

    近日开发任务时间充裕一些,于是有时间回顾一下项目. 我关注到了项目中使用的七牛云的对象存储服务. 作为测试需要上传了一些图片,但七牛的控制台却无法将内容按照上传时间排序或者是按照日期查询,由于buck ...

  4. C#读取邮件附件的方法

    基于需求需要从邮件里读取附件,从网络搜索整理如下: 1 使用 Spire.Email 从官网下载安装并引用,地址:https://www.e-iceblue.com/Download/email-fo ...

  5. Python开发【第十篇】集合

    集合的运算 & 交集 | 并集 - 补集 ^ 对称补集 < 子集 > 超集 例子: 生成两个集合的并集 s1 = {1,2,3} s2 = {2,3,4} s3 = s1|s2 # ...

  6. mysql 二十余种报错注入姿势

    1.floor()  floor 和group by 搭配使用 利用group by 的key唯一性 和mysql 编码执行顺序导致二次执行产生不同key ))) ) 数值型注入时 不用闭合‘  进行 ...

  7. django报错问题解决

    注意以下修改文件均是修改虚拟python环境中的文件 1.执行(venv) E:\myproj\autotest>python manage.py makemigrations报错: 解决办法: ...

  8. (四)Kinect人脸识别

    kinect可以通过摄动摄像头不仅可以获取人脸位置旋转信息,也可以获取脸部轮廓的三维坐标 可以参考插件中的场景KinectFaceTrackingDemo1-4,在kinectManager基础上需要 ...

  9. python的GIL锁

    进程:系统运行的一个程序,是系统分配资源的基本单位. 线程:是进程中执行运算的最小单位,是处理机调度的基本单位. 处理机:是计算机中存储程序和数据,并按照程序规定的步骤执行指令的部件.包括中央处理器. ...

  10. SQL查询小案例

    这是一篇自学MySQL的小案例,下面是部分数据信息:goods表 1.查询cate_name为‘超级本’的商品名称.价格 SELECT `name`, priceFROM goodsWHERE cat ...