00:00
好,同学们,我们继续说完了这个hos,我们再说另外一个叫做fragment,这个东西呢,极其简单,我用一个案例呢给大家引出来,回到我们的代码当中,Hos折叠起来,那么新建一个第四个叫做fragment,哎,这词什么意思啊,Fragment来我们查一下啊,同学。Fragment打开我们的有道搜索一下啊,Fragment是不是有碎片的意思呀,不完整的一部分的碎片的怎么用呢?关掉,回到代码当中,新建一个index.js叉啊,我还是用类似组件啊LC。走名字还是叫做DEMO啊,那在这个APP里边呢,我给它换一下引入,这是第四个了,好回到我们的组件里,同学,有些时候呢,我在页面上啊,想有一个多级的结构。
01:05
但是一旦你拥有了多级的结构,我们都知道,一上来这是不是就得包一个div呀?多级的结构吗?同学,其实你看我们用这个代码片段去生成的时候啊,你打个RC,你看同学人家带出来那东西div是不是就给你写好了呀,但是有些时候吧,同学其实我不想要这个div。那你比如说啊同学,我想在页面上啊写两个input框,那么正常写就是input,我再来个input是不是就可以了,那我问一下你为什么非得包个div呢?那是因为不得不包,你说对吧,各位不包不符合GS叉的语法规则,你在这编译都过不去,那就逼着咱们没办法,那就包一个。说老师那就包一个,那就挺好的呗,你打开页面。你瞧瞧啊,打开是不是俩输入框啊,右键检查,你看一下结构啊,各位这是不是。
02:02
这为啥有个div?这个这一层div是谁?这层div呢,其实是你APP里的这个div对吧。啊说老师怎么证明的,那非常简单,你写一个A,然后写一个一是吧,你等会儿等它编译。刷新。打开root,你看怎么样,这是APP那个div div对吧,那你说这div呢,那你猜你也能猜到了是吧?回到我们的代码当中,那其实说的就是你这个div怎么验证呢?B等于哎,写上叫做二。等着他编译。啊,回头来到页面刷新,你瞧嘛,Root下有DIV1有DIV2,完了才是,你这个觉不觉得层级包的有点多呀,那所以说我们借助fragment就能解决这问题啊同学,你比如说我回到正常的我的组件里边。这个div呢,是我不得不包的,其实你还可以有另外一个选择,就是react里边有一个新特性。
03:03
你可以再引入一个人,他就叫做fragment。当你不得不包一个标签的时候,别包div。你得包这个fragment。为啥呢?因为最终这个fragment呢,会被react解析给它丢掉,你写的时候是为了骗过GS叉的这么一个语法的规矩,哎,你看我写了有标签,实际上这个标签在react渲染的时候,直接把这个碎片就干掉了。啊,怎么证明呢?那回头来到页面刷新看效果,同学,你发没发现啊,Div等于一这个div里边直接就是东西了是吧。哎,所以说这个fragment有这个作用,那如果你想做的特别好,APP里边是不是也可以做呀,你是不是也可以不包div呀,也可以包个fragment对吗?那来我们试试啊。复制。走,保存。
04:00
等着他变异,回头来到这儿刷新。右键检查你看吧,Root下直接就有text对吧,直接就是两个音input框,同学,你那些无关的div是不是都没了呀,这才是一个比较好的啊一个做法,其实还有一个更简单的做法。啊,APP呢,我先这么做着,在我的这个组件里啊,同学你看着还有一个特别有意思的写法吧。就是空对象啊,就是空标签。同学,我这是div吗?不是是fragment吗?不是是SPA标签吗?不是,我是不是写了一个空标签啊哎,同学保存你回头看效果啊,等会儿它编译好了刷新一波打开root诶同学怎么样?你写fragment。人家能忽略这个层级就被干掉了,不再渲染真实的盗墓节点了,那你写个空标签是不是也行啊?哎,说老师,那我到底用哪个呢?他俩还有点儿小区别。
05:02
同学,我们都知道啊,在变就是遍历一堆结构的时候,我们是不是得需要一个唯一标识K呀?如果你用的是fragment。你就可以给他指定一个T,你比如说是一啊,回头刷新一下,你看控制台也没什么警告对吧?哎,Fragment是允许你写这个K值的。但是空标签是不允许你写任何属性的,注意是任何属性都不能写。啊说老师,那你说这个fragment是不是还能传别的呢?你比如说传一个name等于叫Tom。同学,你要知道的是啊,这个fragment最终一定会在编译的时候把这个节点丢失掉,所以说你传别的不行,你传Tom没有任何意义,他也不收,人家只接收一个标签属性,就叫做key,如果你不听话,你写了name等于Tom,那你回到这儿你刷新一下,控制台会给你一个警告,但你看说的非常明白,react.fragment只能拥有一个key属性,别的都不行,你那个name不允许。
06:15
哎,所以说回来看同学,如果你便历的结构呢?呃,就是你不是便历,你一个简单的结构啊,非常简单的结构,就一个,其实你可以不写fragment,直接写空标签,但是如果说你这一堆东西要参与便利,每一个人都得有一个唯一的K值啊,咱说这叫K值是吧,那你可以写fragment,你写K,但是别的你写不了对吧?哎,那这个就是fragment,就是文档碎片。啊,最终呢,这个层级一定会丢掉的,不再渲染真实盗墓了,来,就这回事儿,嗯,那这一小节呢,停一下。
我来说两句