00:00
好嘞,各位,我们继续那固定的套路,还得是是吧,来到这个终端里边,把脚手架停掉,SRCCTRLCCTRLV右键改名叫做零九_src下划线啊NAV navy link的使用好,那在这呢,我们继续往下说啊,那同学啊,你观察一下你觉不觉得,如果说在你的页面上有很多的导航链接,那你就要写出很多这种代码,对吗?同学们,你观察一下红色框的代码,你觉不觉得里边重复性的东西比较多,你就比如说我这个应用里边要求所有的导航都是这种深橙色背景,白色文字,那就意味着你得告诉所有的navy link,你都得加上这个东西。是吧,由于你写布局的时候,每个人都有一样的你写布局时候的类名,那我问你同学,就红色框这两段,只要是个navy link,是不是都得写这两段,那你觉没觉得?同学当你的导航项特别多的时候,你觉不觉得代码有很大的优化空间是吧?你不能一直把这些都一样的东西写在这儿啊,是吧?我只需要写什么呢?我只需要写不一样的,好,那怎么办呢?给大家说个东西,就是我要封装一下navy linkc,哎,那怎么封装呢?非常简单啊,同学,就是如果你不封装,那人家只能是这写一遍,这写一遍,如果出现同样的,这不还得写吗?那如果你封装一下,诶,同学,它就变得非常好用了,哎,不用你再一遍一遍一遍传这些东西了,哎,那怎么做呢?同学,我是这么设计的,我想定义一个组件叫做my nay啊,为了跟这个navy link做区分,所以说我叫做my NAV link。
01:54
哎,就如果说以后你想用路由链接的时候,你别写navli,你写my nali啊,哎,就模仿他这个来是吧,哎然后这里边呢,你写比如说叫做test,你这只需要写不一样的东西就可以了,你只写to去哪儿啊,Test啊就行了,哎就这么写。
02:22
说老师那公共的东西,公共的东西就都不用写了,我都封装在my nay里了,也就是说对于写业应用来说,My navy link更符合我的口味,因为my navy link里边写好了这些固定的内容,省着我再用navy link一遍一遍写了,是吧?好了,同学,那你说。My navy link我是不是自己写的组件标签在用啊,那你就告诉我my navy link属于啥组件,想好了再说,路由组件还是一般组件,路由组件你得这么写,这叫路由一般组件是你自己亲自写的标签,这才叫一般组件,所以说你告诉我同学们my navy link啥组件呀?嗯,是不是叫做一般组件?那所以说呢,现在这行我得删下去,因为我还没有my navy link,一会会报错的,那所以说来在这儿啊,折叠起来一般组件就得放在这儿,新建一个组件叫做my navy link啊hier,折叠起来,右键新建index.js叉来走着RC,给它起个名字叫做my navy link,好嘞。
03:30
啊,写好了这个啊,My name link说老师在这里边写啥呢?啊,那假设说啊,同学这里边我写一个。H2啊,标题叫做哈哈啊好,我定没定义一个一般组件my link定义了啊,那用一下呗,我们试试啊,那在上方呢,引入import my NAV link,哎,From当前目录下的components,下的my na,嗯,然后呢,就把它往这儿写走,哎,好嘞,同学,那启动一下脚手架,我们看一下效果啊。
04:18
稍等,等着他打开浏览器。好,那你看,诶,是不是就在这了呀?啊,但这不是我的目的,我的my navy link可不想写,哈哈,这种东西我的my navy link里边最终给我返回的得是实实在在的navy link,对吗?也就是说同学,这个navy是我们没有办法分分钟就写出来的,这个navy link呢,是这个库给我们提供的一个特别核心的东西,我们是没有办法轻松实现的,同学你要也能轻松实现这个,你要也能轻松实现这个,甚至你还能轻松实现react,那咱就是吧,哎,所以说咱们得用navy link,也就是说同学你要想写那种带有高亮效果的路由链接,你离不开navy link,纵使你写了my NAV link,你的my navy link里边是不是也得用上navyli呀?那所以说在这走,哎,From哪呢,是react RO gun do,里边的谁呀?Navy link对吗?
05:25
引入啊,那来我是不是得复制一个NAV link过来啊,好嘞,那就把它写在这儿。哎,引入navy link了,这我用了,说老师,那你这不是投机取巧吗?我还以为你自己要写一个navy实现呢,那弄了半天你的my navy link里边也是用了nali呀,同学啊,是对navyli的一个二次封装,知道吧,啥叫二次封装?人家写好了也能用,不是不能用,但是不符合我的口味啊,代码冗余量太大,所以说我想精简一点,封装一个自己独有的是吧?哎,就这么写好了,同学,那你说只要渲染my na link,它里边是不是就返回这么一堆东西啊,那是不是就意味着我这也不用写这了,也不用写这了,我搞俩my na link是不是就得了呀?嗯,那试试吧,回到代码里,哎呀,同学。
06:15
它咋一样了呢?嗯,它咋都叫about了呢?你瞧这一点还都亮了啊,展示吧,这这啥情况呀,同学们你想吗?你在APP里边来,我问你,你渲染了几次my navy link,你就告诉我渲染了几次两次,那my NAV link你这里边是不是都写死了呀?啊兄弟,我就问你个事,你是不是都写死了呀?啊是,你这确实应该写死,因为大家都一样,你这确实写死,大家都一样,这不能写死吧。这不能写四吧?哎,对,所以说同学这个to啊,是不是得动态的传过来,那咋传呢?该怎么传就怎么传,写着to,哎,去哪啊,Got about,嗯,那这写to,嗯,去哪儿啊,Go home,对吧?哎,那同学就要求你在这儿,你看你给没给my na link传递pros传了,那我问你这接不接呀,接咋接呢?结构赋值直接就接了this.pro能拿到谁呀?嗯,能拿到to吧,好,那你这to就不能写四,那咋写就这么写呗,Two是不是就可以了呢?哎,来,我们瞧一下效果啊,走着,嘿,说老师怎么还都叫about呢?再回头看,你这不写死的是about吗?对不?哎,好,回头啊,看着,但是点的时候它是好使的,因为它的to不一样,对不?你点击第一个about是about内容,你点击这个呢?哎,是不是home同学我问你。
07:45
是不是能完成这切换了啊,而且你回到代码当中,你看你写的是不是,哎,是不是挺经典,但是现在面临一个最大的问题就是这儿啊,你没法写了。是吧,同学。哎,这怎么办呢?我怎么能让这个标签里的内容,其实同学你可以用这种办法来,你能带to,难道你就不能多带一个title吗?这title叫啥?About,这抬头叫啥?Home,能不能带过去?凭啥不能呢?这是不是抬头?哎,那这呢,走是不是抬头?
08:21
缩进调一下,那这不就截了吗?接过来我说用啊,那你瞧一下来是不是可以了,那你说以后编码的时候你写my na link多省心啊,你只要用了my nay link,它就自动拥有了这个高亮的样式类名,就自动有了这个类名,你说对吧?哎,这多舒服呀啊,但是啊,同学,写到这儿,虽然我们完成了这个封装,但是呢,有一个小小细节上的问题还想再跟大家提一下,同学,那我想问一下啊,假设说我的my navy link里边需要传七个标签属性。啊,应该说七组是吧,哎,我要传七组,那你说是不是就意味着,比如说我这传一个A等于一,我又传了一个B呢,等于二,我又传了一个C呢,等于三,同学我是不是传了这么多,也就是说我多传了ABC,那你说你在这儿呢,来吧,兄弟是吧,然后B,然后CA对吗?然后咋办呀,那就接着在这里边写呗,哎呀A是吧,完了等于,哎呀划括号完了A完再写B等于同学你觉不觉得这代码也不少呀,怎么能批量的就给它传过来呢?那怎么办呢?
09:35
啊,很简单,同学,我不管你这传了多少,是不是都收集到这个对象里边来了,是不是叫做pro。那你说我是不是可以这样做一下呢?就是在这个里边,你别一个一个写,你写to,你写什么什么的,你是不是可以这么写来,叫做点点点this.props啥意思呀?你收到的pros本身是不是就是一个对象,用点点点一个对象在react里边,是不是把对象展开了,然后一个一个传给na link呀。
10:11
哎,你这样写觉不觉得很高级啊?那我问大家ABC是不是也可以不接收了?To是不是也可以不接收了?那你理性的分析一下这个问题,对于第一个my na link头传了几组,一组,两组,三组,四组、五组,那是不是都在这个对象里呢?是不是五组KY6,那我到这喷五组是不是都放在这儿了?这不就结了吗?这不就都传过去了吗?对不对,哎。好,那你说对于第二个呢,我传了to,我传了title是吧,那这呢,你首先title是得这么接,但是这个to你是不是可以利用点点点Z加props是不是都带过来了啊,验证一下它好不好用,肯定是没问题的,走走走走是不是也可以啊,好,那同学你说现在就有一个人特别不和谐,谁呢抬还得这么接,还得这么放,说老师呢,也就只能这样了吧,并不是同学接下来的东西呢,就很神奇了,来看着啊,我在最上方的同学,我给你consolo一下this.props我问一下my na link这个组件我用了几次,两次,因为我写了两次组件标签对不对?所以说同学它的render调几次,是不是得调两次?哎,你每写一个组件标签都会对应一个组件实例,然后通过组件实例调用render给你东西对不对,好了同学,那不出意外的话。
11:28
我问你啊。To title ABC是不是第一次传,那也就是一会儿你会在这看到谁呢?To title ABC的值对不对?那么第二次呢,我只传了to和title,那所以说这呢,只能看到什么呢?这个to和title就没有ABC了,对不对?好了,那我们一起来观察一下,回到控制台里面刷新同学,正如你所见,传不传to传了,传没抬跳传了ABC传没传,传了啊,那这呢,没传ABC呗,是吧,好。那同学啊,你想一个问题,要是这样写的话,你看你的my navy link怎么写的,你注意观察你的my navy link怎么写的?同学,人家之前那个NAV link好像没记错的话,是这么写的吧,Navy,然后link,人家不是自闭合的标签,人家有开始标签,结束标签完了,人家里边写一个about。同学,你觉不觉得这么写特别让人舒服对吧?就知道我这个标签,诶,里边的内容就是about about不属于标签体内容吗?你瞧开始标签,你瞧结束标签,里边是什么标签体内容对吧?好同学,你的MAGNE如果要是这么设计,得靠title去指定里边的值,你觉没觉得写起来就不是那么方便?
12:38
也就是说,你得完全模拟navy link去做一个最极致的体验,就是你那个标签名根本就不在这儿配置。NAV link的to是不是写在这里的,你也写在这里,但是navy那个link的名是不是写在这儿的呀?那所以说你最起码呢,得跟人家保持一致,这才这才叫做一个优秀的封装,那所以说呢,这儿把它拿过来,这就不能自结束了啊,那这儿呢,也不能让它自结束了,对吧,你点我去哪啊,取home,那你这呢来my neli,这就得是结束标签同学,我问一下这种写法,把标签名作为标签体写在这儿,什么叫做标签体?
13:23
这是开始标签,这是结束标签,中间夹着的蓝色区域就叫做标签体内容,对吗?同学说,老师那橙色区域的叫啥来着?橙色区域的叫标签属性,这叫标签体内容,对吗?一个最棒的体验就是人家navy link怎么指定那个名字,你也怎么指定,你得有开始标签,你有结束标签,但是我想问大家,你说我这么一传就有事儿了,怎么的呢?如果要说这些东西咱学过,怎么接呀?是不是都在那个pro身上呢?但是同学咱学过如何接收标签体内容吗?
14:01
回想一下,咱一直都说pros本身有个意思,就叫做属性,所说这些东西都算作标签属性,所以说这些东西都可以称之为pro,但是这玩意是啥?咱说叫标签体,我问一下标签体你咋记?你给没给my navy link组件传递标签体内容?传了传没传标签属性?传了标签属性谁都会接props,主要是标签体内容咋接?哎呀,说老师也是啊,咱之前传递的时候是吧,说那props咱们写的好像都是闭合标签,直接传递的都是标签属性,咱也没传过标签体内容啊,那同学你听我说一句话,标签体内容也是一个特殊的标签属性。就是你这个about其实算作一个特殊的标签属性,它也能帮你收集,我们一起看一下,同学,通过标签题指定的about对吗?通过标签题指定的home对吗?好,那这个时候回到页面,你看效果,同学我给你刷新一下啊,走,说老师这咋没了呢?没了正常,因为我还没写完的嘛,同学你看一下啊,你其实是能拿到那个about的,你也是能拿到那个home的,但你发现他们的key呢,人家都给你写好了,那个key叫什么呀?叫children。
15:26
知道吧,这些ABC还有two是不是都是属于标签属性props里边的key呀?那我问你,Two也好,A也好,B也好,C也好,是不是都是你自己指定的key,但是这个为什么你就没有自己指定key呢?为什么人家写死了叫children呢?因为在你的代码里边是通过标签题把about带过去的,对吧?你要直接自己写的标签属性pros,你是可以写K等于Y6的,但是在这你觉没觉得你只有机会写VALUE6。那么那个key呢,人家帮你起好了,毕竟是标签里边的内容,所以说人家给你收集到children上了,所以说同学们不要再说标签体我们收不到了,能不能能标签体内容也是一种特殊的标签属性,一样可以通过谁呢?来回到这个many里边,一样可以通过this.props去收集,那同学我问一下,我还需要用这种形式拿到title了吗?那就不需要了,对吧?啊,说老师,那你这么一拿就说白了,你拿到什么了呢?你不仅拿到所谓的标签属性了,其实你还拿到标签体内容了,对吧?那个body里边的那些东西,说老师那就都拿到了呗。啊老师,那明白了,我这呢就不写title了,我这就这么写this.pro.children刚才我看见吗?老师那个名字在this.pro.children身上呢,老师,我这么写不就得了吗?那你看一下呗,你这么写确实可以,你看好不好home是吧,但是麻烦咋就麻烦了呢,同学我。
16:56
想问你啊,这是navy link开始标签对吗?这是navy link结束标签对吗?那么navy link里边现在蓝色框里的是不是navy link的标签体内容?标签体内容是不是有一个特殊的标签属性?
17:11
那特殊的标签属性是哪个属性呢?就是那个children对吗?啊,那同学我想问一下,当我写一个标签的时候,我不写标签体内容,我直接在里边写尺准那个属性,就写这个属性,我问一下能不能指定标签的值呢?也就是说标签里边所展示的东西呢,是完全可以的啊,给大家验证一下啊,你比如说你比如说啊,我这儿呢,根本不用我所写的这些什么my navyli,我就正常写navyli啊,Nali n NAV nayli走,然后正常呢,我写一个about对吧,我就先正常的写,然后呢,我写一个to是吧?哎,然后去哪呢?杠,About,好,你回头来这看about是不是能出来,朱老师,样式怎么丢了,因为你这一点样式也没写嘛,那如果你真想写也行,同学,就这一堆东西呗,咱给它复制,然后来到这儿,是不是走保存是吧,来了about同学,为啥能出现about?
18:12
呢,因为你这写的是about,对不对?但是接下来你看着nali,我让它自闭合没有标签体,说老师那没有标签体,那不就是没有,那没有标签体怎么展示about吗?同学,标签题也是一个特殊的标签属性,直接写children准这走起叫做about,来回头刷新看效果有没有,也有吧,哎,所以说不一定非得要写这个标签体,你把标签体内容配在children这个标签属性中也是可以的,那所以说接下来你知道怎么做了,来到MYNE里边,同学我问一下,还非得写开始标签结束标签吗?非要写标签题吗?根本不用,同学这就删了,这就自结束,你这点点点,这一下子不仅把你写的to title ABC咋的带过去了,你同时把一个你看不见的人,人家帮你收集好的来,Children怎么样,是不是也带过来了呀,哎,所以说你这么一写就更简单了呀,啊,那我把这个注掉,我不删除。
19:12
是吧?来,回到这儿刷新,你看这些东西也是好用的,那这么写的优势就在于以后我想写东西的时候啊,我想写路由链接的时候,我就直接用上我封装的my nayli即可,它就拥有了我所想要的这种样式,对不对?哎,OK,那这一小节呢,我们停一下,就是封装一下my name link,在这一小节我们学到的东西就是标签体内容是一个特殊的标签属性,嗯,好嘞,那么这小节呢,我们停一下。
我来说两句