更新dom节点,最小力度去跟新

index.html

<body>

    <h1>你好啊！</h1>

    <button id="btn">该变数据</button>

    <div id="container"></div>

</body>

<script src="xuni/bundle.js"></script>

</html>

index.js文件

import {

  init,

  classModule,

  propsModule,

  styleModule,

  eventListenersModule,

  h,

} from "snabbdom";

let myVnode1 = h('ul', {}, [

  h('li', {}, '姓名'),

  h('li', {}, '年龄'),

  h('li', {}, '爱好'),

])

// 使用init函数创建 patch函数

const patch = init([classModule, propsModule, styleModule, eventListenersModule])

const container = document.getElementById('container')

// 让虚拟节点上树

patch(container, myVnode1)

// 改变数据

let myVnode2 = h('ul', {}, [

  h('li', {}, '姓名'),

  h('li', {}, '年龄'),

  h('li', {}, '爱好'),

  h('li', {}, '性别'),

])

let btn = document.getElementById('btn')

btn.onclick = function () {

  patch(myVnode1,myVnode2)

}

发现的现象

当我手动去更改页面中的数据的时候。

在点击按钮。我们发现只追加了性别。

我更改的数据并没有跟新。

说明diff是进行最小力度去跟新的

那我们把数据添加在最前面会发生什么呢？

let myVnode1 = h('ul', {}, [

  h('li', {}, '姓名'),

  h('li', {}, '年龄'),

  h('li', {}, '爱好'),

])

// 使用init函数创建 patch函数

const patch = init([classModule, propsModule, styleModule, eventListenersModule])

const container = document.getElementById('container')

// 让虚拟节点上树

patch(container, myVnode1)

// 改变数据

let myVnode2 = h('ul', {}, [

  //在最前面添加，发现跟刚才的比一样了？

  //他将我们更改的数据复原了？

  //这个时候又小伙伴会说，diff不是最小粒度去更新了

  h('li', {}, '性别'),

  h('li', {}, '姓名'),

  h('li', {}, '年龄'),

  h('li', {}, '爱好'),

])

let btn = document.getElementById('btn')

btn.onclick = function () {

  patch(myVnode1,myVnode2)

}

diff不是最小粒度跟新？

在最前面添加，发现跟刚才的比一样了？

他将我们更改的数据复原了？

这个时候又小伙伴会说，diff不是最小粒度去更新了?

其实diff一直都是最小力度跟新，是你忘记增加key值了。

我们加上key值看看呢？？

添加key值后

let myVnode1 = h('ul', {}, [

  h('li', {key:'001'}, '姓名'),

  h('li', {key:'002'}, '年龄'),

  h('li', {key:'003'}, '爱好'),

])

// 使用init函数创建 patch函数

const patch = init([classModule, propsModule, styleModule, eventListenersModule])

const container = document.getElementById('container')

// 让虚拟节点上树

patch(container, myVnode1)

// 改变数据

let myVnode2 = h('ul', {}, [

  h('li', {key:'00x'}, '性别'),

  h('li', {key:'001'}, '姓名'),

  h('li', {key:'002'}, '年龄'),

  h('li', {key:'003'}, '爱好'),

])

let btn = document.getElementById('btn')

btn.onclick = function () {

  patch(myVnode1,myVnode2)

}

添加key值顶级节点类型改变的情况

当我们添加key值后，发现数据果然是最小力度去更新的，对吧!

如果将ul更改为div，还是最小力度跟新吗？

let myVnode1 = h('ul', {}, [

  h('li', {key:'001'}, '姓名'),

  h('li', {key:'002'}, '年龄'),

  h('li', {key:'003'}, '爱好'),

])

// 使用init函数创建 patch函数

const patch = init([classModule, propsModule, styleModule, eventListenersModule])

const container = document.getElementById('container')

// 让虚拟节点上树

patch(container, myVnode1)

// 改变数据

let myVnode2 = h('div', {}, [

  h('li', {key:'001'}, '姓名'),

  h('li', {key:'002'}, '年龄'),

  h('li', {key:'003'}, '爱好'),

])

let btn = document.getElementById('btn')

btn.onclick = function () {

  patch(myVnode1,myVnode2)

}

这个时候我们增加上key值了，按照之前的操作。

发现一个问题。数据全部恢复最初始值了。

在采取diff算法比较:新旧节点进行比较，

比较只会在同层级进行, 不会跨层级比较。

如果两个节点都是一样的，那么就深入检查他们的子节点。

果两个节点不一样那就说明 Vnode 完全被改变了(ul和div节点不一样)，

就可以直接使用新节点替换老节点。【他们的子代不会进行比较了】 

虽然这两个节点不一样但是他们的子节点一样怎么办？

别忘了，diff可是逐层比较的，

