00:00
节课我们自己封装了啊,Never link啊,把笔记给大家整理一下,放到了这个笔记里面。好,这个删掉啊。接着看一看上节课主要涉及的一些啊知识点。首先是哎,第1.nelink可以实现路由的一个高量啊,这个是呃,上上节那个内容对吧,那通过这个active卡name可以指定这个央视名,它默认的是这个active,是不是我们可以通过这个属性来指定我们自定义的一个样式名,还有就是标签体内容是一个特殊的标签属性。它可以作为这个啊标签属性诶传给组件的purpose,然后通过这个this.purpose.children可以啊,在组件中获取组件标签体,它的这个内容啊,这也是我们呃封装自己的这个na link所使用的一个啊特性,就是利用的它这么一个特性。好,这节课我们讲一下一个新的一个内容,在讲之前先把代码整理一下啊,同样的啊,把这个给删掉。
01:04
删掉之后我复制一份这个啊,改一下这个零四。来复制一下它啊,还是粘贴到这个里面改一下零四,那这节课我们要说的是一个什么内容呢?是一个。啊。维啊。先把名字放这啊,等会给大家说这是做什么用的。同样这个先结束掉,回到上一层零四里面。因为我们。复制了这个代码,并且把它所需要的依赖给删了,所以还是需要去安装一下。因为之前有些,呃,这个文件的准备是我提前准备好,给大家直接就来讲,然后后面的话会让大家更清晰一点,然后我会把这个我准备这个例子的过程给大家演示一下。嗯。等他安装完成之后啊。
02:01
我们来运行看一看。现在先来看一看这个代码,他马上装完了。看一看什么呢?看一看这个f.G这里面。我们来看一个问题啊。我们之前在说这里我们注册了啊编写了这个路由链接,那这里是注册的这个路由,当我们去点击啊这个路由链接的时候,它会匹配我们这里注册的路由这个路径,从而给我们展示不同的这个路由,对吧?啊展示不同的组件啊匹配不同的这个路径。啊,展示不同的这个组件,那接下来我们来看一个什么问题呢,就是说。我这里还有一个about,但是那我去匹配的这个组件就是这个test啊,当然没有这个test是吧,没有test呢,我去复制一份。复这份这个about,然后把它改成test,先把这个准备好之后我们再来说。我们要解决的是什么一个问题啊,好,这里改成test。
03:05
那这里从啊这里去复制一下。Test。好准备工作就完成了,那我们要看的是什么问题呢?啊,我们说了啊,在匹配到这个路径的时候,会给我们展示对应的一个组件,对吧,但是这里。有一个about,这里有一个about,他们展示的组件不同,那接下来我们来想一想,如果我点击了这个about,它是给我优先展示这个,还是说啊,后面的会覆盖前面的,哎,优先展示后面这个,还是说他们,哎两个都展示,大家想一想啊。我们来运行一下看效果。看一下效果,大家就知道它是怎么样的一个机制了。啊,等它啊刷新完成。啊,现在我处的是这个home对不对,好,接下来我开始点这个about,大家看一看是什么样的一个效果啊。
04:02
诶,你会发现他们两个都展示了对吧。那说明什么问题,说明在诶这个路由它去匹配这个路径的时候,他匹配到一个给我们展示一个,匹配到一个给我们展示一个,也就是说它即使是已经匹配到了这个about,它并不会停止,会继续向下匹配,那这就出现问题,假如我们注册的这个路由非常多啊,假如有这么啊几十个啊几十个。好。嗯,几十个什么呢,我先把它撤回呀,比如说是几十个啊,这种A啊,我们匹配的A,展示的A。好。这时候我们点了这个about之后,它并不会立即停驶,它继续往下找,找找找,哎,又找到它继续显示,对吧,这就会存在一个什么问题,会存在一个效率的一个问题。这里还只是比较少,那假如你有,呃,比如说上百个都有可能的,对不对?哎,这就会存在一个效率问题,我们想要做的是一个什么效果,就是当你匹配到这个about之后,就立马停止,下面就不要执行了。而且我们来想想,一般我们对应的啊,一个路径的话,一般就是对应一个组件,我们在放到以前我们写页面的时候,就是说一个链接,我们一般去展示一个页面是吧,那我们放到这里的时候也是哎这么个意思,就是说我一个哎路由去匹配一个组件。
05:15
啊,但是现在肯定是不可以的啊,他会继续往下去找。那这时候怎么办,我先把这个删了啊,这时候我们要借助于什么呢?借助于一个。其他的一个东西叫什么呢?叫这个。Switch啊,借助于这个Switch也是这个,呃,React uor里面的这个维奇呢。我把这几个给包裹到这个Switch里面。那被包裹到维器里面的这些注册的这个路由。他只会匹配一次,也就是当他匹配到它之后,后面呢,就不会再去匹配了,哎,这时候我们来看一下效果。
06:00
来,是不是那个test没了,那我把这个删掉,我从这个首页开始去看,哎,点home是home的对不对,点about就是about,它并没有去给我展示这个test相关的这个内容吧,他只要匹配到它后面就不再去执行了,哎,这样我们就可以解决刚才说的这个啊效率的问题。啊,好的,那这节课就主要对这个呃思维奇进行一些呃使用。在注册路由的时候,哎,我们有必要去加上一个思维器,让它匹配到这个路径之后啊,立刻渲染指定的这个组件,其他的就不用再去匹配了,那这节课先到这里。
我来说两句