00:00
好嘞,各位,我们接着优化刚刚所写的东西,其实在前两节的视频里呢,我已经做了两个优化,第一个优化在哪体现的呢?我们回顾一下,其实是在容器里边,在这儿体现的。你的map dispatch to pro正常是不是得这么写呀?那经过优化之后呢,是不是简写成一个对象了呀?哎,加就对应加的action,减就对应减的action,你就不用自己在dispatch了,好,这是第一个优化,那第二个优化在哪体现呢?其实是在index里边,我借助provider这双手批量的给整个应用里边所有的容器组件是不是都传递了store对象,如果你不这样做,那同学你是不是就得自己手动的在APP里边一个一个的容器组件给它传递store啊,那这肯定就不太好嘛。哎,所以说得优化一下啊,这是前两个优化,接下来呀,要给大家讲优化里的最后一个,就是从文件层面上啊做出一些优化,我现在这么写文件太多,我得优化优化啊,同学你说不优化行不行,老师,我只学会了这个。
01:15
啊,其实完全可以在真实项目开发当中去用,没问题的,因为整个这些流程其实已经都跑通了,在这个第五个呃,React-redus的基本使用里面,对不对,但是你能优化,为什么不优化一下呢?是吧?哎,尽可能的让程序员编码呢舒服一点,让文件结构呢清晰一点是吧?哎,好了,来同学,那把这个呢,咱就给它关掉,咋优化呢,引导大家一波,你说在最开始的呀,同同学啊,我是不是写了一个count组件呀,嗯,我说这个呢,是求和这个组件,后来逐渐的呀,我们就学习了redux啊来走啊,然后说呀,要把东西啊交给Rex管理啊,那我们就交给他了,也从那里边呢获取东西了是吧?哎,那其实就是1234我们所讲的内容,后来呀,我们又学习一个东西,叫什么react re,对吗?那么这个react redu就有一个要求,你得为count去写一个UI组件,你。
02:15
是不是去写一个容器组件呢?嗯,Container是不是得写一个这个呀。那同学你说是不是把一个count组件变成了两个组件呀,一个UI,一个container。哎,那你说你想这么一个问题,各位如果在你整个应用当中是有20个组件需要跟Rex打交道的。不跟不跟Rex打交道那些组件,我问各位,你需要写什么UI和容器吗?不需要。你比如说举个例子,应用中一共有80个组件,其中需要跟打交道的只有20个,那你说剩下那60个是不是你就不用写什么UI啥的呀?但是这20个你是不是得写呀?好了,同学,你思考一个问题。
03:02
明明组件只有20个,但是为了符合他所说这要求,那你是不是得把你的组件变成40个呀?因为每一个组件都得匹配一个UI,都得匹配一个容器,你说对吧,那你觉没觉得同学一变二这件事儿其实还行,就是组件多了一个,但是20变40这事儿的同学是不是就不好玩了呀,你的组件是不是成倍增长了呀?你其实之前也是成倍增长的,但是只不过呢,原来基数就小,所以说二哎也没啥体现是吧,那怎么办呀,我们是不是得优化优化呀,啊说老师那怎么办呀,那目前这个写法那就只能是嗯,这有一个UI,这有一个容器,所以说一般开发的时候啊,同学们,我们会把红色的UI组件和蓝色的容器组件,把它俩做一个整合。哎,就把他俩呀毁成一个文件,那你可能就会说了,老师不行,你就违背了这个图里的规则。
04:05
人家不说了吗?得有一个容器组件,得有一个UI组件,那老师你把他俩混成一个,那算什么呢?同学你注意啊,这个图呢,只是告诉我们你要有一个容器组件,你要有一个UI组件,但是它并没有告诉你说容器组件你就必须得写一个啊GS叉,然后UI组件你得单独你再写一个b.GS叉,它只是说要有两种组件,但它有要求这俩组件必须拆成俩文件写吗?没有,哎,那所以说呢,我们就可以把它进行一个整合,也就是说同学一个点GS叉文件里边,难道我就只能定义一个组件吗?当然不是的。回到我们的代码中,我简单给大家写一下啊,各位,你比如说我有一个组件叫做test.js叉啊,叫做这个RC。
05:07
走,我几个文件,各位一个文件里边定义了几个组件,各位一个组件是不是交出去了?好,那我问大家,难道这里边儿我就不能再定义一个组件了吗?完全可以,比如说我又定义了一个,这不叫test,它叫DEMO。那我问一下各位,我是几个文件,一个文件我定义了几个组件,是不是两个,那你可能跟我说老师那不行,你这组件定义的没意义,你交不出去了呀,你默认暴露只能暴露一次呀,哎,那各位我难道不能这么用吗?这个DEMO我就在自己家用,你说行不行,完全可以吧,一个文件对吗?俩组件对吗?而且还都用了对吗?所以说各位是吧,一个文件是可以写两个组件的啊,右键给它删除,那你说接下来怎么办吧。
06:02
这是容器,这是UI。一整盒不就得了吗?打开我们的容器组件,来,同学,往下走,你最终暴露的是什么?暴露的是connect小括号,小括号调用的结果对吧?那你说红色框这一堆同学是不是都是我们所说的容器组件呀,容器组件咋出来的呀,是不是得根据UI组件加工而来的呀,对不对?哎,你得把UI给人家,然后人家呢?哎,生成一个容器,让这个容器能连接上这个UI对不对?那我再问你这个东西哪来的?啊,老师这个东西是我在上方引入的啊,那我再问你这个引入是从哪儿引入的,老师我从这引入的啊,你把UI定义在这儿,然后在这儿再给它引入。那你说我想整成一个文件咋办?咋办?那莫不如就不在这儿定义了。
07:00
我也不在这儿引入了,直接把定义就写在这儿,你说是不是完全可以啊,哎,那所以说呢,来吧各位,我是不是得把这个删掉了,不要再引入了吗?那我这不引入,那你觉不觉得往下来,你刚把count UI删了,那你这是不是就写不下去了,我先写几个问号先放在这儿,那然后怎么办同学。找到你的UI组件,你说对不对。然后咋办?来这折叠一下,你这一堆东西是不是都是在定义UI组件的呀?那就把它剪切走呗,好了,保存一下,那这个components,你说我还有必要留它了吗?没有了,那就把它删了去。那就在这一行,我是不是就直接开始定义这个UI组件不就得了吗?走啊,但你别觉得这就成了,来折叠一下同学,走。你说有什么问题,这有import完,这又开始暴露了,这又有import,这就不太对,Import导入语句一定要都挨在一起啊,那我就把这个给它剪切走了啊,然后这个空行删掉删掉删掉I import都让它在一起,空行删掉,接下来呢,那是不是把定义那个UI组件的东西给它把粘过来啊,啊,别急,往上滚动,把UI组件的定义折叠起来,把容器组件的啥哎,这个定义给它折叠起来,你觉得现在有什么问题呀?Aport给fo能暴露两次吗?默认暴露哪能这么暴露啊,那同学你抉择一下吧,UI摆在这儿了,容器摆在这儿了,那你说吧,同学最终要暴露谁?
08:41
我们是不是得暴露容器组件呀,你暴露UI有什么用呢?所以说同学它前边的export你觉不觉得得删掉。啊,那这写好一个注释,这叫做定义是不是UI组件啊,完事儿。啊,那同学你这是不是得改一改UI组件不叫count UI了,UI组件就叫count,那你说这个名是不是咱得复制完了,咱是不是得把它写在这儿啊?诶撤回来走问号删掉是不是得换成这个呀?这不就结了吗?同学,俩文件是不是合成一个了?哎,这不就搞定了吗?啊,折叠起来,老师,你这东西还能用吗?肯定能啊,来打开终端,同学,咱停一下这案例重启啊,稍等看一下啊。
09:29
等着他启动,你这样的话文件多清晰呀,对吧,我只有一个啊。等会儿我控制台呢,提前给他开好了啊,看万一有什么错误啥的,来刷新一波,初次展示没问题吧,加没事儿,减没事儿,那么基数再加,OK,异步在加,等一会儿加了吧,同学,你看这文件是不是就给它整合好了呀?哎,那同学你说那如果我非得要管他起个名字的话,那你说应该叫什么合适呢?
10:04
你说管这个index点儿GS叉,我就管它叫UI组件,你说合不合适,其实不合适,因为这一点点这块才是UI,你说对吧,因为你这里边引入了action,你这里边还引入了谁connect,那同学你看吧,你都见到action了,你都见到connect了,你还能管它叫做UI组件吗?不能了。啊,所以说我们一般诶还保持这个名字叫container,你这儿吧,你要改成components,其实也没啥同学,你比如说老师,我就非得把这个container呢,给它改成components,其实也没啥事儿,同学,但是你这样写就不太合适,因为components里边也就意味着放的是UI组件,那你这里边还见到了action,这是不是就不太对呀?哎,所以说一般我们叫做container,其实吧,这块你叫ABC它都行是不是?嗯,这没有那么严苛的要求,叫什么都行,很多公司呢,管这个也叫container啊,但是有些公司呢,人就叫contains,能说人错吗?也没错,是吧?哎,只不过是一个约定俗成的小规矩,这么一个问题啊,来吧同学,接下来我们总结总结,我们优化的时候都优化了哪些东西啊,我们用了三小节的视频去对它进行优化,对吧,那都优化了哪些东西呀?嗯,我们总结一下,总结之前呢,我做一件事儿,同学我把案例。
11:29
强调我把这SC啊给它复制一份,然后给它改个名字,各位叫做六下划线,哎,下划线src下划线那叫做啥呀,React g,然后呢,优化都优化什么了,现在咱就总结,那刚才咱总结到这儿基本使用是吧?啊那来我提前呢,把东西写好了,为了节约这个时间,那复制过来吧,走同学啊。咱们要整理的东西有这么多,首先优化哪里了?咱一条一条过同学一点也不难啊,首先第一个优化就是刚刚完成的,是不是容器组件和UI组件要混成一个文件,哎,或者咱不说混成,咱说整合成好听点是吧,哎,这个整啊和成一个文件,这是第一个优化吧。啊然后第二个呢,你不要自己给容器组件是不是传递到了呀,你要给APP那个外壳组件包裹一个provider,诶,然后把store这么一写即可,然后第三个你在想同学你只要使用了react-redu是不是不用自己在监测redux中状态的改变了呀。
12:42
说老师原来我自己咋监测的呀,同学,忘了吗?打开index,原来你是不是自己这么监测的呀,那现在还用了吗?不用了,好了,咱给这个关掉,哎,容器组件就可以自动完成这个工作了,刚才那个视频咱是不是演示了?哎,你不监视,那你要是不用react-redu,你还不自己监视,那肯定不行,但如果说你用了react-re OK呀,啊,你就可以不再监视了啊,容器组件能帮你去监视了,那么再看第四个mappach to props是不是也可以简单的写成一个对象啊啊,那打开这个找到redus,呃,找到container是吧?哎,找到这儿,同学,那你看一下吧,原来完整版是不是得这么写呀,那现在呢,简写是不是就写一个对象了呀?哎,OK,好了,关掉。那么同学第五个呢,是给大家单独又写了一个,哎,就是你看刚才经过了这么多的过程,写基本版经过三个。
13:43
的优化,那同学们可能都记不住了是吧?老师,我一个普普通通的组件,我要怎么跟redux打交道呢?要经过哪几步呢?那我们慢慢来,同学,首先第一步是不是要定义好展示内容的组件呀,我们叫什么组件,UI组件,暴露UI组件呢?各位不暴露是不是?进入第二步,你得引入一个人,他叫connect,能帮你生成一个容器组件对不对?哎,你暴露谁呀?得暴露这容器组件,那写法呢?给大家写好了connect啊,然后这怎么写state箭头函数啊,然后小括号,花括号,然后你起名吧,Key value对不对?
14:27
哎,好,那同学这state是谁呀?嗯,想好这state是谁,忘没忘啊啊各位来来来来来来,保存回到我们的这个容器组件里边,同学,我问你他是谁呀啊,他是谁还记得吗?他是不是就是Rex帮你保存的状态呀,对吧?他不是别人的,我来重新敲re他不是别人,他就是redux帮你保存那个状态,就是那个零儿对不对?哎,完了,你拿到了,你起了一个K名字,你把state丢这儿了是不是?那你其实你传过去的不就是这玩意儿了吗?康冒号啥零是吧?哎,好了,关掉啊,那这块是干嘛呀?来给大家写好注释,写个小逗号,这一步呢,其实我们叫做映射而状态,那这一步我们叫啥来着?同学还记得吗?映射啊,操作,哎这个而状态的。
15:28
啥呀?哎,方法,嗯,你说对吧,好嘞,啊,那这块传什么呢?UI组件,那同学你想想UI组件不就是想得到俩东西吗?一状态,二操作状态方法,状态靠这儿给,操作状态方法靠这儿给是吧?哎,然后再读第四个UI组件中,我们是不是可以通过this.prop点什么什么什么,哎这种写法读取和操作状态,你说对吧。啊,你回到你的UI里边来,同学别急啊,折叠起来,这是不是你写的UI,那你打开来你的UI里边干嘛呢?啊this.prop点加是不是能完成加呀,那再往下来同学啊,再往这看this.prop.count干嘛呢?是不是读值呢?你这会儿是不是在读取状态呀,那你看你这些东西啊,这些东西啊,这些东西是不都在操作状态的呀?哎,好了,哎,咱总结了一下,总结归总结,我这些东西啊,都是随着我的优化一点一点一点形成的,对吧?那可能同学自己直接写呀,是有压力的,那所以说接下来我用几分钟的时间带着大家重写看他。
16:43
站在这个最终的角度,各种优化都学会了,我带着大家完整的写一遍,那以后大家再写的时候,哎,就可能会轻松一点了,因为学的时候吧,同学是一章节一章节一章节学的完,最终老师告诉你,诶,好了,同学啊,我经过了啊三次优化写成这样了,那同学都有点懵了,老师最终我咋写呀,那所以说带着大家呢,写一下,我把这个组件彻底删掉,从头开始写,但是同学我写的东西很有限,我不会把那个加减啥的全都写出来,是吧,那样的话太浪费时间了,所以说这样啊,各位右键我在资源管理器中显示,我把这count吧,我给它复制一份,然后存在哪儿呢?各位存在我的桌面上,哎,就是我先带着大家呀,写一会儿,我再把我这个完整的还得放回来,行吧,回到我们的代码当中来,各位右键count直接删掉,没了是吧?Containers里边没东西了,那咋办呀?来吧。
17:44
右建新建一个啊,得是文件夹对不对,Count,好嘞,里边新建一个index.js叉,对吗?各位,我开始写组件了,同学,我给你还原一个最真实的开发的状况啊同学,我开始写组件是不是得RC,你说对吧?各位,我哪知道这组件以后跟不跟red打交道,我哪能想到那么多的事儿啊,反正我就知道这玩意叫count,你说是吧?啊,那里边展示啥呀?来写个H2,咱不怕的啊,慢慢来,同学,同学,这才是重点,你说对吧,就告诉你最终得咋写当前求和为为啥呀,我不知道,我哪知道它是啥呀,不懂哎,好了,写完了,同学们,你看你暴没暴露count暴露了,那你到APP里边,你引没引入这个count containers里的count a是不是也渲染了呀?好了,那来关掉,咱就写到这儿,你正常写组件不也得这么写吗?谁知道它打不打交道呀?那然后来同学各位走NP。
18:44
Start,我是不是开启一下,哎等等哎,慢点来啊,尽可能站在大家角度去考虑是吧,那那一点一点优化,谁知道最后呢,优化成什么鬼了呀是吧?你把最后那个优化的结果给他记住是吧,慢慢来等着,哎,同学你看啊,但是在这儿啊,显示的还是当前求和为啊那来检查一下是不是这个文件我没有删干净啊啊啊,知道了,我删的是六这里边的是吧?啊那就不对了啊来,那撤回来走啊,然后呢,我把它拿过来,这是count里边的这个文件摁住啊,然后来到六啊,松手啊,然后应该放在这儿是吧?哎,移动是吧,我不应该去动那个六是吧,六是已经写完的东西了是吧?哎,好了,那给它删掉啊,咱给这块呢,也给它删掉啊,六是咱刚才就是整体说完了,然后咱形成的一个文件,我得改这个是吧,我改这个是不是才能有效果呀,啊来同学不急,右键那这样。
19:44
先把案例停掉,这也关掉,整个count不要了,删掉,右键新建个文件夹叫做count对不对?然后右键新建一个index.gs叉是吧?来RC走着,我也不知道这玩意儿跟不跟re打交道,我就只能写个HR,是不是叫做当前求和为为啥不知道写问号啊,好了,然后呢,再开启咱们这个案例啊,N PM start,刚才我改错地方了是吧?改成这个零六里边了,那不对啊,零六这个还得给大家留着啊,等着开启。
20:22
控制台呢,我也打开啊,我也打开刷新。等着啊,等着。是吧,当前求和为同学,我是不是得从redux里边把东西读出来,那就回到我的代码当中,同学,这才是真真正正的一个组件,要跟Rex打交道,你说对吧?其实有的时候大家到公司呀,有可能人家已经写完了,Re这个文件夹里边的东西都写完了,就看你自己怎么去用了,同学,那来吧,接下来怎么办?那你就得把它弄走了,不能再暴露它了,那得引入什么呢?首先第一步你是不是得引入connect,从哪引入是不是Du react-redus引入谁呢?是不是connect,哎,好嘞,那接下来怎么办呀,Aport default con小括号小括号对吧?然后把谁传进去,是不是把这count传进去对吧?各位好嘞,啊,那然后这个里边咋写来着,是不是写两个东西啊,那么第一个叫做映射啥呀?哎,这个呃状态啊,那第二个呢,参数是干嘛的来着,映射是不是操作,然后是啥状态的方法,你说对吧?啊,那这来写着咋写呀。
21:42
一定得把这形式记住,街道Rex里边所保存的state,你就这么写就得了,人家能帮你调,咱之前都是仔细分析过的,人家能帮你调,人家能帮你把状态给它传过来对不对?好,那这怎么写?小括号,花括号,这才叫默认返回对象,来起个名字,同学,我不叫count了,为啥非得叫那名啊?我叫和行不行?行,那核的值是多少啊?那就是state吗?这state不就是redux帮我们保存的那个状态吗?好,那同学我问一下,我这里边需要操作状态吗?就目前来说,我有加号减号吗?是不没有老师,那没有这咋办呢?要么就不写,要么就写个花括号,对吧?一个空对象占位,别忘了这的小逗号。
22:30
对吧,同学你看哎,优化来优化去,是不是优化成一个最终的写法了呀?那你说这是谁吧?容器,你说这是谁吧?UI,那你说容器是不是得给UI传东西,哎,好了,传,那你传过去了,那你这怎么写呀?UI和容器是啥关系,就看你知不知道了,它俩是不是父子,那么this.props点你接下来是不是不能瞎写,因为人家这给你传的是不是和,那你这呢?this.props点和对,就这么low。先写着呗,能懂就可以是吧?那回到页面走,看效果,同学零是不来了,接下来咋办?不写加减什么太多的东西,就写一个按钮BT to啊,叫他点我加一加一来他是不是得写一个on click事件啊,走着来,This点加我就叫ADD行吧,那你说在这儿我是不是可以写一个ADD赋值语句箭头函数啊。
23:29
我也不用拿,说用户选择哪个,我不用拿,现在就是加一,那咋办?那你看这儿是不是得通知redu咋的,是不是加一,那咋通知啊,是不是得靠父亲给你传的操作状态的方法呀,那比如说来一个父亲给你传了一个加法的那个函数啊,那我这么写不叫加了,这回再换一个写法叫加法啊冒号,你说这咋写?同学,最终咱们优化完了,是不是说加就对应加的action,你什么你想干什么事,是不是就对应什么的action,那问你action在哪呢呀,没有是不是没引入啊,那就引入划到上方import引入啊,从哪引入啊,From从哪引入啊,点点杠是不是翻出去啊,点点杠再翻出去找到redus,然后再找哪。
24:19
那是不是得找到这个,呃,Redus里边的这个action呢?那action里边有什么呢?是不是有一个创建加的action,那写上create啥increment action对吧?然后咋的加是不是就对应加的action走起,然后咋办?这加法就能用了,老师,那我想用一下行啊,那在这走着this.prop点加法吧,是不是容器组件传给UI组件的吗?那然后在这怎么办?说吧,你想加几,我想加一完事了呀,啊就这么一写,那回到页面,咱看看效果来点我加一再加再加再加是不是就完事了?同学,你再把那么多的action都给它写在这儿是不是,然后再给这来一个什么,呃,一补加这再来一个select框,再拿一下值,同学,整个逻辑是不是都跑通了,那你看看吧,我给大家总结了一下是不是?哎,一个组件要跟re大打交道,要经过哪几步是吧?不是那几步,是哪几步来。
25:19
走完事儿了呗,那所以说以后你自己写的时候,同学写着写着写着发现哎呀这组件要跟打交道了,那咋办呢咋办,赶紧引入connect是吧,然后哎在这儿啊给它写一下,那第一个呢是管读状态的,第二个呢是管啥的,是不管操作状态的,同学你觉不觉得操作状态你永远离不开谁,你永远离不开谁action。其实从最原始这个图上也有体现,同学你拿不到action CRA你就没有action,你怎么把东西继续往下走下去呢,对不对?哎,好了,关掉,但是我这里边儿同学不能真的就把这种东西就给大家,我只是说尝试着把这些东西删掉,让大家感受一下从零开始写到底怎么跟咱们的这个redux打交道,那接下来我得做什么呢?哎,回到我的桌面上来。
26:15
找到这个count,找到里边的index,我得摁住,划到我这个里边,我给它松手,我给它替换,希望各位在练习的时候也要这样做,把count删了去啊,然后自己从零尝试着开始写一写啊,回到页面,我看一下我这东西正不正常刷新加减啊,基数加一不加行没问题,我得保证我的代码不能坏掉啊,回头不得给大家呢么是吧?好,那这一小节呢,我们就停一下,同学,我们是不是讲了react-redu所有优化相关的东西啊,那么笔记呢,也给大家形成在这里了是不是?嗯,好了,那这小节呢,我们停一下。
我来说两句