山东专业企业网站建设,做企业网站报价,广告海外推广,建立客户档案表格模板文章目录是什么比较方式原理分析Diff算法的步骤#xff1a;首尾指针法比对顺序#xff1a;是什么
diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点#xff1a;
比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中#xff0c;循环从两边向中间比较…
文章目录是什么比较方式原理分析Diff算法的步骤首尾指针法比对顺序是什么
diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点
比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中循环从两边向中间比较比较方式
diff整体策略为深度优先同层比较
比较只会在同层级进行, 不会跨层级比较比较的过程中循环从两边向中间收拢
原理分析 Diff算法的步骤
之后判断新旧两个节点是否为同类标签如果不是同类标签就直接替换如果是同类标签的话进一步执行patchVnode()方法在这个方法内部也是需要先判断一下新旧虚拟节点是否相同如果相等就直接return如果不相等就需要分情况来比对比对的原则就是以新虚拟节点的结果为准分为以下几种情况
oldvnode和newvnode都有文本节点—执行—用新的文本节点替换旧文本节点 oldvnode没有子节点newvnode有子节点—执行—添加新的子节点 oldvnode有子节点newvnode没有子节点—执行—删除旧的子节点 oldvnode和newvnode都有子节点—执行—updateChildren()方法
首尾指针法 ①依次比对当比较成功后退出当前比较②渲染结构以newVnode为准③每次比较成功之后start点和end点向中间靠拢④当新旧节点中有一个start点跑到end点右侧时终止比较⑤如果都匹配不到则旧虚拟DOM key只去比对新虚拟DOM的key值如果key相同则复用并移动到新虚拟DOM的位置比对顺序 首先旧虚拟节点的start和新虚拟节点的start做比对如果没有比对成功就用旧虚拟节点的start和新虚拟节点的end做比对。 如果依旧没有比对成功就用旧虚拟节点的end和新虚拟节点的start做比对如果依旧没有比对成功旧虚拟节点的end会和新虚拟节点的end做比对 当比对成功就退出当前比对渲染结果会以新虚拟节点的结果为准 每次比对成功后比对成功的start会向右侧移动end会向左侧移动。在移动的过程中当start点跑到end点右侧的时候就终止比较。