如果[第一层不一样那么就不会继续深入比较第二层了。

（我在想这算是一个缺点吗？相同子节点不能重复利用了？？...）

这个时候你可能会说：这个diff算法也不会那么牛逼呢！

并不是最优的。

【虽然这两个节点不一样但是他们的子节点一样怎么办？】

在我们工作中：其实这指一种非常合理的机制。

我们几乎并不会出现这样的情况

<ul v-if="falg">

    <li v-for="item,index" in list>{{item }}</li>

</ul>

<ol v-if="falg">

    <li v-for="item,index" in list>{{item }}</li>

</ol>

这样的代码在我们工作中几乎是不会出现的呢?

什么叫做不会跨层比较？

<div>

    <p>123123 </p>

</div>

与

<div>

   <h2> <p>123123 </p> </h2>

</div>

div与div比较

p与h2比较

当p与h2比较的时候，他们他们节点不一样，直接使用替换。

此时并不会在使用diff了

diff算法是如何比较的，保证让你看的明明白白的！的更多相关文章

  1. ReactiveNative学习之Diff算法

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

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

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

  3. 浅析vue2.0的diff算法

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

  4. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

  5. react中虚拟dom的diff算法

    .state 数据 .jsx模板 .生成虚拟dom(虚拟DOM就是一个js对象,用它来描述真实DOM) ['div', {id:'abc'}, ['span', {}, 'hello world']] ...

  6. react性能调谐与diff算法

    一个页面其实就相当于是一颗dom树,里面有很多它的子节点,然后你每次去操作一个事件,它都会生成一个虚拟dom,它会跟上一个虚拟dom进行比对,这里运用的算法叫做diff算法,当它找到需要改变的组件的时 ...

  7. 【Vuejs】351- 带你解析vue2.0的diff算法

    前言 vue2.0加入了virtual dom,有向react靠拢的意思.vue的diff位于patch.js文件中,该算法来源于snabbdom,复杂度为O(n).了解diff过程可以让我们更高效的 ...

  8. 直接操作DOM一定比虚拟DOM操作耗时，diff算法，key值，虚拟 DOM的定义

    直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚 ...

  9. React中diff算法的理解

    React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...

  10. diff算法深入一下？

    文章转自豆皮范儿-diff算法深入一下 一.前言 有同学问:能否详细说一下 diff 算法. 简单说:diff 算法是一种优化手段,将前后两个模块进行差异化比较,修补(更新)差异的过程叫做 patch ...

随机推荐

  1. Appuploader工具让ipa上传到App Store 的最新流程和步骤

    ​ 苹果官方提供的工具xcode上架ipa非常复杂麻烦.用appuploader 可以在 mac 和windows 上制作管理 证书 ,无需钥匙串工具 条件:1.以Windows为例,创建app打包i ...

  2. HanLP — 路径规划算法 - 求解最短路径 - 维特比(Viterbi)算法

    维特比算法:从众多路径中,挑出最优的那条,他和隐马尔可夫没有强关联 中文分词任务 语料库 => 训练集 初始.转移.发射矩阵 => 训练过程 维特比算法,得到真正结果 训练的时候,是用不到 ...

  3. cmd 7z 文件压缩

    7z压缩测试 为了方便,将7z的安装目录,添加到环境变量中 # 不加环境变量的话,需要带上全路径 C:\Users\vipsoft>"C:\\Program Files\\7-Zip\ ...

  4. 【HZERO】权限管理

    Hzero数据权限介绍 https://open.hand-china.com/community/detail/625872021372407808#3.4 开发建议 Permission注解属性介 ...

  5. 2018年蓝桥杯B组C/C++国赛题解

    1.换零钞 x星球的钞票的面额只有:100元,5元,2元,1元,共4种. 小明去x星旅游,他手里只有2张100元的x星币,太不方便,恰好路过x星银行就去换零钱. 小明有点强迫症,他坚持要求200元换出 ...

  6. 浅谈 Java 中的 AutoCloseable 接口

    本文对 try-with-resources 语法进行了较为深入的剖析,验证了其为一种语法糖,同时给出了其实际的实现方式的反编译结果,相信你在看完本文后,关于 AutoCloseable 的使用你会有 ...

  7. RSAC创新沙盒十强出炉，这家SCA公司火了

    引言 近日,全球网络安全行业创新风向标RSAC创新沙盒公布了本年度入围十强的名单,软件供应链安全企业Endor Labs凭借基于依赖关系建立应用开发生命周期的解决方案获得了广泛关注. Endor La ...

  8. win32com报错：无效的类字符串(Invalid Class String)

    异常:无效的类字符串 (Invalid Class String) . 使用python操作COM组件的朋友应该都碰到过,这个报错来自于python标准库pythoncom.win32com也是建立在 ...

  9. 2020年了,再不会webpack敲得代码就不香了(近万字实战)

    https://zhuanlan.zhihu.com/p/99959392?utm_source=wechat_session&utm_medium=social&utm_oi=619 ...

  10. java基础-java面向对象01-day08

    1. 一个简单的类 认识类 成员变量 类方法 public class Person { //类的成员变量 int age; String name; double height; double we ...