00:00
这节课我们来学习dif啊,去处理新旧节点,是同一个节点的时候。什么意思呢?咱们在之前的课程当中呢,咱们来看了,就是如果新旧节点不是一个节点啊,那么这个浅蓝色的这个东西呢,我们已经写完了,就是要暴力的啊,去删除旧的,然后呢,插入新的。包括这个递归的插入新的我们也都写完了啊,所以呃,里外里呢,这块的这个这个东西呢,还是呃,就说白了就是里外里这块的这个整个的。他的一个啊,包括他的一个就是逻辑啊,包括它的一个功能啊,都已经完成了,但是这个精细化比较就是当他们是同一个节点的时候。诶,我们还没有写啊,那么这节课呢,我们就要研究研究,当他们试同一个节点的时候怎么办。那在代码上呢,实际上就是对于我们的这个派的时候,这个if这里头是不是还没有写呀,对吧,是同一个节点的时候,这里头语句还没有写呀,啊,那是同一个节点呢,是最复杂的情况。
01:12
那为什么复杂呢?我们来看一看咱们的用力啊,咱们大家就能明白了。比如。我们一上来呢,大家注意看,现在比如说这里是一个div。对吧,然后div呢,这里面呢是三个P。ABC3个P。好,然后这个时候我们是得到盒子和按钮啊,写写注释注释,然后这是第一次上树。好,然后这是咱们的第,呃,这是新的节点。那这个div肯定跟他是一样的,因为他判断的时候就是这个标签名和这个标签名一样,咱们现在还没有涉及key的事情啊,一会再说key的事情啊,标签名是一样的,但是同一个。同一个的话呢,那这个时候它里头可能会多一个P,你看它里头可能会多一个P。
02:06
对吧。也有可能什么呀,少一个C。也有可能什么呀,对,就是这里头变成文字了,我变为文字了。看见了吗?那现在的话你看啊,咱们一上来它是不显示的。啊一诶一上来为什么显示都不显示了,我们看看为什么,这报错了吗。啊是同一个键,但是一上来为什么这个reno的一不显示了,诶这很奇怪。这个PH。啊,是同一个节点。他怎么一上来判定是同一个节点啊,因为你这个container它是个div对吧?哎,你这个container是个div,它判断成是同一个节点了,明白吗?哎,因为你container它是个div啊,咱们用section,哎,我说呢,因为你container它是div啊,咱们变成section啊这样子的。
03:01
好,那这样它就不是同一个节点啊,但是那个到节点怎么会变成跟他同一个节点呢?就很奇怪,我们来看一看,改一改咱们刚才的那个东西啊。稍等,咱们现在遇见问题了。哎,遇见问题了啊,就是不是同一个这块判断错了,就是如果old key和这个啊,Old对CE对,那是什么呀,是不是就相当于他们的这个选择器跟他的选择器啊,他的选择器是div啊,因为你给他包装了一下嘛。对吧,就判断成是同一个了啊,所以说咱们在这避讳一下变成section。哎,这个不是咱们代码写错了,非常抱歉啊,不是咱们代码写错了,是真的是咱们这个啊没问题,因为他到时候。Section也是不div呢,它也是需要进行优化的,对吧,就是container是div,它也是div啊,就不用变这div了。好,那这ABC你看我一点现在是没反应的对吧,哎一点它是不会变成这个,我变成文字这句话的。
04:02
啊,为什么,因为我这里没有写呀。所以他这里的这个情况,老师在讲什么呢?就是告诉你,他这个特别复杂,他这里的情况很复杂。对吧,那倒过来更复杂,倒过来,比如说一开始,它一开始这里是文字啊,一开始它里头是文字,然后点击按钮之后变成有子节点了。能理解吗?哎,所以它这个东西呢,就特别的复杂啊,它没有你想的那么简单,那咱们看一下它的原原原文啊,原文的话,咱们打开拿包的么,你就会发现他在干什么呢。咱们来看一下。事实胜于雄辩,我们看一下啊,你看。这不就是一开始咱们说的这个patch吗?对吧?那如果他们是同一个节点呢,它就会调用patch vno的这个方法。而PAV的这个函数的话,你看它在干嘛?对,他是不是在判断原来的元素有没有文本呀,然后新的元素有没有文本呀,然后新的元素有没有子节点呀,老的元素有没有子节点呀,它是不是各种可能。
05:06
所以那这种可能的话,大家可能觉得很乱,所以这个时候干嘛呢?对,又需要我们画图了。又需要我们画图了,这个图咱们就需要在这画出来。好,那现在的话,我们就把这个图,咱们把这个真正的给它画出来啊,咱们看看这个文件能不能把往这个调调调小一点啊,页面大调大一点。哎,没有变化啊。它这个网页底下变了太好了多了,那这个时候就会画图了,什么画图呢?就是继续你精细化比较,这个时候我们就需要再画啊,就是精细化比较,到底怎么比较。对吧,怎么比较,那精细化比较的话,它的意思是什么,我们要把它给看出来,那首先我们要看你现在不是。他们俩是同一个节点吗?对吧。
06:00
是同一个节点,那是同一个节点的话,这个时候就会有一个灵魂拷问。啊,就是咱们先注意看啊,现在开始要去写这条线以下的了,哎,我们画一条线在这就这条线,这是个阶段。我们,哎阶段好像不让放。啊,它需要放到甬道池上啊,那个甬道的不拖上来了啊,咱们大家知道,就是接下来要写这条线底下的东西了。对吧,哎,那是什么呢?就是现在要有个灵魂拷问,就是你们俩是不是一样。对吧,刚才是是不是同一个节点,是不是同一个节点,指的是它是不是标签,呃,那个选择性相同和K相同。懂不懂,就是这里是标签选择器是不是相同,这叫同一个节点啊,哎,就是说是不是标签相同,选择器相同啊,要不然我们就直接改掉吧,就是说是不是标签是不是,呃,Sce和key都相同。对吧,那咱们现在再来看,接下来有个灵魂访问,就是要判断old beno的和呃呃,和这个new beno的是不是就是内存中的同一个对象,就它俩是完全一样的。
07:13
那如果他俩是完全一样的话,那是不是可以什么都不做了?你觉得呢?对吧,什么都不用做,什么都不用做,因为它没有变化呀。对吧,他们是内存中的同一个同一个元素,就举个很简单例子,咱们现在写的这个不是同一个元素啊,比如说你B动的一长成这样,B动的二也长成这样,但是他们是内存中的不一个对象,但万一我v note2也是v note1呢?你懂我意思吗?就是。是不是,或者我干脆把my vino的一和VI的一同时做比较,那它俩是不是内存中同一个东西?对吧,那同一个东西,你这不是来捣乱的吗。那这个时候他就不需要啊,再去啊,就是什么都不用做。
08:00
那他如果不是呢,不是,那这时候干嘛?对,这个时候我们就需要来看咱们的新的这个节点啊,新的这个节点有没有文字属性。啊,然后根据新节点有没有文字属性,就又能区分出很多种可能。啊,那咱们现在来看,就是你要看你这个新节点有没有文字属性。有没有T的属性?啊,就是T属性不是安范,为啥呢?咱们刚才已经说过了,就是你这一块是老节点可能有对吧,新节点它可以变成文字了,就这里变成文字了。就没了。对吧,那这个时候要做的是不是要删除原来的老节点啊。所以他这个时候很麻烦啊,所以就要看他有没有文字属性。那这个时候呢,我们就假装有。哎,比如说这块是有,那有的话呢,这个时候又要有一个灵魂拷问了,什么灵魂拷问呢?对,就是你的这个新的这里的文字啊的T和咱们的old we know明白吗?是否相同。
09:09
对吧,那如果相同,是不是什么都不做呀?对吧,哎,如果相同的话,就什么都不做,咱们就在给它画上这块再相同什么都不做啊,相同。相同,什么都不做。啊,这个是咱们人脑子就能想出来的。对吧,那如果不相同要干嘛。不相通干嘛?对,不相同的话,是不是就需要把我们的盗墓节点的内容改成咱们新节点中的文本啊,对吧?哎,就需要把咱们这个em啊,这个中的啊,这个inner text对吧,改变为咱们这个new nono的的啊,这个text。这个就是它的一个不同啊,这样子的,我把这个图变大一点啊,让大家能够看清楚。
10:00
防止咱们现在,呃,大家看看不清楚这样子的。啊,这样子的。所以他现在就是new window和T是不是不相同这样子啊,它是不是有这个属性。对吧,那这个时候同学们就会问了,说老师,那万一你新节点啊,它是有它的属性的。那老节点压根就没有T的属性,那不是好事吗?因为老节点如果没有text属性,我用inner text是不是照样能把DOM节点删掉?对吧,就是inner text1改成新的之后,那老节点的那个节点不就没了吗。大家能理解了吗?对吧,这不是很简单一个道理吗?就是说就是说即使啊,咱们写一个写一句话就是即使老节点就是old的veno的有children准属性。啊,而没有T的属性,那么也没事啊。
11:05
为啥呢?因为我们的inner text一旦改变为新的text,那么老节点是不是自动就没了,老的那个children是不是就就没了,就没了,因为我inner text变了。就一个盒子当中,比如说有四五个子节点,那这时候in text都变成文字了,那这原来四五个子节点是不是就没有了?这个大家能听懂吗?对吧,所以就是你就相当于什么意思呢?就相当于这个地步,算法它的底层其实是很说人话的。啊,他不是你想的那么玄乎的,就是他,他其实每一点点,你只要真的去给他写出来的话,那他其实真的是很很有很有意思的,很有挑战的意思的。好,那么这一针呢就完了。这一针完了,你感觉挺简单的,对吧,你感觉挺简单的,但实际上这一帧是最复杂的。啊,就是说新节点没有T的属性。
12:03
啊,新节点没有它的属性。懂了吧,哎,那新节点没有text属性的话,是不是就意味着咱们这个新节点当中一定有子节点呢?也不一定,因为它可能是空的,就是它这个新节点是个空节点,就什么意思呢?就相当于我们现在第二个这个节点啊,就这个节点它是个空的。啊空的,哎这样子的啊,那空的的话,其实在就还是判断文字没有对吧?哎,那所以说这个时候呢,咱们就不用考虑它有没有这个了,那这个时候就又有一个新的灵魂拷问,什么灵魂拷问对是不是就是old me有没有子节点。啊,有没有节点?那同学们肯定会问老师,你这里为什么不讨论O的有没有子节点呢?啊,你为什么要在这里讨论它有没有children准呢?原因很简单,因为他没有text属性,就意味着他有children准啊,咱们现在就是要么有tax,要么有children。
13:04
对吧,哎,有没有没有,那么咱们先写一下,就是意味着意味着咱们是不是就是knew we know的有children啊。对吧?哎,New window是有children的,那这个时候就要判断old的window有没有children,为什么?因为old的window有没有children很关键。他要决定你old的window的里头那个文字要不要去掉,如果如果有文字的话,你还要把文字去掉,换成这个new window的children,如果你O的window当中是没有文字的,那这个时候还要进行更精细化的比较,就是我们之前说的命中啊,有一个优化策略,咱们后边的课慢慢讲。对吧,哎,我们我们后边的课我们再慢慢讲,所以他就是要这样去做的。对吧?哎,后边的课再慢慢讲,所以这是old you know,有没有children?好,那这个时候是有,有的话会怎么样,咱们把这个写一个有就老节点有节点啊,咱们先说没有吧,因为没有可能更简单。
14:05
啊,就是没有老节点是没有抽准的,而新节点是有抽准的,那怎么办?哎,对,是不是这个时候我们就需要清空啊。对吧,哎,这个时候就是,呃,Old window有没有子节点。啊,没有,那这个时候的话,我们是不是就需要去给他清空。这能理解吧,哎,那这个时候的话,你还有问题来了,就是说他原来有没有文本,他肯定是有。啊,所以说就意味着是不是old window的有文本,就是意味着old veno是有text的呀,对吧,它意味着啊。所以这个时候我们就需要清空咱们这里的文本,然后是不是还要把vno的子节点添加到到当中。能理解吗?哎,他就需要了,也就现现在要做两件事,首先第一步就是清空啊,Old的veno的中的text。对吧,哎,并且是不是要把咱们这个新的这个reno的啊去呃的子节点。
15:06
The children啊?对吧,诶添加到咱们那个do中,哎,是这样子的。啊,这为什么是说人话的呢?因为你琢磨琢磨就是新的节点有text属性。对吧,没有tax中心,对不起啊,没有,这就说明新节点有children,而老节点没有children,就老节点有T的。那这个时候是不是要清空T,要把这个插入进去。对吧?哎,那这个时候为什么你说老师不用in text的,你还要刻意强调一下清空的,因为你改变文字,文字是能够清空DOM的,但是你追加盗墓,盗墓是不会删除原来的文字的,所以这个时候要在这里补一个一和二,第一步和第二步。懂吧,哎,告诉你。啊,你仔细琢磨一下,就是我追加节点的时候,它不意味着原来的文字会消失,但是我改变文字的时候,它会意味着原来的节点会消失。
16:02
对吧,所以这个图一定要看懂。啊,这个图像看到。哎,那么最复杂的就是有,就这根棍是最恐怖的就是老节点啊,你看啊,老节点新节点都有children准。有,那这根棍是最复杂的。明白了吗?诶,这个这节点是最复杂的,所以这节点呢,是咱们现在就画一个五角星,为什么五角星,因为这个里头是相当于是最复杂的,最最复杂的情况就是最复杂的情况就是新老节点啊,就是新老vino的都有什么。对,都有children准。那么此时呢,就要进行最啊,最这个优雅的这个地方啊,或者说最困难的地方。啊,就是他跟文本节点没有关系。对吧,那什么情况呢?对,那就变成了这种情况,这是section,然后这是PP对吧,然后这个时候呢,他可能就要变成这种情况,就是abcd看见没有。
17:07
那这种情况是最复杂的啊,最复杂的那这个时候他就需要有个优化策略啊,有个优化策略来判断到底是新增还是要删除,这是咱们一会儿要去讲的一个最重要,最重要的一个知识啊,就是一个更新节点的一个操作,更新节点的一个操作,它有一个优化。对吧,哎,有一个优化的一个一个一个策略。啊,这叫做更新节点对吧。但是更新节点的话,呃,有普通更新,比如说他就改了个属性啊,他就改了个属性,但是最关键的呢,其实大家知道就是呃,什么新头啊旧头啊,哎,这个就是它一个优化策略,我们一会再说啊,一会我们再说他的一个优化策略。什么叫优化策略,就比如说现在我把ABC啊,这个A呢,我突然间加了个class,能理解吧,哎,加了个class,那这个时候不就相当于比较这个属性吗。
18:02
所以这些东西呢,都是五角星要做的事情。好吧,所以这个时候这个五角星到底怎么做,它的算法如何,咱们后边的视频再讲,不着急,咱们慢慢讲好,那么现在呢,我们把这节课东西咱们再顺一下。首先咱们上节课呢,已经做到这条线了。对吧?哎,已经做到这条线了啊,那么继续往下做,那就是old windowno和new windowno的是否是同一对象,要先判断,如果是什么都不做,如果不是的话呢,那我这个时候就要看new vino的有没有text属性,那为什么不要判断O的vino有没有text,因为new vino的有没有text属性很关键。如果你的新虚拟节点有T属性,这就意味着它可以直接用文字属性去替掉。对吧,哎,以前的那个。啊,以前的那个那个文字节节点的那个属性对吧,就完事了。啊,而一旦剃掉的话,是不是道墓也都下树了,道M就下树了呀?
19:00
啊,我们把这个文字给你A,我们把这个文字变成红色。所以这块大家一定要看懂。好,那么如果没有的话,就是新节点没有text,而是有children,那这个时就要问问老节点有没有children,而不用问老节点有没有text,对吧,为啥呢?因为呃,因为就是呃都一样,没有车准就有就有text的嘛,所以如果没有车准,那这个时候就要清空的,这个也就是说这个红色和这个红色是非常简单的。这两个红色是很好实现的,但最难的就是这种情况。明白吧,就相当于我们现在又把这个又递进了一层,但是并没有递进到底。啊,这是我们这这这个要做的,那肯定有同学就会思考,思考一个特别哲学的问题,就是说老师这个创始的这个人,他是怎么想出来的啊,其实啊,咱们说句实在话就是。计算机啊,它其实也是一种就是精英的啊,一种就是。
20:02
啊推进啊,就什么意思呢,就是咱们这些库啊,这些创始啊什么的,他们其实对这些东西都是很敏感的。啊,他拿包,那这个库的创始人,他其实是,呃,就比如说对这些东西呢,处理啊,还是挺敏感的啊,都是思考了很长时间,包括也有团队啊,一起头脑风暴什么的,对吧?哎,但是呢,咱们普通的把咱们这个程序员,咱们现在想升职加薪,只要把人家的这个代码思路,只要掌握到咱们手里,对吧,吃到我们的肚子里,你会发现同样的很美。啊,这个算法的这个策略是同样的,是很美的。好,那这个视频呢,这些小视频我们讲到这,我们什么都没写,下一个视频我们去讲手写。对吧。
我来说两句