00:00
好,同学们,我们讲第二个扩展,第二个扩展呢,叫做lazy load啊,建明之意对吧,叫懒加载,一般在react的项目当中,如果呀,你的项目特别大,组件特别多,懒加载这件事儿呢,是一定要做的,什么叫懒加载啊,用的时候我在加载你,如果你不用,我压根都不加载你,就是这么回事儿啊,回到我们现在的这个代码当中,我新建一个文件夹啊,叫做二_lazy load加载啊,懒加载新建一个组件啊,index.js叉。在react应用当中,同学做懒加载最多的就是路由组件的懒加载。同学回想一下,我们之前讲路由的时候呀,说组件有两种划分,一种叫做一般组件,一种是不是叫做路由组件呀,那么这样啊,同学我不想在这儿呢现场哎,就开始写了很长时间的代码,给你弄出来一个路由,然后再开始给你讲,我们把之前讲的那个路由相关的那个案例啊,往这儿搬过来一下。
01:08
啊,首先我做第一件事儿啊,我得安装一个库,那叫做react roor-do,对吧,因为我要用路由嘛,一样ad react-RO-do,把这个库安装上。他慢慢安装它的,我把咱们呢,讲路由的时候,各位咱写那案例呢,给它搬过来,最小化回到咱们这个dating是吧,哎,右键用一个新的Vs code去打开。这是我们之前的工程啊,我不给它全屏,我让它,诶这个小窗口让大家知道,诶来我们打开哪儿呢?有一个叫做路由的基本使用是不是在这儿啊,那我把这里的APP拿过来,这里的APP其实就相当于是容纳路由组件的一个主组件啊,那我们就把这个拿回来,我把整个这里边这些结构呀,呃,那这样吧,同学我全选,然后复制。
02:07
啊,这是旧的工程来到新的工程里边,这不是新建了一个这个吗?那我就把它粘过来啊,往上滑,这组建呢,我也不叫APP了,同学咱说了就叫这个叫DEMO组件,好,那你这里边肯定得引入什么link呀,Root什么的,对不对,那这个库呢,我已经也下载了,那这react本身也就有了,那所以说这个路径我调一下,同学不得展示什么我是home组件,我是组件嘛,那我就新建一个啊文件夹,Home组件我们准备好,那再来一个about组件我们准备好。啊,那home组件和about组件里的内容呢?我先把文件建好啊,index.js叉,index.js叉里边肯定得写东西的啊,RC,我就简单写一个啊,写一个HR标题吧,叫做我是about组件,那就得把这个名字改一下,叫做about好了。
03:02
写完了,那再回到这个home里边,也是这一堆东西复制来到这粘贴,只不过这改一下名叫home,呃,把这个复制说我是home组件好了,两个路由组件呀,都准备完了,一个叫about,一个叫home,那这儿呢,啊,开始写一写呗,这就不能是components了,是当前路径下的,是当前路径下的about,你说对吧?各位啊,那里边这些呀,我们也不用再写这注释了,是吧?哎,说原声怎么办?那这里怎么办?那这儿呢,同学,我不想用link,我想用nali。啊,让它看起来呢,是有一个诶效果的啊,有高亮效果,那叫nevilink nevilink好,那这会儿呢,诶那就注册路由呗,是吧?哎,如果你的路径是杠about,我就给你看about是吧,你在这儿呢,就能实现路径的切换啊那我们一起看一下啊,折叠起来回到APP里面,你这就不能引入这个一了啊得引入谁了呢?2LAZY load里边的这个index,然后这些组件是不是就都能工作了呀?啊那这会儿呢,我也不用再给它传这个pros了,来保存好,那回到这个工程里边,正在编译,稍等一会儿我们打开看看什么样的效果啊,哎呀,有问题了,怎么的呢?说你这个navili呀,必须得包裹一个同学想想怎么回事啊,回到我的代码里面。
04:20
找到index这APP,我们最好是不是用那个roer啊路由器包裹一下,那所以说我们引入来括号from react DOM啊roter来走是这个库ror do引入谁呢?哎,我们用这路由吧,ER ror好吧,哎,来复制回车缩进回车这里呢,走叫browseer roer把谁包一下呢?把APP给它包裹一下就可以了,小逗号呢,给它放在这儿好保存,等着它变译啊,稍等。咱不是说了吗?你用路由,那就得用路由器包裹一下,对不对,回到这儿刷新走,哎呀东西来了,但是好像没有样式对吗?因为呀,在我们旧的工程当中呢,我们用到了bootstrap,那我们就回到旧的工程当中。
05:08
哎,我把咱们现在这个最小化没全屏的,哎,这是旧的,找到哪呢?Public里的CSS下的这个bootsropp是吧?那我们应该把这个给它引进来,那就这样吧,右键资源管理器中显示,我把这CSS整个摁住来到我们的工程里边,松手给它复制过来,那这里边是不是就得引入啊,那我们用link这种形式去引入,然后说当前路径下的CSS下的bootrap,那最好咱说别加这点儿是吧,容易造成样式的丢失,好了,关掉,那我们把原来旧的工程呢,就也关掉了,没了啊,没了,折叠起来,回到这刷新,我们看看效果走同学,是那意思哈,点击about,那就about,点击home,那就home,你看我不就把这个搬过来了吗?那同学啊,你考虑一个问题呗。就是说现在呢,我访问这个页面,你说我看about组件吗?不看,我看home组件吗?也不看,因为我没点对吗?哎,那我跟大家讲啊,其实这两个组件啊,也已经加载进来了。
06:16
就是说如果呀,你这边有100个导航项,我不管你看与不看,其实100个导航项所对应的100个组件,其实都已经引进来了。哎,我们可以借助啊,Network这个选项卡呢,我们看一下啊,点击network,然后我们把这勾呢,给它勾上,什么意思呢,就是不走缓存,能看到一个最真实的场景啊来刷新,各位你看这些东西是不是都引入了呀,其实这个里边啊同学这里边有一个这个东西你看一下啊。这里边有两个创点JS,其实呢,我们呢,你再往上看啊,这还有一个bund,其实我们所有的这些组件呀,资源呀,其实都是在这里边的啊,都是在这里边的,我先把network选项卡清空一下。
07:03
没了吧,同学,那你看着啊,我如果点击about,它是现去把about组件请求回来的,是不是肯定得走网络请求?那你注意观察,我看好about,他说老师这走了,为什么呢?因为这是网站偏爱图标,你一点路由,他发现没偏爱图标,他可能会发一次请求,那这样吧,避免这个东西干扰大家,那这方式都是活的,来同学找到原来的工程。啊,找到public里面找到,诶,这里边还没有偏爱图标,我们好像在这儿写了啊,找到public,这是偏爱图标啊来,摁住,回到我们的工程,回到public里边来松手,同学,这回肯定有偏爱图标了,来吧,啊,那回到这儿来刷新一波走,图标是不是来了呀?那你看着啊,同学,我把浏览器缓存都清空一下,让它干干净净的啊好了,浏览器我也关掉啊,各位重新开这网页儿走。稍微放大一丢丢,打开控制台,控制台也放大一丢丢,我没走缓存哈,来刷新一波,其实你所有的路由组件已经都在这一次加载完了,我都不管你看不看,你点不点已经无所谓了,我不管你点不点,100个路由组件,那我就都加载进来。
08:16
那所以说你把network选项卡的东西清掉,同学你看着啊,我点击about走请求吗?不走来往这边点啊,样式有点错乱了,我点这个走请求吗,也不走,所以说同学这就不太好,你说这里边儿有100个导航最好的办法,同学你说是不是我点哪个你就去请求哪个组件线去给我看,如果有100个导航用户只点击了三个,那你说是不是只加载这三个呀?哎,这样做是比较好的,诶所以说react当中啊,同学路由组件的懒加载啊,那多半都得做。那怎么去做呢?回到代码里边,我们需要这样去做,折叠起来,打开src,找到components,找到lazy load,找到引入路由组件的这个组件,打开它,我们需要借助一个东西先把组件折叠起来。
09:09
我们得借助react里边的一个lazy函数,Lazy什么意思呀?懒懒惰的,我说它是一个函数,那就意味着一会儿肯定得加上小括号去使用,对吗?那当然不是在这儿。那怎么用啊,注意了,不要这样引入你的路由组件。这样引入是不可以的。因为同学你只要这样引入,他二话不说直接就引进来了,不会等,不会懒加载,所以说我们不能用这种方式,那用哪种方式呢?瞧着用定义变量的形式。我是不是定义了一个home呀,诶home是啥呀,它是个组件,那组件引进来呗,好,你得调用lazy。调用lazy的时候,注意你要传入一个函数。Lazy本身是一个函数,调lazy的时候还得传一个函数,同学,那你说从某种意义上来讲,它是不是可以叫做高阶函数是吧?哎,好了,来走,传没传传了。
10:10
那传入的这个函数是不是回调函数呢?你定义的吧,你调用了吗?没有。最终执行不执行,哎,在这里边呢,你用import。那么import呢?是支持这种写法的,Import也可以支持函数调用小括号。哎,这样也是可以的,可能之前我们没这么用过,对吧?之前呢,大家学习这个模块化的时候可能没接触过,其实是完全可以这么写的啊,来写路径,当前路径下的谁呢?About不用再往下写了,因为那个index是可以省略的,好同学你这么一写它就可以懒加载了,那同理,我在这写谁呢?About对吧,那同学你想。函数的函数体只有一句话,那花括号啊,我是不是可以省略了呀?哎,这会儿呢,也给它省略,那走这是引入当前目录下的谁呢?About好,这俩组件是不是可以了呀,说老师明白了,那这么引入就是用的时候它再去调用,然后在这儿,哎,再引入呗,那试试吧,看能不能行哈,回到页面,然后呢,你刷新一下啊,它会有问题的,三千三千是没问题是吧?哎,3000倒是可以,但你点一下about。
11:22
同学,完了东西不出了,那看看控制台报什么错误了吧,往上滑说什么呀,说什么是a above上乘错误怎么怎么地了,你再往下看这块儿呢,其实你捕获不到什么信息,我们得往下看,同学,其实真正的答案在这儿呢,说老师啊,你咋知道真正答案就在这儿呢?你说在这儿,那就在这儿,同学其实错误见多了吧,你们大家也知道了啊,那如果刚开始同学说句实在话,谁都得经历,谁都得经历过这个过程,一看我靠。啥情况啊,来读一读,是一个上层错误,在你的react的组件当中,那也没没读明白啥呀,再往下看,谁都得有这个过程的同学啊,谁都得有的,那只不过呢说哎,可能说开发年头多了,你见到的错误多了,就直接可能哎就想到这儿了,对吧,其实最主要的原因呀,是见过这个错误。
12:19
这是最主要的,同学,一个没有见过的错误出现在任何人面前,不管你多有经验,你也得一行一行读吧,你说是不是这么个理儿,哎,好了,同学,他说这样的,说你得添加一个东西啊,叫做suspans。这个suspens是啥意思呀?不知道,来有道搜呗,走。SSPS干嘛的呀,走。悬念焦虑,悬而不急啊,悬而不决的,这啥意思呢?同学,我引导大家一波啊,回到你的代码当中,同学,你这么写的意思就是你点了about,它再加载这个about这个组件,你点了home,再去加载home这个组件,那同学啊。
13:03
有没有一种感觉,现点现加载。是吧,现点现加载,哎,你想一个问题,你网速快那倒没什么,你点搜就回来了,你网速慢呢,你网速特别慢呢,等了十秒钟东西都没回来呢。那咋办呀?啊说老师那也简单呀,回到页面,我看3000老师,比如说网速特别慢,我点了about,他就等啊等啊等,这就白屏就得了呗,那不行。那不可以,哎,所以说刚才呀,人家提示的那个东西,同学们我们往下看,这个suspans是啥意思呢?他的意思是说呀,如果网速慢。这个组件迟迟回不来的时候,你得用fall back给我指定一个组件。啊,就是说白了,这个组件半天也没请求回来,我得让用户看点东西啊,诶就得用利用forback属性去指定啊,那所以说回到我们的代码当中来,咱开始写,怎么写呢?同学,首先你得引入一个内置的组件react身上呢,叫做suspans,悬而未决的,未决定的,那这东西怎么用呢?瞧着它的用法呢,是非常固定的,那这就不允许我们自由发挥了啊,他是这么做的,打开这个。
14:19
往下找同学看没看到注册路由的地方,哎,你需要做的是用suspans组件把所有注册路由的这个地方给它包起来,好包起来,然后你要为S指定一个fall back属性,Fall back属性里边呢要写组件。那同学我就随就临时啊,随便写一个,你比如说我写个H1啊,H1那是个组件是吧?啊H1或者你写一个虚拟盗嘛也行,同学我在这直接写H1是不是就是一个虚拟do呀,那你写一个,呃,加载中那个组件也行,咱先试一个简单的效果啊,Loading对吧?哎,告诉你,如果你慢了,那我告诉你正在处于加载中啊,稳住用户好了,回头你瞧一下效果啊同学刷新。
15:11
首先这样啊,我们来到3000,我谁也不点,我谁也不点啊,回到network选项卡。你注意看啊,我把所有加载过的东西啊都删掉。同学,那我就可以讲,About组件其实还没引进来呢,Home组件也没请求回来呢,你敢点击about来找同学,你看about组件这个点GS其实就代表着是about组件,About组件的东西打完包之后都在这儿呢,你点击home走,你看它,诶二点创点GS,你看你点谁我就引入谁。是不,哎,那同学我问一下,你说现在我再点about它会不会。还再请求一遍呢,试一下。走,答案是不会了,哎,因为react呢,发现刚才已经把这个组件请求回来了,那我就不再发请求,再去请求这个组件了就可以了,同学,那你看看随用随请求,你如果说来看这儿效果说这里边有100个导航项,我一个都没点,OK,你的JS代码是非常少的,点哪个引入哪个,对吗?那么同学我们测试一下,刚才我们所用那个suspens加上fall back,它有什么作用呢?回到浏览器,同学,我故意把网速调慢。
16:29
我调成FAST3G。而我的浏览器的网速就变成了一个快的3G网络,3G,它再快它也是3G,对吧?看着啊,接下来同学你点击about的时候,你就会发现,走,他先告诉你loading,我的画笔一开呀,页面就冻结了,他会告诉你loading,说你别急,我在这儿正在加载中呢,是吧?诶,好了,那来到这儿呢。等会他回来就好了,你点击home加载中,等会儿回来了,对吧,这就是susps的作用,哎,所以说刚才啊,同学你不写suspens那是不可以的,你在这儿呢,如果想做的特别好,同学你可以不在这儿直接写虚拟盗墓,你在这怎么做呢?你弄一个加载中那个组件,哎,就比如说我给大家写一下,说我还有一个组件。
17:16
叫做loading I loading,所有加载中的那个组件都写在这儿,你比如说简单写一个啊,来叫做index点点叉啊完了呢,RC啊走随便写一个结构啊,写一个标签,然后呢,Roing loading点点点,然后在这呢,可以来点这个简单的小样式,对吧,S style走,比如说背景色呢,呃,让它是呃这个灰色吧,GRY啊然后文字的颜色呢,Color,我让它是橙色啊orange好,写完了吧,那你把这个名字得改一下啊,Loading好给它关掉,那你在这儿啊同学就可以不写这个东西了,哎,那写谁呢?楼丁,哎,加载中,那么你得有加载中这个组件呀,哎,那同学你注意了,这个加载中,你说我们用什么方式去引入呢?
18:10
这个加载中能不能用这种方式去引入呢?啊来回来往上看,就这我再复制一行说老师。Rounding loading,哎,我loading呢,也用这种懒加载的形式去引入哦,那咱看看行不行啊,稍等,等着它编译打开这。啊,我没看about,我没看home啊,所以说呢,给他清掉,不发网络请求,那我想看home走。同学,什么问题呀?东西咋没了呢?看一下控制台,他说什么呢?啊,说什么will re,说当你render的时候,这个组件必须已经就位了,所以说你不允许把loading用这种形式去写,其实他的意思就是说,哎呀,我请求东西了,哎哟,好慢呀,那我想展示loading,发现同学最可气的是loading也没就位,所以说啊,这个loading组件呢,我们不用这种形式去引入,那用哪种呢?我们用这种就是最原始的这种loading组件,同学的肯定不多,顶多就是一点样式啥的,所以说一定要注意啊,如果你要写成组件,你的loading组件是不可以再用懒加载的,那你不觉得陷入一个死循环了吗?我为什么写loading?
19:24
网速慢的时候好展示。啊,那楼顶本身也懒加载,那是不行的呀,对吧,哎,楼顶给这放在这儿,这回呢就好了,稍等,等着它编译完啊好了,回到这儿,我们打开3000。刷新一下啊3000好,这回看一下效果,走走没问题吧,但是如果说你的网速但凡慢了那么一丢丢,我先刷新一下啊走哎,网速调慢叫SLOW3D特别慢,点击about走loading就得等很长时间诶,才回来后loading等着。
20:00
A,它再回来对吧?诶,这就是路由组件的懒加载,我们总结一下啊,同学们loading得正常引入所有需要做懒加载的得调用lazy函数import,用函数调用的形式去写,而且最主要的是注册路由的时候是不是得用suspens去包裹一下呀?诶好了,这小节呢,我们停一下。
我来说两句