00:00
好了,各位啊,总结完了github搜索这个案例之后呢,我们学习另外一个特别重要的概念,哎,但大家呢,别急,回到我们的代码当中,我做点准备性工作,Components里边放的是组件,对吧?那接下来我在写的案例里边没有list了,也没有search了,压根不是这案例了,所以说删掉,那写什么组件呢?一会儿再说APP里边是吧?哎,也给他准备好了,都是一个空的APP,那index里边的东西,诶,是不是压根就没动过呀?好了,再看这个啊,配置代理的,一会儿呢,我所写的案例也不发送网络请求,因为网络请求咱练的也差不多了,对不对?那所以说右键删掉,我也无需配置代理,我再检查一下package这点,Jason啊,滑到最下方,这也没有配置代理,OK,准备性工作做好了,你现在要是运行脚手架呀,那你看一下吧。走。稍等啊,它肯定是一个干干净净的页面,里边只展示了APP点点点对吧,别的没了,来看一眼控制台,也没报什么错误。好了,关掉脚手架,停掉,回到课件当中,同学们打起精神,我们要学一个特别重要的概念,叫做react的路由。恭喜大家已经来到第五章了。好吧,来,同学首先呢,不提路由这个概念啊,先说一个东西叫SPA。
01:24
以后呢,我们所写的应用,无论你学习react还是学习view啊,同学你所写的这种网页应用啊,其实它都叫做单页面应用,啥叫单页面啊,就是只有一个页面,所以说SPA呢,其实就是这些单词的首字母拼起来的,叫SPA是吧?哎,当然他没有把这个拼进来是吧?有些人呢,说这SPA的时候,其实也不说web了,就直接叫做single page application对吧?单页面应用你加一个YB倒是也行啊,好,单页面应用说老师不会这么low吧,这种单页面应用我记得是我在初期学习HTML的时候用的呀,就写一个点HTML,这就是一个单页面,然后里边也没做什么特别好的交互啊什么的,就是链布局,老师不会又回到那种了吧,不是,它可以完成特别好的交互啊,可以完成不同内容的切换,怎么实现的呢?你这段时间别考虑,我们再往下读你就知道了,好。
02:24
那么所谓的单页面应用,就是整个应用只有一个完整的页面,说老师,那哪些应用它有好多页面呢?当然有啊,同学来最小化课件,我们呢,回到这个里边,给大家的资件找到静态页面。这里边有一个root配置一,你先别管root那个单词是什么意思,反正先打开它对吗?或者说我直接用Vs code打开它可以吧,打开走同学,哎,这是一个没全屏的Vs code,我先把这关掉,这是一个没全屏的v code的,这是一个全屏的Vs code的,全屏的是我目前正在给你讲的东西,没有全屏,这个是哎临时的一个小插曲,我们临时打开的看点东西,对吗?同学,这就不属于单页面应用,这就属于多页面应用,你看它有几个点听M没是不是两个老师还有样式呢,没写啥高大上的样式,就是一个boattrap,全是用boattrap这个样式拖出来的是吧,不是自己亲手写的,来说老师,那我看一下这俩页面都写啥了,可以呀,右键选择live server打开,来我们一起瞧一下啊,同学你看啊,这就是这个页面,同学你打开的是哪个点atml,我问你哪个是不是home.atml啊好的。
03:44
好来,注意观察home这个选项卡是不是处于高亮的状态,那你说右侧展示的是不就是home的内容啊?好,那你说同学我要点about呢,是不是这块应该展示about的内容?同学,那我问一下你觉不觉得整个页面哈,这个是标题区域对吧?同学,我的速度慢一点,大家也跟好了,你明显感觉我这一小节的速度慢下来了,对不对?哎,慢点来,同学,这个可以理解为,哎,就整个页面一上来标题的那一部分是吧?同学,你觉不觉得橙色的区域属于导航区,觉不觉得蓝色的区域属于展示区?
04:24
红色区域呢,不跟任何人发生什么关系,就是一段写死的文字是吧?哎说老师react roor DEMO,先别看这名,咱就说看这种感觉,这种效果对不对?同学,橙色区域叫什么来着?导航区啊,蓝色的叫什么来着?哎,叫展示区,那你说整体页面的逻辑是不是理论上应该是这样的,你点击导航区里边不同的导航选项,那么就在展示区呢?给你展示出来不同的内容对不对?那同学我们看一下多页面是如何实现这效果的?同学,你看目前我在哪儿,是不是home.html啊,好,那你看着这回我点击about,你注意观察啊,我点击about,你观察哪呢?我还没点呢,首先你观察这个东西,你看它转不转,还有就是观察你看看他页面跳没跳,对吧?好了,一二三点走同学,明显发现页面是不是刷新了一下,整个页面是不是抖了一下。
05:24
这个东西刚才是不是转了一圈,还有就是这儿,同学我问你是不是已经来到另外一个页面了,哪个about.html所以说同学你看我频繁进行切换的时候,你观察左上角,其实呢,同学是不同的页面之间进行切换好吗?哎,确实在展示区呢,展示出来的不同的内容,但是啊,你这个代价有点大,怎么的呢?同学这完全是两个页面,也就是说对于about界面它有没有这个。有它有没有这导航区也有,他有没有这about有,那我点击about的时候,这个页面里面有没有这个有有没有这个有有没有这个也有,所以说同学这就是靠多个页面实现页面的跳转啊,早期的时候我们真的是这么写东西的,对吧?那你想嘛,你有这边有十个导航项,同学你最起码最起码你是不是得对应十个点HTML才可以,是不?哎,好,回到我们的课件当中,那我们如果用了react路由这个技术,我们的页面同学就只有一个,就只有一个。
06:33
说老师那不对啊,回到案例当中,那如果只有一个,我怎么能实现切换呢?对吧?老师得有多个页面,我点击home来到这页面,我点击about来到这页面,那这样的话才可以啊,是吧?别急,同学啊,我们可以用单页面也能实现这种切换的效果。所以说现在你应该理解的一个概念就是什么叫做单页面,简称只有一个完整的页面。哎,只有一个完整的页面,然后再读第三句话,点击页面中的链接,不会刷新页面,它只是做界面的局部更新,这一句话很重要哦,同学他说不会刷新页面,只是做界面的局部更新,什么意思呢?回到案例当中,目前我这个东西是一个非常典型的多页面应用,对不对?也没有应用上react里边的什么路由技术,同学打开这个Vs code的来,没有全屏的这个Vs code的,我问一下这是不是目前我在看这两个页面呀?同学们,你看这两个页面用上什么高大上的技术了吗?根本没有。同学就是俩页面完了,里边都引入这个点CSS对吧?那你看同学你打开about,你发现这有这个,这有这个,这有这个,这些结构是不是都一样?你看你切到home,同学来左边about,右边home我给你分个屏啊,我先放大一下,你看一下这边收起来,同学,那你觉不觉得这俩就至少啊about的钱。
07:59
14行和这儿的前14行你觉不觉得都是一样的,哎,所以说没必要这样写是吧,这样写太笨重了,OK,这就是多页面应用,然后回到我们的文档里,他说不会刷新页面,那目前同学我点这个会不会刷新页面呀,会不会会刷新页面,OK啊,那再往后读说如果你用了路由这个技术,哎,它就不会刷新整个页面了,也就是说页面呢,不再抖了,哎,你点击的时候,你注意观察这个选项卡,它不再抖了,而且这个东西呢,哎,它也不会再发生什么,哎,转圈啊,或者这些效果对吧,只是做界面的局部更新,那什么叫局部更新呢?我们说一下,如果你用了路由这个技术同学,那就是这样的,其实你打开的不叫home.html,也不叫about.html,你打开的呢,就是一个页面,就是你所写的那个index.html。
08:54
啊,那当然了,他这个index.atml不是在这体现的,它直接就写到这儿,对吧,你想想刚才你做那个搜索案例的时候,是不是只是写到这127.0.0.1,或者说local house的3000对不对,就没往下写,然后呢,只是一个页面,你点击的时候,同学啊,你比如说你点击的是about,它只是把这一部分内容替换成about的内容,然后呢,你点击home,它只是把这一部分的区域呢,换成home的内容,也就是说页面其实还是刚才那个页面,这些东西还有这些东西其实都是那个页面里边带的,然后呢,你点击about切换这个内容和点击home切换的这个内容,那都是不同的组件在展示。
09:40
哎,同学,我开始给大家说概念了,现在是你得靠about页面和home页面实现这个东西的改变,那后期如果你学了路由就是这样的,你点击about,其实我一直都是一个页面,只不过这我展示的是哪个组件了,你告诉我是about组件,哎,那我要是点击这个呢?好嘞,那在这儿呢,我展示的就是home组件,明白不?
10:03
哎,Home组件,好,那我们再往下读,第四步就是数据都需要通过adjust获取,并且在前端进行异步的展现,什么意思呢?同学你看啊,当你去切换这些页面的时候,目前我这是一个多页面的,所以说你看同学它每一次刷新是不是都是在发请求,对吧?哎,你,你给我about,你再给我home,对吧,每一次点击都是发请求,但是如果我们应用上的路由技术呢,那就变成这样了,你点击about,同学它只是把about组件展示到这儿了,别的事儿呢,他不管,如果说about里边你想展示一些服务器那边的数据,那你就需要在这个about组件component did mount的时候呢,发送一个请求去联系服务器,让服务器呢把数据给你,诶就做展示了,明白不?所以说同学们,单页面应用才是我们追求的一个极致的体验,页面不刷新,点击的时候只是动态切换。展示区里的那。
11:03
内容再次强调,这叫做导航区,这叫做展示区,OK,好,那大家呢,就对SPA呢有了一定的认识,所以说同学你说我总结一句话,看看大家认不认可这说法啊,我开发的SPA应用啊,确实是单页面,哎,我写个单,我再写个页,意思就是确实是单页面的,但是同学们它是多什么的,你告诉我页面确实是单的,但是我切换about有about组件,我切换home有home组件,所以说单页面多组件,对吗?同学,哎,如果说单页面组件也是单的,那你这应用可挺low,对不对?那同学你回想一下,就咱之前写的那些案例,我回到咱们讲的这个,哎,主工程里边啊,那同学你看一下啊,如果说呢,现在我把这个呢,给它重命名一下,你比如说叫做S啊,我撤回来啊,得把这个改个名,你比如说叫做SC。
12:03
D呢,零完这个呢,我给他改一个名啊,好像我没停对吧?啊我停了呀,嗯,那可能他还不让改,那我关掉是吧,然后呢,回到这个桌面上走,然后呢,来到这儿Vs code打开诶。走,我想给你演示一下啊,你看这儿src,我让它叫做src,零这儿呢,我给它改名,因为我想运行它嘛,我叫src,好了,那你瞧着啊,同学,就刚刚我们开发的那些应用啊,什么hello react呀,Todo list呀,Github搜索呀,这些都属于什么呢?没有任何导航区和展示区的这个项目,你比如说同学这儿,你看就这么一个功能,说你输入搜索用户完,我在这儿怎么地?同学有出现导航区吗?有出现展示区吗?没有,哎,所以说你之前开发那些是不带导航切换的应用,那么等到大家到了工作岗位上,你发现其实呢,很多的应用都带有导航切换,那导航切换难不成自己写傻傻的写这些页面切换,不是的,单页面多组件,好吧,同学,哎,OK,那么再往下,刚刚我所说的呢,是对SPA的理解啊,那我们这小节先停一下吧。只是说对SPA有。
13:19
有了一个理解,好吧,嗯,这小节停一下。
我来说两句