00:00
这节课我们来学习手写H函数。手写H函数呢,是非常有必要的,我们在上一节课呢,实际上就已经啊练习了这个H函数,到底怎么用这个例子啊。对吧,哎,这样的一个例子,那么在这节课呢,我们要把H函数的底层呢,给它写出来,就是H函数的一个,嗯,底层我们要去给他真正的给他写出来啊,那么我们现在怎么样去呃呃完成它呢,怎么样要看原版的TS版代码,然后去写JS代码啊,原因呢,其实是原版的TS代码呢,它TS这个东西啊,大家呃可能知道就是带类型的啊这个但是呢。嗯,有一句说一句,呃,如果咱们今天去写TS代码的话呢,不是说难度太大,而是说我们会把过多的细节放在对TS的研究上了啊,就嗯,就比较浪费时间啊,就说白了,所以我们就看原版的S代码,但是呢,去仿写JS的代码,然后只写主干功能,放弃实现一些细节啊,保证能够让大家理解它的核心是如何实现的就可以了啊。
01:19
好,那我们就开始先看一看它的原版的H函数,那这个时候肯定要去看noe modus文件夹当中的bottom,咱们可以快速的输入一下bottom,搜一下它,好,那么它实际上用的是build中的对吧?h.JS这个文件啊,它用的是这个。但实际上呢,嗯,我们最好可以看它的TS代码,哎,TS代码的话就在这个S,呃,它的这个那这个库咱们大家看一下那。那的吗?好,他这个包里的SLC里头啊,Sc package这里头的h.TS啊,这是它的TS代码更原汁原味一点,对吧,那这个TS代码可能看上去更乱啊啊,他这里好多类型还有什么或者符号,没关系,咱们老师带你们大概看一看你就懂了啊。
02:10
首先呢,H函数呢,大家可以看见,最后它返回了v no的这个函数啊,那v no的函数的执行,那v no的函数是什么呢?我们可以看一下vno的函数在这里定义的,诶打开你就乐了,为什么呢?因为vno的函数非常简单,你看vno的函数呢,它接受一个参数,Cell参数,Data参数,Children参数,T参数,Elm参数,然后返回这些参数的整合体。啊,咱们大家知道ES6语法当中呢,一个对象对吧?比如说咱们现在举个例子,一个对象如果是这样,Abcd就表示它有A属性,它的值呢是A对吧?就是变量A的值啊,属性值是变量B的值,C属性值是变量C的值,属性呢值是变量B的值。
03:00
那么TS代码当中这块你看写了很多什么类型啊,那这个冒号后边是它的类型,就说这个参数类型是什么,这个参数类型是什么啊,那这个类型其实不用看,哎,不用看对吧?哎,那呃,那你说老师不用看,直接看JS不就行了吗?哎呀,还是看TS吧啊,咱们也增加一些对TS的了解,那等于说什么呢?就等于说这个函数其实是挺挺有意思的啊,他就是把传入的参数返回一个成一个对象。发现了吗?把传入的参数返回成一个对象,这样行好返回成一个对象的话,这个时候的话,你其实就可以发现什么呢?就是这个v node啊,它对于咱们的H函数的意义是什么呢?对,就是H函数呢,实际上最后呢,它会返回这个v node啊,创建出一个虚拟节点,但是呢,它比较麻烦的是它的里头children准。啊,Children它不是要一层一层嵌套吗?所以他这个时候呢,他就要去遍利啊,你看这里有个负循环,用for循环要去遍利children数组对吧,因为咱们大家是,呃,这children准数组呢,实际上就是它的一个参数,哎,然后呢,一层一层呢,都创建出b not的节点啊,别忘了它最复杂的就这种嵌套形式。
04:16
对吧,H它里头呢,数组,数组里头又有H发现了吗。对吧,那这个H的话呢,就是咱们知道调用一次H能返回对吧,一个虚拟节点啊,那么呃,数组它就需要变历啊,所以它这个H函数是很好写的,非常好写啊,非常好写,但它不涉及递归,就是H函数自己是不涉及递归的,它只是呢,一层一层的去调这个vino的啊函数,这样的话就让它变得非常非常的清楚,好,那这段代码,这个H函数啊,这段代码你看上边在干嘛,好多if语句啊。那实际上呢,这块在实现函数的重载,哎,函数的重载,什么叫函数的重载呢?重载的意思呢,它是Java啊,还有C加加当中的一个意思,就是一个函数如果有多种用法。
05:07
啊,那么这个时候呢,我们就说它是重有重载的,比如说H函数,大家应该有点了解,就咱们刚才说过,H函数的用法特别多,比如它可以写标签,然后后边可以直接写这个标签内部的文字,对吧。你看这是一种用法,然后呢,还可以加上一个对象啊,这是第二种用法,还有什么呢?这里是不是还可以再去写一个数组,对吧?还有什么呢?还有这里可以再H,因为咱们说过这个div只有一个子节点,那么是不是就再写一个H啊。这个没问题吧,好,然后如果。啊,看看还有没有哪种,哎,这是数组文字,对,你看就大概你看div这是文字对吧,然后呢,两个参数咱们给它放一起啊,诶这是啊对,然后还有这个对象可以省略。发现了吗?对吧,所以第二个参数都可以省略,也就相当于我们可以给它复制一份,然后把这个都可以删掉。
06:03
两个参数的放一起。啊,发现了吗?哎,这个重了。啊,你看标签名呃,字符串标签名数组标签名又一个H看见了吗?哎,然后是标签名啊,对象数组标签名对象文字标签名对象H,所以它特别特别多的种类啊,那么这就叫函数的重载,它有各种的这种啊,参数的个数也有不同的类型,然后TS呢,它在写函数重载的时候,可以直接把函数头罗列下来。啊,JS是没有这个特点的,大家注意JS是不能罗列这个函数头的,你不信你看一看B的这里的编译出来的啊,编译出来的这个h.X大家可以看一下H函数很干净。看见没有,就三个参数。啊,第一个一定是选择器,第二个参数叫B,第三个参数叫C啊,因为你不知道这个B参数是什么,C参数是什么,对吧?哎,它B参数可能是文字这个字,这是B参数,第二个参数也可能是它也可能是它也可能是个对象,然后它就变成C参数了,它就是C参数,这是B参数,这是B,这是C对吧?所以它这些if语句呢,都在进行函数的重载。
07:17
明白吗?就在进行判断,就是说在哪种情况下,哪个参数是什么意思。啊,比如说啊,当没有写,当第三个参数不是按地范的时候,对吧,那他就要调整各种参数的位置,我还要判断它是不是啊是不是这个。C呀,还是什么对吧,是这样子的,呃,所以他这个很简单啊,然后就要判断这个一一堆啊,一堆这种事情发现了吗?就一堆这样的一个事情啊,就是所以说这是实现函数主载,那么TS版咱们再回到TS。哎,他能把函数重载呢,写在这上头,就告诉你这个H函数几种用法,第一个就只有选择器啊,你看没看见咱们还写漏了,就可以直接选择器,就连文字都没有,它是个公标签对吧?哎,然后呢,还可以是啊字符串,然后第二个参数对吧,还可以是字符串,第二个参数是children准啊,第二个参数它是children准对吧?哎,这样的啊,那咱们今天呢,就简单的实现一下H函数,我们不多写这么多种情况啊,我们今天呢,只考虑三个参数的情况,就是我们自己去书写H函数。
08:24
但是我们的H函数弱一点啊,只实现三个参数呢,就是只实现三个参数的这个H函数啊,就不这个这个这个这个是我们不考虑的范围。能理解吗?哎,这个就说,那这个为什么呀,为什么咱们要去写一些弱点的H函数,因为这就是我们刚才PPT上的话,就是我们只要主干功能放弃一些细节,保证能够让大家理解它的核心是如何实现的啊,然后至于它两个参数跟那倒啊就倒,就是如果你没传递二个参数,那我这个时候就把什么设成什么参数,什么设成什么参数,那就倒来倒去,其实就容易把大家倒懵了,诶这个呢,不是咱们上课的一个重点啊,大家一定要记住,就咱们今天只实现三个参数呢,就是你如果没有这个对象参数,我也要把这个空对象写上。
09:15
啊,它必须是三个参数,好吧,好好,那咱们就开始着手写这个H函数啊,那怎么办呢?其实很简单,就是我们在SLC当中呢,可以再新建一个文件夹。对吧,诶新建一个文件夹的话呢,咱们就可以写成咱们自己的这个bottom,就叫my bottom。啊,MY我的好吧,然后这个index呢,实际上就可以,呃,废掉了,咱们给它存一下,当做一个案例,就给它加个横杠啊,写个中文名字,比如叫学习H函数对吧?哎,那咱们现在可以新建一个咱们自己的index.js啊,那什么意思呢?就是说这是咱们新的入口文件了,咱们可以at一个123,看一下弹没弹。爱塔拉。
10:01
对吧,诶没问题,然后呢,我们现在呢,自己在my bottom当中去创建h.JS文件。能理解吗?对,我们的目的是什么?对,我们的目的就是自己手写一下这个h.DS文件啊,因为真正会一个什么东西一定要能手写出来,手写出来就会了,而至于它的源码呢,是躺在node modules里的啊,Node modules里的对吧?诶,那咱们现在就自己手写一的啊,其实挺简单的啊,好,我们再去创建一个vnode.js文件,那这个时候我们就可以开始写了啊。Vino的点JS文件非常的简单啊,它其实就是向外暴露一个per default,一个函数啊。好,然后这个函数是什么呢?收几个参数,第一个参数是选择器对吧?哎,咱们这个就可以参考它那个,呃,它这个官官方的这个啊,咱们可以把拿包灯打开,我刚才给它关了。S拉,然后src里的这个TSR,因为有的时候这个顺序都可以跟他一样。
11:08
哎,VE的,你看是不是sell data children tax e啊,所以我们这个也是啊,Sell data。对吧,然后是什么children啊children。哎。Em就行。这样写对吧,没了啊,Cell data children准text em啊这这几这五个属性,那咱们刚才PPT上咱们看一下这五个属性是对吧,123456,但还有个K,这个K呢啊,其实也是属于data中的,但他只不过最后再把K单独拿出来对吧?哎,这个所以说先不重要啊,他这五个参数,那个key咱们到时候再说,好老师把他的原版也呃关掉了,因为老对着原版看,其实你就看着看着看乱了啊好,那这个函数其实V闹的函数,它就一个功能,它是不是就是把这123455个对象五个属性拼成一个对象返回呀。
12:09
也就是说这个函数它就是啊,把这五个参数返回而已,对吧,所以说你现在会发现就是函数的功能非常简单。啊,就是把传入的五个参数组合成对象,然后返回,这是一个ES6语法,它实际上就是cell,是cell。对吧,冒号啊,Cell是cell,然后data是data。哎,然后children是children明白吗?啊,然后T是大,M是M,这是ES6的语法啊,就完事了。好了,然后接下来就是H函数,H函数肯定要去引这个v node。啊,我们把这个函数给它引进来,那这个引进来的话,我们先去写from啊,点杠be notde,哎,不对,是什么是MY,这个这个叫啊。
13:09
他这个怎么没有没有感应呢。啊,没有哦,对不起,他他是同一个文件夹中的啊,所以就不用买拿包的对吧,就引进来就行,你这是默认暴露,所以这块就有个名字就行,对吧,那这样的话,你看我就可以输出啊输出一个什么呢?输出一个v node,比如说这块是div对吧?哎,然后呢,啊,这是后边这几个值12345嘛,对吧,第二个值,第三个值,第四个值对吧,第五个值。格式化一下啊,但是现在你控制台没有输出,现在控制台没输出是因为你这个主文件对吧,没有引这个H函数啊,我们要把这个H函数引一下文件夹名字h.JS对吧?诶引一下啊,引一下它就会执行啊,引一下这里不就执行了吗?这就输出一个虚拟节点,但是这个虚拟节点现在是不对的啊对吧?哎,好,那这个H函数咱们现在就可外暴露啊,它就可以向外暴露这个H函数。
14:09
好,咱们刚才说了,咱们现在编写的是一个啊低配版的啊,就编写一个低配版本的啊,H函数就是这个函数呢,必须接受三个参数。啊缺一不可,哎,就相当于它的重载功能啊,重载功能呢。诶是较弱的啊,那么你说老师他原版它能重载,就是可以接受两个,可以接受三个,其实它就是通过一副语句来导啊导这个参数啊,但是它并不是咱们这个,就是它并不是一个最美的地方啊,所以咱们老师就把它给割舍掉了啊,我们。啊,其实老师在备课的时候呢,也去思考过,就是这块,其实呃,有有能力的同学你可以自己去看他原版是怎么倒的,倒这几个参数就可以了,没有什么技术含量啊,所以大家不用怕,哎,它一定是有三个参数的,好吧,诶,那这三个参数的话呢,你会发现它第一个参数一定是选择期,第二参数一定是对塔,但第三个参数我不知道是什么,能理解么?这第三个参数我不不一定是什么,所以我管它叫C就可以了啊,因为我不知道这个参数是什么,咱们现在琢磨一下它的第三个参数可能是什么。
15:24
对,它的第三个参数你看啊,咱们H调用的时候,它是有几种版本的,我们把刚才那个,呃,刚才那个就不小心又被我删了,我们再新建一个啊,你看H函数第一个一定是选择题,第二个一定是对象对吧,第三个可能是文字,是不是也可能是H本身也可能是数组啊。对吧,哎,那H本身是什么,H本身是它又掉了一次H,所以说又是这两者当中的一个。啊,就是第三个是H,咱们一会再说它,它一定是三个参数啊。所以是必须是,也就是说调用的时候形态是这样子的,也就是说调用的时候形态必须是下面的三种之一。
16:07
好,必须是下面三种之一啊,这样的,哎,形态一,咱们写上形态一形态二。和形态三啊,咱们力求让大家能懂这个低配版,再写不出来那就没天理了,对吧,这样子的。好,那这边就可以写测试用例啊,你就可以写测,咱们先去写第一种,你看对吧,那不就是写一个叫my test啊,就是买VENO1吗。对吧,等于H,然后我们现在输出,但现在肯定是输出安范啊,因为我们这个H函数现在是不是什么都没写呢,对吧?哎,就等于说你看没看见,咱们现在就开始写了啊,开始写的时候呢,这个时候实际上就是慢慢的不要着急啊,就是写源码的时候就不用呃过分的去参考源码,你只要把源码的意思能读懂啊,当然有老师帮你读懂,你这个时候呢,就不用去特别过分的去参考你的源码。
17:06
啊,你只需要就是嗯,大大方方的按照你的思路写就可以了,啊好了,那咱们现在首先去检查参数的个性啊,参数的个数。好,如果咱们arguments的。不是三,哎,那这个时候我们就抛出错误啊,Throw new arrow就可以了。啊,对不起,H函数必须传入三个参数啊,我们是低配版是吧H函数。啊,我们向用户道个歉啊,写个对不起,哎,很真诚是吧?好,单行衣服呢,是不需要写大括号的,直接这么写就可以了。哎,那所以说你这边如果说多传了一个参数啊,那他这块直接就报错,诶I写错了啊E对吧,他就直接报错了,哎,如果你少传了一个参数。
18:03
它是不是对不起啊,哎,就行了啊,那你说老师空对一些空空文字,那你这样解它就是空调墙啊,你必须三个参数,这样简单一点,哎简单一点,这样的话咱们就啊方便好,那这样的话呢,诶三个参数就不报错。那这个时候就很简单,我们是不是要去检查C的类型啊,能不能理解,哎,就是检查参数C的类型,好,那我们现在看,如果type of c呢,是字符串型啊,是字符串型或者是数字型,因为数字它可能是内部数字,或者type of c是数字类型。就基本类型值,那这个时候怎么办?对,就说明现在调用H函数是形态一吧,H函数是形态几啊是形态一。能理解吗?它现在是用这种形态来调用的,那这个时候是不是太简单了,对他就直接返回我们vno的啊,咱们看一下vno的它这个提示参数顺序啊,看是不是选择器,然后data,然后children就是安迪范吧,Text的是不是就是CM,是不是就是安迪范。
19:13
这个大家能理解吗?对吧,因为elm咱们现在肯定是案D8,还没有上述啊,啊还没有上述,哎,那什么时候上述是pach啊,咱们一会说pach函数派CH函数咱们也会手写,所以这个时候就非常简单,Cell就是cell。啊,Data就是data写进去,然后children是and find对吧,Text就是这个C。看见没有,哎,然后em是什么?Em就是安迪范就行了。啊,非常的简单,哎,就把这个C搁这对吧,非常好写这H函数。然后接下来的问题呢,就是关于这个形态二啊,那这个时候就else if,就是如果ara is re,你这个C呢,它是个数组,那这个时候就说明它是一个形态三,明白吗?它是形态三啊呃,对不起,形态二啊。
20:04
形态二,那形态三的话是什么?形态三第三个参数是H函数,H函数的返回是不是H函数会返回一个虚拟节点,它是不是一个对象啊?明白吗?哎,就说明它是一个对象,那它是一个对象的话,咱们的源码是怎么检查的呢?对,就是说它是一个对象,对象的话是不是就可以用type of c啊,它是一个object,并且呢,它是有cell属性的,因为咱们大家一定知道就是。虚拟节点是一定要有三属性的。能不能理解,哎,并且啊,就是C,它有这个cell属性,那咱们就可以写一个叫has own property来检查property对吧,来检查它有没有self属性,那这个时候是不是就说明调用函数是形态三呀。啊就行了,那如果都不是,那就可以抛出错误了。对吧,哎,抛出错误就传入的,传入的参数类型不对啊,传入的这个第三个参数类型不对,哎,就可以了。
21:10
啊,所以是这样子的啊这样子的。好,那咱们第一个实际上它已经做完了啊,你看它已经输出这个文字,它已经成功了啊,那咱们来试一试形态二,形态二是什么,是不是一个数组啊哎,放个数组咱们一会再去写对吧,按地放,因为这块没写啊,还没写对吧?好第三个那是一个对象,但是放一个对象它不对,它是不是还是有有有错对吧?因为他没有赛啊好,那咱们现在就说这个数组,数组当中是不是他又会递归,比如说这个P,然后对象,那这个时候就不要再去啊,再去做对做H了啊,咱们就赶紧先拿文字来来来去测试一下,哈哈,嘻嘻。哎,呵呵,是吧,哎,咱们测试一下,那这不就是数组吗?那等于说什么意思,是不是就相当于数组当中存放的一定也都是H函数。
22:03
的执行,那H函数的执行会返回什么?它运行结果是不是一定是个对象?懂吗?所以说我们现在就可以逐一检查,逐一便利它啊,它是个数组对吧?形态二,我们现在开始写形态二啊,所以我们现在就要便利这个C啊,For flight I等于零,然后I对吧,小于C的Les,然后I加加啊,那我们现在要检查这个C的第二项是不是必须是一个对象啊。那你说老师他不是个对象,它怎么不是一个对象,因为H函数执行的结果就一定是个对象,明白吗?所以大家一定别蒙圈,那你说老师你H函数不是还没蒙编完吗?你别着急呀,没编完没编完,那它返回的一定是个对象,Vno的函数执行不是对象吗?所以这个编程他就是说需要你特别明白啊,所以这个时候我们就逐一检查它是不是一个。对象明白吗?所以这个时候我们就可以看如果C的第项。
23:04
对吧,Type of c的Di项啊,它。必须是个object啊,也必须拥有这个属性。C的D项也必须拥有这个啊,这个这个这叫什么太阳属性,那如果它不满足,不满足是不是就可以加个非。对吧,哎,就是如果不满足,那么这个时候就可以报错了。听懂了吧,就可以报错了对吧?哎,你传入的数组参数,数组参数中有像的结果不是啊,有像不是H函数啊,那现在它是不会报错的啊,它是按D反,因为我这个没写负啊,但是如果说你这个数组当中对不因为它又会掉H函数啊,它这个H函数就当于像递归一样,它这数组因为你这个一变历之后,它不又掉H函数吗。对吧,那这个H函数它已经检测到第三项是字符串了,所以它是不是已经走到这一个里头了,就是它那层调调调的时候是不是已经走到这了,对吧?哎,所以如果说你这里头,比如说我突然间来一项来一项不是H函数,那它就会报错,你看。
24:14
对吧,就说明你这里有错了啊,你这里就必须是H函数的调用明白吧,哎,比如这里再来个么么哒吧,不知道写什么了啊,来个么么哒。发现了吗?所以这个就能建,那那这样的话呢,我对同学们就明白了,其实很简单,因为我现在便利每一个对吧,便利每一个,那便利每一个的话干嘛。干嘛?遍历每一个目的是干嘛执行,你说老师遍历每一个执行它不对呀,H函数已经执行了呀,因为你的测试语句当中已经把H函数执行了,所以这里循环是不用执行CI的。明白吗?就相当于这里不用执行CI。不用执行CI,因为你的测试语句中,就是你调用H函数的这个测试语句中就已经有了执行执行明白吗?所以这里不是你想的让C下执行,他不用执行,他已经执行了呀。
25:15
懂吗?所以说它已经返回了一个对象,这个已经返回一个对象,因为它再次调用的时候,不就匹配这个字符串了吗。对吧,那对,所以这个时候要收集,就此时只需要收集好就可以了。明白吗?收集好这个children就行。所以这个时候我们就把这个children我们给它收集出来,他这个时候是空的啊对啊,就收集出来不就行了吗?所以就children当中我们去push这个CI这项就可以了。明白吧,那他不就收集完了吗?等于说这个负数循环就是在收集。就是在税务局求准,他没有再干别的。对吧,哎,收集好,因为我最重要的是什么,我们看一下PPT啊,这样的就是我最重要的是一个嵌套的形式,就是这样子的一个嵌套形式。
26:05
啊,然后嵌套形式呢,能够变成真正的用这种children准能嵌套的形式不就行了吗。对吧,就很简单了,收集就行,那收集完了到循环结束了,循环结束了就说明什么呀,就说明是不是就表示就说明什么,对秋准收集完毕了,秋准收集完毕了啊,那么此时呢,可以返回这个虚拟节点了啊虚拟节点了,那么它呢,是有children属性的。哎,所以就可以直接返回b no的。对吧,Style就是style data就是data,哎,然后children的不就是你刚才弄的这children对吧,Text的是安迪,因为他没有安,他就是内部的文字啊,那有的同学说老师他可不可能又有内部文字,又有仔细点啊,咱们按理说是可以的,但是呢,我们今天呢,是给他做成一个弱智版啊,弱智版按理说对吧,哎,就按地板,然后最后ER按地按地板就可以了。
27:07
所以这样就很好用了,你看我们这一次就可以了,刷新啊它就好了,看见没有,是不是这个div div啊对吧,E and fun text,安迪范,然后CHILDREN4个四个展开之后是不是P,大家看一下塔都是空对吧,然后children都是安迪范,因为他们没有儿子呀,然后text没问题吧。哎,那你说老师对吗?对,你不信的话,咱们现在看一下,比如说这个div当中P,那这个P当中呢,再有对吧,对呀,P里头可以放放SPA吧。对吧,哎,这个P里头再放SPA,然后空对象,然后这里写A,这里写B。对吧,怎么不行呢。诶,然后这块加逗号啊刷新你看不报错吧。发现了吗?这是PVPP,然后其中他的children准又是两项。啊,对吧,就相当于递归写成了,就很神奇很神奇,递归就写成了,那这样的话,你这个children展开之后,这个children里头是不是又有两个SPA啊,然后这两个SPA是没有children的,他是tax的。
28:10
对吧,因为到最后这一层,它就识别到了这个啊Type C这一层了。明白吗?哎,就识别到了Type C这一层了。啊,识别到Type C这一层,就是type of c等于string这一层,然后这个时候呢,它就不会再去走这数组这一层了,啊,当然这一层是数组,它就走到这个对吧,然后这个数组就写走到这,那你这时候可能会问老师,你这个ICC我还没写呢,对呀,这个IC我还没写,因为我们现在没遇见这种情况。啊,可能有的时候会遇见对吧,比如说这个P,它里面就一个SPAA,那我这个时候是不是这个数组就会去掉。看见没有对吧?哎,那这种情况它是没有没有返回的,为啥因为这块没有返回啊,那这种情况你看他就会报错。他说传入的数组参数中有项不是H函数,它就在这会报错呢。
29:01
对吧,哎啊哦,在这呢,你传入的数组项当中有项不是H函数,为什么啊对,因为你这项没有返回是安D范呀,所它识别到你这项是有问题的,对吧?那所以说是因为你这没写,所以你一定记住了,就这种它其实不是递归啊,递归是函数自己调用自己,它实际上是这种嵌套,就是一层一层的children被收集起来了啊。对吧?哎,所以说这种函数你一定要会写,然后脑子呀多转几个弯,多想一想啊,其实你会发现不要怕它简单,或者说不要觉得它简单不写,其实你一写完之后,你会觉得自己的那个编程能力啊,真的是有实打实的提升的啊,就真的会有一种实打实的提升的,这个就是很恐怖的一件事啊,好了,那第三个呢,就太简单了。对,第三个太简单了,因为你只要收集那个children,把children放到一个数组中就行。对吧,哎,就说明它是一个对象,那就说明什么星态三形态三是不是就说明入的就是即传入的那个C是唯一的children吗。
30:08
懂了吧,哎,所以这个时候我们就把这个children。对,就给他把这个C放数组里不就行了吗?啊,不用执行,不用执行,还是那句话,不用执行这个C,因为测试语句啊,测试语句中就已经执行了这个C。测试语句中就已经执行了这个C。对吧,这个H已经在执行了呀。对吧,它只要放在这个数组中就行,诶,然后再返回对吧?诶返回返回cell data children吗?然后文字式的安法的这个安迪法不就行了吗?那就大功告成了,咱们看一下这个测试结果,P里头是不是有个SPA唯一的儿子刷新,这不对了吗?你看这不对了吗?很幸福,这个屁里头有一个唯一的儿子。看见了吗?诶,唯一的儿子就这个死班啊,那等于说咱们的H函数呢,就写完了啊,但是呢,是阉割版的,也就是说你不能省略这个属性,哎,不能省略这个属性,一省略这个属性会报错啊,那它省略属性的话呢,实际上呢啊,不是那么难,但是复杂大,他要判断第二个参数的类型,还有第三个参数的类型啊,他综合考虑他比较复杂啊,然后那个函数倒来倒去,它不是一个最美的一个状态啊,所以说老师呢,上课的时候咱们就给他割舍了,因为我们的目的是看最美的东西,最核心的东西啊,然后有一些细节,说白了,斯大包也不是一一蹴而就的,他也是好几年的时间啊,就是几百次几千次commit,大家应该知道G是不是有commit呀,对吧?哎,几百次几千次commit才把那个库才写的很完善啊,所以咱们大家一定要注意,咱们现在写个低配版的啊,好了,那这个哎,H函数就对了,那H函数到底是不是真正对。
31:55
可能那这个时候对我们就可以啊,那他真的是对的,他甚至可以用。
32:00
原版的patch啊,然后结合它一起上树是没问题的,哎,是没有任何问题的,就这个H,就咱们的my bottom的这个H,甚至都可以上树的啊,这是可以的啊,那咱们可以把刚才学习H函数当中,比如说这个火龙果这个例子啊,我们给它复制进来。哎,这个叫my v not2啊,我们给它复制进来再测一个,但是测的时候你看它有问题,因为这个ul它是没有没有第二个参数啊,诶,所以他这样就会报错。啊,低配版的啊,他直接给你说对不起了,都鞠躬道歉了,对不对,哎,所以呢,咱们大家一定把这个第二个参数加上,这个第二个参数加上,不加上他就给你道歉啊,伸手不打笑脸人啊,人家直接低头认错是吧?哎,都加上啊,这个也要加上这个第二个参数。啊对就行了,嗯,然后这块没加,你看还是会报错,所以这块还是要加上啊,就不报错了,看见没有,诶咋回事,看看还有哪个没有,没有把参数弄对这个啊这个。
33:08
对吧,哎,必须三个坦克就对了,咱们看一下啊ul对吧,哎,Ul里头四个力,然后每个力呢,第一个是text的对吧,然后这两个是children的。啊,这两个是children准的,因为有子元素呀,哎,然后children只有一项,没错吧,它是div呀,这个children只有一项,这个P呀,而这个div当中的有两个P,对吧?哎,有两个P啊,没问题,好吧,就说明测试通过了啊好,那么相信你通过书写H函数,我估计你就很兴奋了啊,就说原来真的这种著名库里的算法是我能写出来的,这就是我们这个啊,这个源码探秘这个课程的一个目的啊,就是人真正让你能写出来这些东西,那你写出来你是不是就发现虚拟节点没有那么复杂,对吧,这就是虚拟盗墓。啊,然后最内层的这个这一个最内层的东西就是一个vno的啊,就它当然本质上讲它也是一个vno的啊,但它更多的是一个虚拟DOM数啊,然后最里头的一个东西是个啊vino的啊好,那么这节课我们就讲到讲到这里啊。
我来说两句