00:00
好嘞,各位,那我们分析完了这个模型图之后啊,就开始写代码,好,我把这图呢稍微小一点,然后回到咱们的代码当中啊,打开src,我在打开这个图,同学,你觉得接下来我编码的时候应该先写哪里呢?哎,思考一下。同学,你想在components这个文件夹里的东西,我们是不是都管它叫做组件呀?啊,那到底是容器组件还是UI组件呢?安娜说一下同学,一般UI组件呀,我们放在这个文件夹里叫components,那么容器组件呀,我们一般放在这样一个文件夹里,叫做container,哎,容器吗?Container,那所以说接下来的第一步,各位要把你原来写的count改造成一个UI组件。里边不能包含任何re相关的API,您这组件就负责一件事,就是负责页面的呈现,以及绑定什么用户的这个事件啊,什么鼠标事件,键盘事件对吧?好。
01:10
打开components,找到count这个组件,把这里边所有你能见到的redux相关的API都要删掉,从第一行开始检查,同学,Star我能引入了吗?不能,那各个action这一堆我能引入了吗?不能,因为这些东西我问各位是不是都算作是redux的API对吧?不能见到任何的什么action,什么reducer啊,什么这些东西store都不能见到,删好。那你这删完了往下是不是还得看呀,那这一堆呢,我就先删掉了啊,删掉了,因为之前嘛,咱说了嘛,在index里边我可以写这些东西对不对,哎,去订阅redux里状态的改变啊,然后我整体把APP都重新render一下,那这呢我就不再写了,给它删掉啊,这些东西呢,已经保存在之前的这个里边了,对吧?四这个里边好回来走。
02:05
那接下来同学再看看你这些加法减法啥的吧,对吧,这干嘛呀,这是不是获取用户所选择的数字啊,各位这会儿是不是可以留下呀?那你看还不让我获取用户所选择的数字了吗?嗯。好,来看13行代码,你觉得删还是不删?必须删,我不能见到store,不能见到dispatch,也不能见到什么什么action,这一行是不是都不要了?同理,这一行也不要了啊,那来同学你还能写到点get state吗?能吗?不能那咋办?删那你都拿不到count了,你还怎么判断?那你这也不能写page,所以说这三行是不都删?好,那同理,这句话我也不想看见,所以说是不是也删,那写到这儿同学你觉不觉得就你所写得啊,加呀减呀,基数在加呀,异不在加呀,这些功能都没了,对吧。
03:02
老师,那咋办呢?别急呀,咱慢慢写嘛,对吧,好,那这些加呀减呀什么的里边,他只做了一件事,是不是就拿到用户的输入对吧,拿到之后呢,写不下去了是吧?因为目前还没有一个来看图说话,目前还没有一个容器组件为他服务呢,对吧?哎,第一步先把UI给它改造好,好我们再往下还有一个地方,这儿是不是也不能这么写了。你还能死到点,不能见到任何redux相关的东西,老师那这写啥不知道,咱就写问号保存。好同学,UI组件是不是准备好了呀?空行删掉好,删掉完事了。打开目录,你觉得接下来干嘛?原来的组件已经让你改造成一个合法的UI组件了,那么接下来呢?是不得为其准备一个容器组件呀?哎,好了,回到代码当中,Components折叠起来,右键新建个文件夹,咱刚才说了,那文件夹叫container对吗?好,Container最好来个丝,对吧?Container丝里面放的都是一个一个的啥东西,容器组件?
04:12
好,来右键新建个文件夹con count,对吧?代表不是别人的容器组件,是谁的?是count的容器组件对吗?毕竟是个组件吧,所以说后缀是不是可以叫做GS叉啊?好了,走起。那我问各位,接下来呢。想想UI组件你改造好了,现在是不是就写容器组件就行了呀?啊说老师那明白UI都在这里呢,现在我写的是容器,容器组件嘛,毕竟是个组件,那我在这就得定义一个组件,那定义组件我会那个代码片段RC啊好嘞,老师,一个容器组件准备好了,A停兄弟,容器组件不能这么玩。说老师什么意思没懂,这不这不容器组件吗?这不在这儿呢吗?那我这不是自己定义的一个组件嘛,然后它是容器组件吗?注意了。
05:08
我们看图说话啊,走同学,你觉不觉得容器组件是一个桥梁,它的左手边是UI对吗?它的右手边是redux,对吗?正是因为这个容器组件特别的重要,这个容器组件的功能很多,所以说同学这个容器组件不是说靠程序员自己写个RC生成的一个组件。这个容器组件得借助一个人去生成,哎,这是你想想啊,需要你思维扭转的地方,就之前咱一说组件同学可自然了呢,RC出来一堆,是不是就是一个组件呀,但是在这儿不一样了,容器组件不能您亲自写啊,亲自写太复杂,写不了,所以说不自己写。那咋办呢?同学,你就得借助一个人了,叫做react girl,对吗?
06:03
哎,好了,学的不就是它吗?那所以说呢,你得安装这个库,别亲自写,亲自写还用这个库干嘛呀,对不对?哎,容器组件别自己创建啊,这是第一个需要注意的点啊,你就听视频就行啊,不用去记笔记,同学,一会儿我给你形成笔记好了,那第一件事同学你觉得我要干嘛呢?是不得安装这个东西啊,一样a react re,对吗?走。稍等等着他安装,这库也不大啊,稍等一小会儿。好嘞,是吧,安装完了呀,嗯,老师呢,开始写吧,行啊,来关掉这儿啊同学一再强调容器组件是一个桥梁,左手边的是谁,UI右手边的是谁。谁是不是re,好,不管现在容器组件怎么写啊,不管它怎么写,你觉得我是不是得把两个人引入?
07:10
一个是左手的UI,一个是右手的,你觉得呢?对吧?咱不需要说,一上来就琢磨这个代码怎么写,琢磨好这文件干嘛啊?这文件是容器组件,那它是干嘛的?联系左手的UI,联系右手的Rex,哎,让他俩,诶UI和Rex能对话对吗?所以说同学你觉得第一步一定是要干嘛?是不是引入左手引入右手啊?哎,引入谁呀?Count的UI组件对吗?来引入part引入谁?Count组件的UI组件随时给它起个名字,就叫做count UI from从哪引入啊?点点杠是不是翻出去点点杠再翻来到components components里边,各位放的是不是UI组件啊,走起看,OK是吧?左手的UI是不是引进来了?好嘞,同学,那接下来呢?
08:07
接下来呢,是不是得引入右手的呀?啊,写好了引入X,哎哟,那这咋引入啊。啊,同学,我整个应用里边所有redux相关的东西是不是都在这儿呢呀。那说老师那里边有什么呢?有这四个文件吗?啊,老师那明白了,引入redux,那就是把这四个文件都引入,哎不不不都引入多了,不用那么多。其实我们所谓的引入redux啊,这词改一下dux,我们所谓的引入Rex,其实就是想把谁引入呢?看一下图。就想把re里边那个最为核心的store引入,你觉得呢?同学我只要手里边握住了store,那你觉不觉得我是读取状态,我是更新状态,是不是都能做读get state更新,那就到点dispach对不对?哎,所以说按照一个正常的理解,回到我们的代码当中,引入re,那不如就直接说引入re里边那个最为说了算的人,是不是star好了,引入走store从哪引入呢?点点盖。
09:21
加杆找到Rex里的star。是吧,来考虑同学左手有没有有了,右手有没有有,那看图说话,你要做的事是什么呀?连接左右手嘛,是不是要连接呀,同学,连接那词的英文单词是是不是connect呀,I连接好。那真就有一个方法,它就叫做connect,我觉得也挺语义化的,你说是吧,各位好,回到这里边儿,那你说接下来怎么办呀?哎,引入connect用于连接容器组件啊,那叫做UI组件是吧?哎,与谁呢?
10:08
对吧,那么这个connect方法从哪来呢?从这来,你刚才呀,是不是安装了一个人叫react杠,Re好。各位,那在他的身上就有这么一个方法给你用connect啊,连接连接你的左右手好。那这个connect怎么去使用呢?我先写一段代码,然后请大家告诉我,你觉得你从这段代码当中能捕获到什么信息啊,我开始写啊,非常简单啊,一段代码好,就比如说以后大家工作了,你看到别人写了这段代码,你能捕获出哪些信息呢?
11:03
首先第一个信息connect是一个函数,你说对吧,第二个信息是什么呢。觉不觉得第二个信息是connect函数调用的返回值依然是一个函数,你觉得呢?对吧。I。啊说老师呢,就是这么写啊对connect小括号,小括号说老师这一堆执行完了能有什么效果呢。那我问一下你这文件想干嘛呀。你写在container里边,你写了个count,那你说你想干嘛?你是不是想创建一个容器组件,而且咱刚才还说了,不允许你自己这样写RC,这不行,那怎么办呀?哎,我告诉大家这个connect的小括号,小括号连续写,你就能在左边接到一个容器组件。
12:00
啊,容器组件,那容器container对吗?好,那是谁的容器组件呀。嗯,谁的容器组件呀。是不是求和这个组件的容器组件呀,那所以说给它起个名字吧,叫做count container。起这名字好。说老师那这个东西connect就能生成一个容器组件,但是这个容器组件也没说跟哪个UI建立起来联系啊,哎,好像是这么回事哈,那同学要把UI组件写到这个位置。这就是他的语法规矩了,这就是他的API封装了,同学要咱封装,我还想这么写呢,我还不想让他连着调呢,我想让他在这儿,哎,传abcde,多传几个参数,然后给它做连接呢。但是人家的设计就是connect,先调用返回值,再继续调在第二个括号里边,你把UI组件给它传进去。
13:02
那说老师那这个容器组件,那就能跟UI组件,这个UI组件建立起联系了,对,因为你把UI传进去了吗?是吧。好,建立起来联系了。那同学接下来呢,啊,跟UI建立起来联系了,左手边的连上了,那你说右手边的呢,是不是也得连接呀?啊好同学你注意啊,听我说,我现在先不考虑右手边的这个东西,我先不让容器组件和redux建立关联,我就先把右把左边的这个写好。先不让你的容器组件跟redux做关联,说老师为什么在这不做关联呢?因为在这再写下去,代码就有点儿复杂了,所以说咱一步一步做,你说行吧,同学,先让容器组件能跟UI组件建立起来联系。来好说老师,那这star就先不用,对先不用。
14:02
啊,先不用好了,那你觉得我最后一步应该干嘛呢?各位port是不是暴露啊?前边来一个default同学,你这文件写来写去。既然你能叫做容器组件,最终如果你不交出去一个容器组件的话,那白玩儿是吧?所以说得export default把这个容器组件怎么办,交出去。啊,那为啥非得写的这么麻烦呢?是不是可以export default?这是不是就可以了呀,来撤回来剪切。粘贴等号删掉是不是就可以了呀?写好注释走第九行代码是干嘛的呀?创建并暴露一个count的容器组件。啊,或者写的完整一点,使用connect小括号,小括号创建并暴露一个count的容器组件好了。
15:08
啊,听我说啊,想好先不跟右手边做关联,因为跟右手边做关联,不是说像你想的那样啊,我在这儿引入道,然后就能做关联了,别急啊别急,同学们,你觉得接下来我在页面里边渲染的到底是这个UI组件还是容器组件呢?我是不是得渲染容器组件呀?容器组件,我问各位,只要一渲染,那么它里边由于UI组件是它的子组件,你把负组件渲染了,那子组件是不是也出来了呀?啊说老师那要是我就想写到这儿呢。那你看一下啊,各位,这里边儿放的是不是UI组件。这里边儿放的是不是容器组件,那我就问在座的一个问题啊,你说这里是UI,这里是容器,那你到底用哪个了呀?
16:00
你回到APP里边,你自己看一下来,同学你是不是引入count了啊。引入的哪个count呀啊,这是不是叫做count的UI组件呀,然后你在这啊把UI组件渲染了,同学你要这样写的话,那你把这container右键你删了吧,那别用它了,写完没用啊,哎,所以说来到这儿同学不应该再引入UI的count组件了,得引入谁contain下的count,哎,这回这个count是不是就是容器组件了呀。啊好啊,都叫count,刚才是components下的UI count,现在是container下的谁?哎,容器count好嘞,保存。啊,那你想想啊,来同学,我引入的是container下的这个count啊,这叫容器,而且这个容器呢,能跟这个UI建立起来联系了啊好了,就生成了一个容器组件啊,那最终我渲染容器就可以了。
17:00
好了,那我们看看它什么样啊,关掉我的应用啊,这也删掉我们整体啊,都给它重新运行一下n PM start走看效果啊。稍等啊稍等把原来的呢给它关掉,控制台呢也开好,你看有什么问题啊。好。啊,老师报错了,没事儿,咱读读这错误,你看他咋的了啊,你得尽可能的看到一些错误啊,同学都写正确的,谁不会写呀,对吧?来看看他报什么,你就观察前几个词就足够用了,他说啥同学。不能够找到什么,嗯,他说不能够找到什么,是不是不能够找到死道啊。好说,老师为啥找不见道呢?回到代码当中。同学咱捋一下啊,咱捋一下。我现在写的是哪个文件?是不是container下的index JS叉啊?
18:07
那我在写啥文件呀?是不是count组件的容器组件呀,容器组件干嘛的呀,连接左手的UI连接右手的re对吗?那同学我问你这个UI我引入了哈,这个UI我交给他了哈,但是同学我问你右手边我是不是还没做连接呢,那个re呀,说老师那你刚才不说的吗?先做一半的事儿,这边先不写,对呀,我是这说的。但是同学你看他报的错误,他是不是说找不见道,我就问你,我引没引入道吧。这是不是容器组件是左手就位了,左手连上了,右手就位了,是我还没有写右手的连接,那我问大家我引没引入道是不是引入了呀,但是他咋说的。我找不见道对吗?那这是什么鬼呢?
19:01
哎,这会儿跟大家说一下啊,这儿的写法就有点奇葩了,同学,咱们想法非常好,引入左手,引入右手,连接左右手,这个右手你是不是找不见呢?那找不见了怎么办呀?那就哎呀删掉,哎说老师等等你引入了之后,人家都找不见,那你删了不就更完了吗?那我说一下啊同学,容器组件确确实实得得到一个道不假,那容器组件吗?各位不就是连接UI完了连接reduce吗?人家当然要得到一个store啊,但是你注意听我说这个容器组件里的store。不是让程序员亲自在这儿引入的。朱老师,那咋办呀?瞧着看咋办?这一堆不要了,老师那咋办呀?来,别急别急,我现在在哪个文件,是不是在这文件,这是不是count的容器组件好嘞。
20:06
APP里边我问你,你用没用count的容器组件,是不是用了呀,是不是在这儿呢?哎,那我告诉你啊,那道得这么传过来啊,说老师闹了半天,就是容器组件里的那个道。不能我自己亲手引入,我必须得在上一层通过props的形式传给他对。那么用图来解释就是容器组件确实需要这个道,但是并不是说自己杯就引入,而是靠它上层通过props传进来的。哎,好了,说老师,那我就写在这儿吧,不行啊。你这里有吗?嗯,APP里边引入store了吗?你就给人家传呀,是不是没引入,那你怕什么引入呗,当前目录下的redux下的谁道?
21:04
这个时候你看好了啊,各位,回到这儿刷新同学是不是一个错误都没有?这是你必须要注意的一个点,要不咋说react-redu它学起来难度有点稍微的大一些呢,那就是因为啊,不是说你用什么,哎,就在这引入,我就用是吧,同学你说我在用一个东西发现没有,那我就在此时此刻就在这个位置立刻马上就引入,这是再正常不过的一个思维模式了吧,哎,但是在这儿不行,你不能自已去引,你自己引了人家不认。人家必须得从上册哎,传进来,那可能写到这儿,大家现在有点不理解,老师凭啥这么做呀,他闲的蛋疼吗?非得这样啊,我想用,我不能引入得别人传给我,为啥要这样做呢?同学你别急。等到一会儿咱们讲优化的时候,你就明白了,现在呢,咱先这么玩着行吧,哎,好了,回来同学左手是不是就位了,右手呢,其实也就位了,只不过是这么传进来的是不是好了。
22:07
那同学你看容器组件和UI组件是不是建立起来连接了,好了,那你看现在页面是不是能出效果了呀,哎,但是我问大家一下,这些加加减减,这些读取初始化的值是不是还都不能用的呀?啊,别急,下一小节哎,咱说它。
我来说两句