00:00
这节课我们来学习地步处理新旧节点,不是同一个节点时啊,那从这节课开始呢,我们就要开始深入地步算法的一个核心思路,并且呢,要会手写它了。那么第步算法它是,呃,非常非常强硬,我们在之前已经学过,就是只有他们是同一个虚拟节点呢,才会进行精细化比较,那么如果不是同一个节点啊,那么他这个时候呢,就会暴力的去删除老节点,然后呢,去插入这样的一个啊新节点对吧?诶这个是。啊,就是这个是,呃呃,一个很刚性的这样的一个东西啊,很刚性的一个东西,那么。我们现在可以看一下他这个,呃,源代码,就是看一下咱们的这个STEM的源代码,我们打开STEM的源代码,它在这个STEMSLC的initt.ts这个文件当中啊,因为init咱们大家可以看一下它是不是会返回派函数,所以PA函数是在这个文件中进行定义的。
01:06
最后返回呢,就是它这个派函数拉到最底下啊。好,那么拉底下这块呢,就是它返回的这个派函数。那么我们到这里的话呢,咱们可以看一下这里代码其实很少啊,那实际上它是因为呃这里头啊,去调用了它的一些其他的方法啊函数,所以呢,就啊相当于它这里只是一个中基站对吧?哎,就是它相当于是一个呃小的一个呃派遣区域就是一个呃呃一个工作的一个往外往外派啊就说他会根据不同的情况,然后干一些不同的事,那咱们接下来大概看一看。首先配置方法呢,接收老节点和新节点啊,这样的两个参数,然后呢,呃,这个时候他会干什么,对这个里头这些这些语句不用看啊,这些语句实际上他去做一些啊,它的内部的一些事件勾子啊,这些东西咱们呃不会涉及,这是新版本的star才有的啊,这都不用看。
02:07
那么这里其实你看这句话大家能看懂。啊,那它会有一个函数。对吧,这个函数用来判断是不是虚拟节点啊,但它现在它写的是非is we not old we not什么意思,就是说如果你的old的vnode啊,老的vnode不是虚拟节点。这个大家能看懂吗?就是说如果老的虚拟节点不是虚拟节点。那你说老师老的虚拟节点怎么可能不是虚拟节点呢?它有可能啊,比如我们第一次上树的时候,你看。第一次上树的时候派第一次上树的时候,那么老的这个虚拟节点,它不就不是虚拟节点吗。对吧?哎,这个patch啊,这个是container,那这个container就相当于它是老的,就是它位于O的那个no的那个参数嘛,大家看一下它哦,位于第一个参数,它就不是虚拟节点,那它如果不是虚拟节点的话,怎么办呢?那这个时候就要给他诶。
03:12
传入一个函数,那叫empty not at,那empty not at我们可以点CTRL键点一下它,它就上来了啊,那它这块大概是干什么,大家也不用乱看他干嘛,对,他就把这个节点的标签名。啊,然后呢,和ID和类名啊,因为这个咱们之前可能没讲过,就是H函数,它实际上第一个参数可以接收啊,Div井号box点哈哈啊这样子的一个形式,但是呢,我们今天咱们要去写一个就是啊啊就是。捡漏版的也是就是捡漏版的这个对吧,所以我们把这种井号和点这种非核心的方法,咱们都给它删掉了。啊,就不要它,那事实上这个景和点呢,是可以在后边对吧,At t RS啊不是pro当中可以去补充这个ID的啊,还有这个啊,这个类名什么的对吧,所以我们现在就不不再去做这个这个井号和这个啊,所以他这样就给它放啊,传入到了一个虚拟节点当中,你看。
04:13
没问题吧?对吧,是这样子的一个思路啊。所以他就把这个呃,你的这个节点啊的标签名拿出来了,当做第一个参数,然后后边的参数呢,要么是空对象,空数组,然后按例发,哎,但是em就是它本身。发现了吗?对吧?哎,那你说传入的这个节点就不是虚拟节点类型,这冒号表示类型哦,冒号表示类型,在TS当中,它就表示它是一个真正的元素类型,对吧?所以这块的话大家不用看的特别懂啊,咱们一会老师会带着大家写一个JS版本的啊,那个时候你就能看懂了,哎,所以那这样的话,我们就可以画图老师已经提前把这个process on打开了。
05:01
咱们就可以画一个图啊,那这个呢,就是咱们的一个pach函数被调用啊,Pach函数被调用好,那么当pach函数被调用的时候,第一件事是干什么?大家其实从源代码当中也看见了,对它第一件事是不是在判断old reno的是不是虚拟节点。明白吧,哎,就说是old啊,Old的veno的是虚拟节点啊,还是do节点。啊,对吧,哎,是虚拟节点还是盗墓节点,那他这个时候就会有两条路走下来。哪两条路?第一条路就是说OLDV的是虚拟节点。啊,第一条路就是说old veno的是虚拟节点,那这个时候会怎么样呢?大家看咱们把它画一条线啊,诶带着大家把这条线画上,咱们没有提前做到PPT上,原因就是说能够加深大家的印象。对吧,哎,那么是虚拟节点。
06:00
好,那么还有一种可能是什么?对,是不是是DOM节点呀。那现在你就会发现了,如果oldinno的是DOM节点的话,那这个时候这件事干嘛?诶没错,这件事是不是就需要啊给它去呃,变为就是将这个old的啊,Old的veno的啊,Old的VE就是老的这个虚拟节点变为啊,或者叫包装为,哎,虚拟节点对吧?那这包装为虚拟节点之后呢,接下来还要继续走啊,那是虚拟节点,然后包装为,然后那它不就都是虚拟节点了吗?能理解了吧,对吧,哎,你看那不都都走过来了吗。啊,也就是说,也就是说一上来呢,他就要判断一下,对要判断一下,判断一下之后呢,它是盗节点,那这个时候就要包装为虚拟节点,然后走过来,如果直接是虚拟节点就直接走过来,那么在这里的话,我们,诶其实这个应该用菱形啊,用菱形才才好一点。
07:00
嗯,但是我这个好像已经不好改成菱形了啊,就是菱形是判断判断啊,咱们给它改成菱形吧,这样的话更加的专业一点,改成菱形。好,把这个都给它删掉啊。把这个文字往里头粘。因为菱形在咱们的这个呃,流程图当中就表示的是一种判断,所以我们给它改成菱形会更加专业一点啊,这样子的好吧,哎,行,那接下来的话,我们面对这样的一个情况啊。接下来他要干嘛,咱们来看一下,接下来是不是就开始按照咱们刚才课程标题似的,他要判断他们俩是不是同一个节点。啊,对吧,如果是同一个节点,那么才进行精细化比较,这是我们在之前PPT上早就有定论的一个知识,只有是同一个虚拟节点,它发生变化了啊,那么这个时候才能精细化比较,但是他俩本身就不是一个虚拟节点。
08:04
那这个时候呢,它就会暴力删除,哎,Else里头呢,实际上就是暴力删除,你看它要创建新的节点,然后移除老的节点。哎,然后底下这些for是什么?不用看,它是一些hook事件钩子啊,一些生命周期的一些东西,但这些生命周期跟vuee它是不同的,它是那的一个生命周期,不用管啊。哎,就是这样子的。啊,然后这里的一些TS语法,什么叹号,这个叹号表示类型断言啊,也不是说类型断言叫非空断言,就表示它一定非空,哎,所以这些TTS语法的具体细节看不懂就不看了,没关系。对吧,那好,那我们把流程图画一下,所以你看这块是什么情况,它对这块是不是就要开始判断新老,就是O的veno的和咱们的new veno是不是同一个节点,明白吗。哎,那是不是同一个节点呢?那如果是,咱们是不是就要开始精细化比较了啊,就要开始精细化,精细化比较啊,精细化比较,那如果不是,那是不是就是暴力删除旧的,然后呃,插入新的,所以我们把这几个词从PPT上复制出来,你看。
09:20
就是这样子的,所以这条线连上来,这条线叫不是啊,只有是同一个节点,那么才行。对吧,所以这个呢,就是一个一个流程图啊,这个是这样对吧,是虚拟节点啊,然后诶这个这个这个地方画多了,直接就可以引进来了,直接就可以引到这个底下的这这块段了啊,直接就可以引到这儿了。哎,所以这块就是这样的一个流行图,他先判断老节点是虚拟节点嘛,如果不是虚拟节点,那么就给他包装一下,哎,然后这样他们新老都是虚拟节点了。对吧,然后这个时候呢,就要判断他们是不是同一个节点,哎这样的。
10:01
啊,就是这样的,所以说现在要做的事呢,就是这个这个这个啊,而精细化比较是比较难的啊,精化比较呢,且得讲呢,精细化比较可能说是咱们这里头最就是最这个,呃,麻烦的这样的一套算法啊,那么希望大家能明白,好,我们把它给复制到PPT上啊,当着大家的面把这PPT做上了,所以它是这样的啊好,那咱们现在来看几个小事,首先第一个小事呢,就是。嗯,如何定义它们是不是同一个节点?啊,如何定义它们是不是同一个节点,叫如何定义它们是如何定义同一个节点这个事儿就怎么样才能证明它们是同一个节点呢?那这个时候你看它原代码当中有一个same me的这个函数啊,我们点一下它就能看见它的定义。诶,那这时候你会发现老师之前讲的是完全正确的,就是它的定义呢,就是老节点的K要跟新节点的K相同,对吧,并且呢,老节点的选择器要和新节点的选择器相同。
11:12
明白吗?哎,所以这样子的话,你看这才是。啊,判断两这个节点是不是同一个节点的这样的一个事情。啊,我们给它写上来,所以说你就会发现就是老节点或者叫旧啊,旧节点的K要和新节点的K相同,且啊旧节点的什么呀,选择器。对吧,哎,要和老节点的啊,新节点的选择器相同。哎,那么这是第一个事儿,第二个事儿呢,就是说你不是说啊,如果他们这个不是同一个节点,那这个时候就要暴力删除旧的插入新的吗?那暴力删除旧的插入新的有没有什么啊麻烦呢?有,那就是插入新的的话,它需要递归,它需要递归。
12:10
啊,咱们啊先看一下这个递归,就是我们在这你看不是同一个节点,不是走到L0吗?那这个时候的话,你看它就需要啊先得到负负节点,负节点的话,我们这时候插入新的啊,他自己封装一个函数,那插入新的节点,它其实没有那么简单,因为它这里头呢书写了递归。啊,在这有负循环。那为什么要递归,其实这件事很简单,就是你看呀,我们第一个节点啊,当然我们现在第一个节点container,它会被移除。啊,等于说页面上就没有container这个盒子了啊,大家可能误会了,就是container会被移除啊,然后然后在container的地方添加这ul啊,而并不是说那个container是ul的容器,舞台不是这样子的,Container就是一个是容器,但是呢,它自己就没了啊,大家一定注意。
13:05
所以删掉container很简单,但是现在问题是它就是你这个虚拟节点,它是一大片的对象嵌套,对吧?那你不能只把ul创建出来,你还要创建里边的力啊。所以这个时候它就比较麻烦啊,它就是一个递归的过程,但是这个递归呢,就呃还还还还是不算是特别难,能明白吗?哎,还还算不是特别难的啊,哎,他绝对是递归,你看没看见他自己还要调用自己,看见了吧,他这里头自己调用自己啊,就这个递归是咱们能接受的范围之内的啊,没有那么难,所以别拍了。所以别怕,对吧。好,那咱们现在呢,啊,就知道了啊,咱们现在这个子节点需要递归,我们也给大家写到PPT上。子节点是需要递归出来的啊,或者叫创建节点时,咱们所有子节点都需要递归创建出来啊,递归创建的。
14:07
哎,这样子的啊,我们把这个源代码截张屏,为什么截张屏,因为就是一会儿咱们去写自己的时候,我们就不看它了。啊,就不看它了,就大概大概的一个意思,你只要能能看明白就OK了啊,其实呃,其实咱们说句实在话,就是真正的那个拿的核心代码啊,其实嗯不算是,呃不算是学不会的,就是特别难,不是特别难啊那种啊,就是你只要把细枝末节去掉,其实这个东西还是很清晰的。好,那咱们现在呢,就可以开始去书写我们自己的这个啊,这个这个东西了,对吧?哎,就是自己去写一下我们自己的这个啊代码了啊,我们在下个视频开始手写。
我来说两句