00:00
好嘞,各位,那刚刚呢,我们就哎学了一下陆游的一个最最基本的使用啊,当然只是冰山一角,还有很多地方呢,需要完善啊,我们慢慢来啊,回到代码当中,把刚才所写的东西给大家形成了一个笔记,我们一起读一下同学路由的基本使用中,我们要注意这么几个问题,一、明确好界面中的导航区和展示区,对吧?必须得找到这两个区你才能写下去。导航区的A标签改为谁呀?Link标签,那么link,诶写好了,To去哪儿啊,这随便写一个啊名字对吧?然后展示区呢,要写路由标签,哎,叫做road标签,进行路由的匹配,你是什么路径,我就给你看什么组件对不对?注意C不要大写,APP的最外侧要包一个BRO,或者是一个哈希RO,是不是就是刚才我所写的东西啊?好,不急,我们说一个细节上的问题,关掉同学,回到你的APP组件当中,我问一下原生代码里边啊。
01:00
咱们是不是用A标签实现页面的跳转呀?那么在路由里边是不是用link标签实现组件的切换呀?同学问一下啊,浏览器认识link吗?同学啊,肯定不认识,Link是react里边的一个东西,对吧?你最终这个代码要交给浏览器运行,肯定得把link变成浏览器所认识的某种标签,对吗?那么问题是变成了什么呢?我们看一下,回到页面看效果,右键检查,你不难发现,其实你所写的那两个link呀,他也给你转成A标签了,而且把你写的那个to去哪儿写在了HRA这个属性里,然后呢,他写了一些监听,写了一些监测,哎,就能够达到A标签不去真正的跳转页面,而是触发组件的展示。OK,这是一个细节上的问题,关掉。还有一个细节上的问题,就是我们之前在index里边同学们,我是不是直接用了browse ror。啊,我说有两个,一个叫RO,一个叫做哈希RO,有两种路由是吧,然后我而且我也说了这个browsero呢,就对应咱之前那个brotherer history,那么这个哈希roer呢,对应的就是咱们之前所讲的那个create哈希history对吗?那我们呢,试一下同学不能光一直用这个呀,我们切成哈希的这个试一下啊哈希肉走放在这儿,那这样我重新呢,打开一下咱的这个页面来,你看一下效果,同学你注意观察啊。
02:29
这个呢,是之前我写的正常的browse ror,没有井号对吗?这个呢是哈希RO,你发现一上来是不是就加上井号了,你点about,你点home,你所谓的杠home,杠about,其实都是在这个井号的后边,对吗?同学,井号后边的是什么值啊?其实官方点说井号后边的东西呢,属于哈希值啊同学,如果我要不说哈希值,我说另外一个叫锚点值,你就明白了是吧?但是锚点值呢,说的不是那么标准,应该叫哈希值啊,特点就是井号后边的东西都不会作为资源发送给服务器的,你比如说同学你这儿写了一个啊local house的,比如说5000吧,同学,有台服务器啊,说5000啊,然后呢,一旦在你的路径里面出现了井号,那么井号后边的东西无论你写多少,它都不作为,哎,一些资源去发给服务器了,明白不?井号后边的东西人家认为都属于前台资源,是不会带给服务器的。
03:29
啊,当然现在我们还涉及不到来说把东西带给服务器啊会怎样,对吧,只是说跟大家说一下,而且呢,同学你先不用过深的去研究哈希roer和bro都有哪些区别,你等我把路由之间参数的传递都讲完了,给大家来一个总结,我们对比一下哈希ER和BRO都有哪些区别好吗?目前你只需要知道加了哈希RO呢,诶,地址里边出现一个井号啊,井号后边呢,都不会作为资源去发送给服务器就可以了。哎,好,那回到代码当中,我要执行一个固定的套路,脚手架呢,停掉,诶把这个也关掉,SRCCTRLCCTRLV,改个名,同学叫零八,然后呢,下划线,Src叫路由的基本使用,这个里边有很多的东西需要完善,我没写的那么完善,虽然效果出来了,同学,咱就说一个吧,我问你点的时候他咋没高亮呢,对吧,都需要我们慢慢去做的好吗?哎,路由的基本使用,那我给这儿呢,也给他改一下啊同学咱暂。
04:29
池啊,先不用这个哈希RO,咱先用这个BRO,哎,复制走哎,因为用BRO你看起来能舒服一点嘛,对吧?哎,折叠起来,同学,这个路由的基本使用一定会匹配一个路由的基本使用点儿,然后写上MP4,哎,就是一个录屏啊,一个src肯定是对应一个录屏的啊,然后呢,我们再往下,接下来接着写啊,那同学我先不做这个高亮显示那个效果,说老师点about about就亮,点home home就亮,那玩意简单,接下来呢,跟大家说两个概念啊,哪两个概念呢,一个叫做路由组件。
05:08
一个叫做一般组件,组件是有分类的啊,首先说说啊,它们的定义呢,都是怎么个样子,同学看这啊,About和home啊都是组件对吗?所以说我们很自然的呀,就放在components这个标签里了,那其实你这样做呢,是不符合一些规范的,为什么呢?因为about home是组件不假,但是啊,他们是路由组件。哎,说老师,那什么是路由组件呢?来,回到APP中,我们慢慢看啊同学走,你在最上方是不是引入了home呀,是不是引入了about呀?那我想问大家的是,同学,我写出这种代码了吗?Home,我写这么这么写代码了吗?没有吧,同学,这是你引入的home组件,这是程序员自己亲自去写组件标签,是不是渲染组件,你像这种组件那就属于什么呢?一般组件。
06:09
明白不,这就是一般组件,但是home不是这么写的,我没有写home组件标签,说老师那你写了,我写了这么一个东西对吗?哎,我这确实写home了,但是我写的一再强调可不是这玩意儿,我要这么写,同学,Home就是一般组件,就正常定义啊,然后你正常写组件标签使用,但是我的home是靠路由进行匹配,如果匹配上了。哎,然后再给我展示这个home,也就是说你虽然没有写home组件标签,但是人家路由匹配上了之后也会给你展示home的,所以说你没这么写,是靠路由匹配完了展示的,靠路由匹配完了展示的about,那么它俩就应该叫做路由组件,OK,路由组件同学就不应该放在components里边,按照标准来说,它应该放在另外一个文件夹里,叫做pages,说老师听你的意思,那刚才咱写的不标准,那可不啊,慢慢来吗?你这要是改掉的话,同学我问你APP里边这个引入的地址是不是也得改,这得改成什么呢?Pages,这得改成什么呢?Pages,对吧?哎,这回我再启动一下,你看看有没有问题啊,其实就是换了一个文件夹的名同学啊,只是说我们尽可能的想把东西写的标准一点,同学我问一下,我这就不想叫做pages,我就想叫做小猪佩奇,那同学我问你一下也没事吧。
07:35
啊,只要这个路径你写了,你这儿跟它对应上不就得了吗?但是标准化的工程化开发一般叫做pages OK,回头你看东西,诶,一点一点也是有效果的,为什么有井号啊,因为我这儿呢用了哈西roer对不对,我先改回来,同学,咱先用这个b roer,嗯,走好,因为我要不用Bo roor了,那接下来有一个坑呢,在下一小节我就演示不出来了,好吧,哎,现在用Bo ror,首先对于你来说觉得看起来舒服,因为你点开,你看没有井号,点谁就是谁对不对?好啊,说老师那什么叫一般组件呢?来同学,我刻意给你写一个一般组件啊,一般组件是不是放在这里边,说那谁是一般组件呢?我写完你马上就明白了,同学,你看这个案例啊,顶部是不是有一个欢迎的文字啊,好,我们就把这个东西呢,给它抽成一个组件,这个组件叫做hier对吧?头部组件好了,来走起关掉,那怎么办?其实就是这句话。
08:35
带走它取而代之的是hier组件,你定义hier组件了吗?没有呢?呃,那在这定义走同学,Hier组件就不是路由组件,为啥呢?我写完你就明白了,右键新建index.ds叉rcc走改名叫hier,里边的东西呢?打这来是吧?关掉关掉来到APP里边同学,除了引入homework报的,还得引入谁呢?是不是hier走当前路径下的?哎,还是吗?不是,是components下的。
09:10
由于你的hier是你自自己啊亲自写的组件标签渲染的,所以说hier叫什么组件,一般组件,好了,在这写好注释啊,He DR hier是一般组件啊,那这我就写一个吧,是吧,哎,后呢是路由组件。复制这也粘过来叫about啊,说老师明白了,其实所谓的路由组件和一般组件啊,就是放在文件夹不同啊,一个是放在components里,一个是放在page里。啊说老师我知道还有一个区别啊,就是路由组件啊,得靠路由匹配啊,这儿呢,靠路由匹配完了决定渲染哪个,那一般组件呢,就是没有什么匹不匹配,我自己直接写标签,对,但是这两点都不是路由组件和一般组件最大的区别,虽然也是区别,但不是最大的区别,OK,周老师,那最大的区别在哪呢?你瞧一下啊,同学,我问一下这是不是我引入的hier组件啊,这是不是我亲自在写hier组件标签渲染hier啊,那我想问一下同学,Hier组件能接到什么pro?嗯,Hier组件能接到什么prop?
10:23
说老师那那你这啥也没传呀,对呀,我啥也没传呀,你啥也没传他就啥也收不到,那不信你瞧一下,打开components,找到hier,我是不是在render里边consolo,我输出一下就得了啊我输出什么呢?同学听我说叫做hier组件收到的pros是,那来吧,咋写this.props对吗?好嘞,回到页面呢,我们调一下效果,控制台上键啊来刷新,走刷新,同学,我问一下hier组件是不是展示到页面上了,对,那也就是意味着hier组件渲染了呗,啊,那渲染了就得掉render掉render是不是输出这句话来,Hi组件收到的pro是来由于你什么也没传,是不是就是空对象?好哎,那我要传一个呢,来呗,走着我传了一个A,等于一个数字,一回来瞧你传啥,我是不是就能收到啥,哎,OK,这就是一般组件,你不传他什么也收不到,但是啊,你可要记住了这个路由。
11:23
组件和一般组件最大的区别就是路由组件能收到一些东西,说老师路由组件,我看看我怎么写的,往下找啊,老师路由组件啊,Home是路由组件,那我看看我给home传啥东西了呀,同学,可惜了,你有写过这样代码吗?嗯,就这种代码,你有写过吗?没有。没有,所以说你只是说了路径,如果是这样,你就去帮我渲染路由啊,这个home组件对吧?谁帮你渲染的呀?路由器他在帮你渲染home的时候,他在帮你渲染这个路由组件,About的时候,他都给你传东西了啊说老师那我看一个,随便看一个就行,比如说我们就拿about举例,同学注意看啊,Colo还是那句话,我把这句话整个粘过来,来到这儿啊,空行删掉,叫做about组件收到的prop是this props,那你瞧一下啊,同学刷新老师为啥没输出那句话呢?为啥没输出啊,因为about组件还没有放到页面上呢,你没点路径就不变,不变就监测不到,所以说about组件也不能挂载,你点走起about组件就挂载了。同学瞪大你的眼睛看吧,来吧,同学,About组件收到的props是有没有有啊兄弟来吧,打开啊,那我们。
12:43
关注的是哪几个呢?是前三个,这前三个呢,是给我们程序员用的好同学,那所以说路由组件和一般组件一个最大的区别就是路由组件会收到路由器给传递的三个最重要的props信息,分别叫做history location match,说老师现在你是不是得给我讲讲他们三个都是干嘛用的呀?同学用的时候自然会说这三个人都得用,都是在接下来的每一个小节里边,每个小节用一点儿,每个小节用一点儿,所以说在这儿呢,我不想打开history sir瑞来吧兄弟,我一个一个给你说都是干嘛的,疯狂的记,等到用的时候还是忘,那所以说呢,同学来折叠起来啊,打开是吧,啊打开我把这些东西呢,一会儿我都给你复制一下啊,我把这东西留下好,那接下来呢,给大家写一个笔记,这个笔记呢,就特别适合呢,现场去给大家写啊,能让大家记住。好了,那录。
13:43
有组件的基本使用呢?其实呢,刚才也给大家整理好笔记了是吧?哎,明确好这个什么呢?导航区和展示区对不对?哎,导航区的A标签呢,要改为link,完了说点完这个你去哪儿?完了这个标签的名字,然后呢,展示区要写RO标签,你路径什么样?我给你看哪个组件APP的最外侧要包一个BRO或者是哈希roor,用于管理整个应用里的路由对不对?这些代码呢?呃,都简单这些注释对吧?我就简单给大家写了一下啊OK,来走同学,接下来呢,我再给你写笔记,这个笔记呢就比较重要了啊,是四走,那这个笔记叫做路由组件与一般组件,路由组件与谁呢?一般组件啊,提前把这些东西铺垫好,首先说说他俩的这么几个区别吧,同学,如果现在让你总结路由组件和一般组件的区别,你怎么总结呢?啊,我给大家写,其实就三点啊,来第一个叫做写法不同,哎,写好了叫做写法哎不同。
14:43
有哪些不同呢?咱说说一般组件怎么写,一般组件可简单了,比如说DEMO组件,就直接DEMO,直接写组件标签对吗?那咱再说说,诶路由组件这玩意儿怎么写?同学,你肯定得写root吧,哎,那所以说来到这儿呢,我把这个东西整个就给它粘过来就得了,CTRLC来到这个里边粘贴,那这呢最好让它叫做DEMO,然后我就给你看DEMO组件,OK,第一个小特点说完了,一写法不同,二呢啊,存放位置不同,存放位置不同啊,那么一般组件呀,啊,放在哪个文件夹里呢?是不是components,哎,那么路由组件呢?诶,中文的啊,路由组件呢,我们是放在page里的,对吧?这没什么再可说的了,最重要的区别就是在下方啊,就是接收到的props,接收到的谁呢?Props不同,来吧,同学。
15:43
啊,一个一个来先说一般组件啊,那就是写标签,或者说写组件标签时传递了什么就能哎收到什么,哎,这是一般组件,那咱再说说路由组件呢,同学,其实路由组件你是没有机会写它的组件标签的,那传递的是什么,都是靠路由器传进去的是吧?哎,那咱们就说接收到哎三个固定的属性,哎走,那这属性分别是同学,我不想一个一个敲,我想把整个这些内容你看好了啊,一直到这个match全拿过来,最后这一个我们不去关注啊,复制,然后来到这个里边,整体粘贴东西肯定是比较乱的是吧?接下来呢,我整理一下格式啊,我把history呢往前放,这些东西都是history里的,一直到哪儿呢?下划线,下划线proto。
16:43
因为你看这儿嘛,整个这个红色框里的东西都是historyy的啊,一直到这个下划线,下划线proto,当然这个东西我们不考虑啊,那不是原形嘛,是吧,所以说把它删掉,那整个这些东西都是哪的呢?诶,扯回来啊,都是history里的对吧?好了再来location,从这到这都是location的,当然最后一行呢,我要给它删掉,然后这些东西呢,哎,往里走走好,那这里边呢,还有一个叫做match,那从这到这儿呢,是属于match的,那这一行呢,咱也不要啊,然后整体呢,我给它来一个缩进啊走走好,接收到三个属性,分别是history location match,而且啊,你注意观察一个事儿,同学你看啊,这是不是history对象啊,里边是不是就有个location属性啊,注意观察location里面有什么,先不用管每一个都是干嘛的啊,慢慢来,Pass nameme search,哈西,State key,来,再往下看,你发。
17:43
见,这就有一个location,同学,我这个橙色框的location和history是不是同一个级别的,它俩是同一级的,那么这个location是属于history里的一个属性,但是你发现这个location里边也有来,你注意观察啊,Passme passme。
18:04
Search search,哈希哈希,State state key key啥意思?也就是说啊,同学他所维护的这东西吧,稍微呢,就繁琐了一点,history.location和直接拿location是一样的,那所以说在这儿呢,我就把这一行删下去吧,因为它没有什么太大存在的必要了,因为跟这是一样的嘛,对吧,好说老师,那这些就都留着呗,不是我只把我们编码的时候能用上的给你留下来,因为这里边同学咱得这么说,很多的东西,他不一定说我们用的是他底层在用的,OK,我把一些常用的呢,给大家留下来,首先其实前边这三个呢,我们基本上都不关注,Go留着,Go back留着,Go forward留着,其实同学如果你之前好好听了,我说前端路由的工作原理,就这几个,你猜都能猜到它是干嘛的,对吧?啊,Let's删掉listen,删掉啊,Push replace,留着同学。就这五个是我们特别。
19:04
常用的,然后location里呢,我把常用的给你留下啊,有这么几个pass nameme得留啊,Search得留,State得留,前边这两个呢,同学你没发现这个key,你每一次刷新这个key都是不同的,那是因为这个key呢,是它随机生成的,它随机生成的这些东西我们研究它干嘛呀?哎,所以说这删掉好了,那这个match里边呢,同学把一个人给它删掉就行了,就是这个is except这个其实是模糊匹配还是精准匹配的这么一个问题啊,一会儿我们会仔细讲到,就是这儿呢,我先不关注好了,同学,我给你留下来的都是干货,我给你留下来的这些东西我们都会用到啊,好,那就把这个呢留着来,同学,这一小节我们没说过多复杂的东西,就是说了一下,啥叫路由组件,啥叫一般组件?它们有什么相同点和不同点是吧?说老师相同点,你没说同学相同点,那要说起来就太多了,都是用类定义的,里边都得写render是吧?你就别别别说了,对吧,就说说不同的地方,这些东西一再强调。
20:04
现在不用去管它是干嘛的,不给你那么大的压力,就是路由组件能比一般组件多接收到,哎,三个东西,History location,还有match,对吧?嗯,好,那行,那这一小节呢,我们就停一下好。
我来说两句