00:00
好嘞,各位咱继续啊,刚刚咱写什么了呀,咱是不是写了一个count求和这个组件的容器组件吧,嗯,我是不是写了这么三行代码啊,哎,说引入左手边的UI,哎,然后呢,引入connect,用connect小括号,小括号把UI在这儿传进去,它就能生成一个容器组件,然后我就暴露了,哎,然后在这个APP里边啊,我就引入了咱们的这个容器组件,然后我就渲染了这个容器组件,与此同时,我通过props的形式,是不是把这个store给它递过去了。啊,那也就是说这个容器组件呢,引入了左手边的东西,那右手边的东西呢,其实也已经进来了,只不过呢,是他上一层通过pros传进来的,对不对?哎,来咱看这图啊同学,对角化代码全家头找到原理图,哎,找到这个react杠。
01:00
说老师那现在我明白了,打开代码,你现在已经让容器包着UI了,是吧,他俩已经是一个父子的关系了啊,那我觉得老师接下来你得写这边不大不大,别急啊,我们先验证一下他和他到底是不是父子关系。其实各位啊,从编码的角度来说,你其实是看不出来它俩到底是不是父子的,你打开src,我说这里边儿是父组件,这是子组件,那你就打开这个父组件,同学你就写了三行代码,你咋观察出来它俩是父子的呀,对吧?同学,你打开APP,你再看这,我说APP和count啊,这个count的容器组件对吧,我说他俩是父子,你认可不同学。对吧,因为这是不能从编码的角度就能观察出来他俩是父子,你觉得呢?APP是父组件,在父组件里边你写了子组件的标签,难道他俩不是父子吗?这能明显观察出来,诶,他俩是父子关系,但是这个容器组件呀。
02:11
和这个UI组件。你就从这来看,你能看出他俩是父子吗?不能,那咋办?验证一下,打开咱这案例其实非常验证啊,各位来打开你切到控制台刷新一下,没东西啊,刷一下好了,你切到控制台,你导到这。同学,怎么样,APP是不是所有组件的副组件呀?啊,那这是谁呢?是不是count的副组件,那这个呢,是不是count的UI组件啊,这是容器组件,这是UI组件吧?哎,你看其实它俩是一个父子的关系,对不对?诶借助这个开发者工具我们观察出来了。啊,老师好了,那接下来往下写吧,别急,同学,我呢把所有文件都收起来啊,我给你写一波注释,我们把每一个文件都过一遍,因为接下来我再写呀,就需要你对这个文件的结构特别的熟悉,那所以说我带着大家先过一遍这些文件都是干嘛的,省得大家忘了,好吧,啊,咱再补点注释来到index里边,咱从这开始看,行吧,各位,前三个我不想说了。
03:14
前面那俩是核心库,这是所有组件的外壳组件,对吧?我为什么要引入道,还记得当年为什么在index里边引入道了吗?就是因为这三句话对吧?这啥意思呀?同学,不写这个东西,那是不是就意味着redux里边任何的状态发生改变,你的页面也不变对吧?哎,写好注释,这是有必要写一下的,走啊,咋说呢,叫做监测redu中状态的改变啊。若redu的状态发生了改变,那么怎么办?重新渲染谁APP组件,那你想吧。
04:03
APP组件一渲一渲染啊,一重新渲染,那APP所有的子组件是不是都重新render一下呀,那所以说你是不能保证所有的东西都是最新的呀,嗯,好了,关掉这个index,咱再往下来,咱再说说这个app.js叉这是干的呀,所有组件的外壳组件是吧?同学这是干嘛的呀。这其实在渲染容器组件,而且给容器组件传东西了是吧?哎,来写好,那叫做给容器组件传递道,好了,那给这儿关掉,咱们又来到这个reduce里边,这里的东西同学我们写的时候是不是就已经写好了详细的注释啊,那在这个里边我们就不再看了,同学,整体折叠起来,一会儿我一点这里的东西我都不改,因为redux那里边的文件它也就这样了,我们目前没有什么别的业务逻辑,就一个求和,所以说里边的东西已经够用了,一会儿我绝对不去改这里的东西啊,来,再打开container啊,这是啥呀?容器组件按照这三个啊也写好了啊,那折叠起来,来到这儿啊,那这里边咱已经处理好了,对不对?所有redux相关的东西您都看不见,好了,OK,关掉折叠。
05:21
那么看图说话吧,我们再往下写,它俩之间的关系形成了父子,我也渲染了容器组件,那么顺带着UI组件是不是也出来了呀?那我想问一下同学,我们说容器组件是不是得给UI组件传递啥呀?一传递状态,二是不是传递操作状态的方法呀,那他俩之间还是父子关系,那你说是不是就得借助pro去传递啊,啊好了,来传吧。同学,非常简单,看图来说不难,容器组件是父组件,UI组件是子组件,来父亲给儿子传点东西,那是不是借助pros就行了呀?啊,那你咋办?你说接下来同学我的着手点在哪?你也别光听我说,我说写哪就写哪,你想想同学你想的要和我接下来,哎,讲的对的,那一下子嗯,你就能记给他记住了是吧?同学你说接下来咋办?
06:24
容器组件是父组件,要给子组件传点东西,那你觉不觉得我得打开容器组件呀,我得通过那个组件标签,是不是把props给他递过去啊?哎,好了,这挺简单的是吧?打开容器组件,打开这个,呃,哎呀,同学。好像现在有点问题啊,这是容器组件不假。它和UI组件的关系是父子也不假。但是他俩之间这个父子啊,不是说我们程序员写出这种代码构建出来的,你就比如说同学,如果我写出这种东西来,哎,走完了空格里边写谁呢?B组件大写的B啊走,那这里边呢,我写一个杠A组件,哎说它结束了,同学你这么写啊,那我可以很肯定的说A是父,B是子,说老师呢,A想给B传点东西呢,那你这段代码就不能这么写了,比如说你想给B传一个pro。
07:24
啊,名叫A值为一,你得咋写?同学你是不是得这么写间括号B啊,大写的啊,然后你传啥呀,A等于啥呀,一那就写一吗?啊看结束同学是不是父给子传东西了呀,对吧?在父组件里边,你写子组件标签的时候,是不是给他传递了一个A值为一啊嗯,但是在这儿呢,同学觉不觉得咱有点写不下去了?是不是?同学,这个父子关系是不是靠connect?形成的呀。不是说咱自己说想APP里边说,哎呀你这儿,然后我在这儿写,同学我问一下你有机会在这个里边写他的组建标签吗?就你有机会写这种东西吧,写上啊cot count的UI组件,然后传一个A啊,它的值呢是一各位你是没有机会写这段代码的,对吗?
08:21
所以说嘛,从图中来看,表面上父子之间传点东西不是什么难事儿,但是现在这父子不是靠你写标签形成的父子,你说对吧?嘿嘿,是不是写不下去了呀?那咋办呀?来吧,不卖关子了,直接跟大家讲,同学,我想问一下,父给子传东西,咱就打开APP,这是不是属于父?嗯,这是不是属于子?嗯,父子传东西是不是都是一组一组的key y6。对吧,你比如说同学我想给count再传一个A啊,完了值呢是一,我还想传一个B,完了值呢是二,你是不是在这写就得了呀,这是不是一组KY6,对,这是不是一组KY6,对,这是不是也是一组KY6。
09:09
好。我们不给countt的容器传A和B,我们传的是道,所以说把无关的东西删掉。回到这儿,主要琢磨一下这怎么写。没机会写标签的,那我们这么写,注意听同学connect在第一次调用的时候,你要传入两个参数。哎,我再说一遍,Connect直接第一次调用的时候,你要传两个参数,你在继续调用它返回值的时候,你确实应该把UI传进去,咱已经传完了,对吧,我说这应该传递两个参数。说老师那是啥呢?我写个一和二吧,不行,它的要求是你调用connect的时候,传入的这两个参数必须是函数。那必须是函数,好,那我就不能写一和二,同学,那我这么写你看行不?我这传A,我这传B,这可以吧,但是得有一个前提,A和B你得定义,而且你还不能这么定义cost a等于一不行,A得是个啥玩意儿,是不是个函数?
10:16
对吧?好,那我就把A定义成一个函数走,A是函数不是,哎,同学,如果你觉得这写起来让你烦,那我就这么写,正常函数方式A行不行?好,来,再走着funon function,这是BB也得是个函数是吗?啊,老师那要干嘛呀?A和B的,这有什么用呢?哎,先给注释给大家写上,那接下来啊,同学这就是人家的封装了啊,咱只能说尽可能的去引导大家,但是讲到API,讲到名词,讲到规矩的时候,同学那也是人家的规矩啊,你说是吧,人家规定好的呀,啊,我写这么一个注释看着啊,我这么说,我说呀,A函数的返回值作为状态传递给了UI组件。
11:14
哎,同学,你好好反应一下这句话啊,我说A函数的返回值作为状态传递给了UI组件,我们看图说话,同学,容器组件想给UI组件传点东西,你是不是得通过pro去传递?对不对,同学,但是你没有机会写出这个组件的标签,那你就也没有机会亲自的去写那个,哎,这个东西,你比如说亲自写啊count的UI完了传个A完了说等于一你没有机会写标签,所以说你也没有机会去这样写,对吗?那咋办呢?那就把你真正啊应该写在标签里的东西,这个A1作为A的返回值,那作为这个函数的返回值。
12:03
那就可以了。说老师这没懂啥意思,你看着啊,同学你注意啊,我让这个A呀,有一个返回值,老师返回个一吧。你觉得这样写行不行,你觉得这样写行不行?同学你看啊,A函数是不是有返回值啊。返回值是啥数字一,那我问你要把这个一是不是得传给UI,那么问题来了。你要是给UI传东西,目前你是不是容器组件容器给UI传东西,我就想问各位,根据图上来说,人家是不是得通过props去传递,那么大家也都知道S是不是都是一组一组一组的k value6啊,你这就传个一,那是啥意思呀?啊,我把一给你是直递过去了,得根据P去取出Y6吧,你就写了个一,那是绝对不行的。啊,说老师那得返回什么呢?你说在GS的世界里边key value6,你说同学他用什么表现,是不是一个对象啊,哎,所以说这块你得写一个对象同学。
13:12
啊,我刚才引导你吧,是尽可能让同学能把这记住,不能说直接说我想给他900,你就写个900那是个啥呀,那你看图说话吗?人家UI组件是不是得通过这么东西去取this.props点你比如说我写一个什么什么I叫做key,然后去取出Y6啊,你这直接写个900那是个啥呀?哎,所以说这儿不能直接写900,那写啥呢?你得返回一个对象,你比如说我想给你传一个number值,那就写N,哎,值是多少,900好了,说老师我这么一写完了就能把这个N900就传给UI了,对,其实同学你这么写就相当于怎么回事呢?就相当于这么回事啊,我给你写一下啊count的UI,哎,然后你传了个啥呢?N完了值是多少呢?一个数值的900,同学你这么写就相当于这段代码。
14:12
说老师那我亲自写呗,你没机会写呀,所以说你看人家设计的挺好的,说哎,那你看那这样吧,你给我一个函数,我帮你去调这个函数,我就拿到这个返回值的这个对象,我就把这个key作为prop key,我就把这个value作为prop的value。是吧?哎,好了,那咱给这写的详细一点呗,同学A函数,哎,咱这么说叫做返回的啥,对象中的key就作为传递给UI组件pro的P。啊,那再写value就作为传递。
15:02
给UI组件props的Y6,你pros不也是一组一组KY6的组合吗?那这不也是KY6吗?就形成一个对应关系了,好。啊。啊说老师这就能传过去了,对,那A函数的本质是想把什么带过去呢?同学,其实我们说就是把状态给它带过去,哎,把状态给他带过去。啊,那你猜猜B函数是干嘛呗?同学,看图说话,容器组件是不是给UI传递俩东西?1RE中所保存的状态啊,来,把这图往这边点,传递两个东西,一是保存的状态,状态已经靠谁传进去了,是不是A?啊,A函数是不传进去了,说老师你这写N900,这是我随便写的吗?啊好,那你看二呢,用于传递啥呀,用于传递啥是不是操作状态的方法呀。那也就是说这个B也得有返回值,返回值也得是一个对象啊来,那我们写着同学写完你就懂了啊,Return写着是不是也是个对象啊,你比如说同学啊加法,那我就用这个词加加。
16:18
那我就先这么搂着写着,回头再改,对了呗,是吧?哎,我这么写只有一个目的,能让你懂啊,加好了,它的值是一个走函数。这值不是一个函数吗?是吧,函数干嘛呀,就干一件事,CONSOLO1,好,那我把这一堆给它复制走,那这就得叫做B函数,返回的对象中的key就作为传递给UI组件pro key value呢,也是这个,但是这个里边它想传递的不是状态,而是什么呀?操作状态的方法明白不?那你看同学我咋没写加完了让他是一个一呢?因为这叫方法吗?不叫,那我得写一个方法,你说对吧,好同学,你这么一写不要紧,UI就能接到东西了。
17:08
怎么能证明UI接到东西了?非常简单,我在UI的render里面,各位我consolo一下this.props是不是就得了?前边加点分格的文字叫做UI组件,接收到的props是来一个逗号在这里走,同学咱就一起瞧一瞧这事儿啊,我现在渲染的是不是有connect生成的容器组件完了容器里边我问大家是不是包着UI呢?看图说话,容器和UI是不是父子关系啊,完了你没有机会去写UI组件的标签,因为UI组件是在这这么传的,那就得靠这俩函数啊,这俩函数你给人家传进去,然后react-redu就能帮你调A,就能帮你调B,完了就得到这组KY6传进去作为状态,就把这组K6传进去作为啥加,哎,也就说方法好了,来咱。
18:12
您瞧瞧,看看是不是这样的,打开浏览器啊,输入咱那个地址local host的3000打开控制台,同学您瞧着刷新,注意观察UI组件收没收到props收到了有没有你写的N900有有没有你写的加是个函数同学,有没有,有吧老师他咋还传了一个这呢,这就不是我们所写的了,这就是他固定传进去的,哎,来同学把浏览器放在这儿。啊,控制台放在这儿,然后把咱的代码呢放在这儿来,我给你分个屏这边选择它。目录我给你隐藏掉,好同学你注意观察啊,我这边返回的N900这边是不是就收到了,我这边返回的加是个函数,那我问各位这是不是也收到了呀?好同学,UI跟容器之间能不能沟通数据了,能全靠啥呀?是不是全靠这个返回值,这个返回值啊,那现在大家明没明白我这为什么不能直接写900,你这直接写900同学,我想问这个K叫啥,人家是不是没法写了呀?所以说必须要求你写一个对象。
19:23
哎,就有些时候啊,同学我们必须得考虑明白,为啥他不能直接,哎说写一个值,然后你才能记住,而不是说真的就是死记硬背,你说是吧,好了,同学,那我说一个小事儿啊,就是这个行参吧,其实同学咱说你这用小猪佩奇,你说是不是都行,但是这儿不能用小猪佩奇,我是不是用了个A呀,同学用A呀,其实他也不太好啊,但是我先用着是吧,哎,先用着来走起。同学那你说啊,我先把这关掉,我目前所打开的是不是容器组件,同学,如果你说我传的那个东西的K不叫N,叫count,是求和,完了我写一个900,那我想问个位的是,你说来到UI组件里边。
20:13
啊,来到UI组件里边,我这的和是不是就能写了呢?你觉不觉得呀?划括号我咋写this.prop点我收到的谁cont对吧?因为你看我这边写的不是count吗?这个和吗?多少900,那我这写的是啥?是不是z.props是不是取出来,那这个时候回到案例,同学你看啊,来把浏览器放大刷新一波,900是不是出来了?同学觉没觉得图中这一步其实好像实现了呢?这一步是吧,但是你知我知我写那900是不是假的?同学,我那900是从里边取出来的吗?是吗?不是是吧,我写那900是写死的,但是你别说我写不写死,我这一步是不是完成了。那就得了呗,那你再考虑考虑这条线呗,是不是啊,那来吧,那咋办这条线。
21:04
那回到代码当中吧,回到你的容器里边,同学,你说接下来怎么办?这900咱不能写死吧,你说是不是?各位那咋办呀?那咋办呀,老师,那我明白了,我知道了,这900不能这么写,那你说咋写是不是得从re那边得到东西啊?那你看图说话咋得是不是得这么得呀?啊,你说老师那我明白了啊,我知道咋写了,我首先得把一个人引进来,就是死道,哎,你可能想到这点点嘎点点嘎,哎,完了找到re里的谁啊,死到好了,老师我引进来了,完了这900吧,我明白了,老师,我不能写死,我得死到点get state完了得到re里边存的那个零,完了给它传进去啊老师,我觉得这样写就行了。你看你分析吗?你到点get state是不是得到了Rex帮你保存的那个零啊,那个初始值啊,那你传没传进去,传进去了,那你回到这儿。
22:04
你看呢,是不是零。哎,但是啊,同学你不觉得这样写有点问题吗?同学我问一下你现在目前所处的位置是不是容器呀?同学,我想问一下容器里边需要你自己这么引入道吗?啊,需要吗?没记错的话,兄弟APP里边好像给他传进去到了吧,是吧同学。哎,说老师啊,好像有点感觉,就好像别自己引入,对别自己引入。那你要想引入,刚才不就引入了吗?说老师那这那那这这那这我写不下去没死,但是我不能点get state呀。同学,那我问你啊,A函数啊,注意听我说,你觉得A函数的使命是干什么的呢?A,函数的使命是不是就是把状态传进去啊?而且同学就这个容器组件是不是其实已经收到了死道啊?
23:06
而且我问大家,A函数是谁帮你调的呀?是不是这家伙呀?那这家伙要求的,你得传俩函数吧,完了第一个函数作为什么用传递状态用,所以说同学这边根本就用不着我们自己在这到点get state获取状态。React杠,当你调A函数的时候,已经帮你把状态传过去了。你只需要在这儿接收一下即可,那所以说这个时候count的值你直接写state就可以了。哎,体会体会,不用你自己亲自这么费劲儿,找道点儿哥们儿,我要你状态get state得到,哎,我传过去博士,人家帮你调A函数的时候已经帮你调完了,到点get state,而且把返回的状态传给你了,你只需要接收递给UI组件就可以了,所以说回到页面啊,等会儿我们刷新一下,看效果东西是不是依然有啊,哎,这就OK了。
24:18
同学觉没觉得图中这两条线我都走通了呀,是不是?哎,好的,走通这条线了,那也就意味着各位。我已经能在我的UI组件里边成功的读取到了谁里的值吧。我读到了Rex里的那个值,但是我想问大家,我掉了任何re相关的API吗?对于我的UI组件来说,嗯,你见到了吗?你见到dispach了吗?你是不是通通没有见到啊?那你见到的是什么呢?你见到的只是你调了一下你父亲给你的方法,或者说你只是读了一个你父亲给你的属性,你觉得呢?啊,你父亲给了你一个count,那么试问一下,你父亲的count是打哪儿来的呀?父亲的count是不是从这接到的呀?
25:17
啊,那是不是调的时候人家帮你传好了呀,哎,好了,来再往下看,同学,我问一下我给没给我的子组件传了一个加这个方法传没传,传了回到页面中刷新看效果,我的子组件接没接到,嗯,UI pro吗?接没接到接到了。然后呢?那就在该调的时候调用呗,你说对不对呀,那APP关掉,来到我的UI组件,好同学找到加那个回调是吧,在这儿呢,咋加。是不是得调用父亲给我的加this.pro点加加对吧?哎,就这么low,就先这么写着,好了,同学来我调一下走,那你说现在是啥效果呢?当你点击加法加的时候是不走这回调一走,这回调同学是不是掉了父亲给你传过来的加,那父亲传过来的家兄弟是不是在这儿呢呀,那控制台是不是就输出那一了呀,好了,来走着回到这儿刷新。
26:23
把该清的清掉来,我点一下加走同学怎么样?一是不是输出了。啊,那来我选三呢,走是不是还是输出一呀,为啥呢?因为你写死了你父亲那说了只要有人点加你就输出一,但是我的目标不是这样。同学,我的目标是这样,用户是不是选了一个Y6值,你把这Y6值交给父亲给你的那个加方法,你调用你父亲给你的那个加方法的时候,你得把啥传进去呀。是不加几那个几传进去呀啊那最好咱是不是写了一个星一咋个意思,是不是把它转成那个数值类型啊同学我问你啊,掉没掉,父亲给咱的家掉了,传没传,只传了来到这个家方法,我问一下这你接了吗?这你接了吗?没有,那接一下来走叫做啥date是不是数据,那这输出的是谁?Date是不是就可以了呢?来回到这同学刷新一下看着啊,我选三,我要加咋样是不来了。
27:29
那同学你告诉我吧,在这个里边我们不想做这么无聊的事,Consolo a data,那你说在这里边我得干嘛?在这里边是不是得通知redux去加一,这事是不是就打通了呀?好了,敲个回车,写好注释,叫做通知res咋的执行加法?是不是就行了呀,值你看我也给你了对吧,那怎么通知执行加法呢。
28:02
想各位怎么通知Rex执行加法?那就得回到这个图来看了。同学,你想让Rex帮你干活,你说接下来怎么办?你是不是得dispach一个action,你得到点dispach完了,你说你加人家是不是才能帮你加呀?哎,那所以说你告诉我这得怎么办?同学,Store到点dispach吧,哎,Dispach一个啥玩意儿啊,是不是一个对象啊,里边包含啥type类型,你想干嘛,是不是加,加咋写来着,是不是increment,那加几啊,Date的值呢,是不是你这接到的date呀,那这我不写date,我换一个刑残同学,我用number是不行,加几我得听number的,是不是这么一个情况啊,那这当然不是这个是吧,还是store是不是store点啊。问题来了,同学,问题来了。
29:00
Store能找见吗?你看报啥错误?Store is not DeFined那咋办?哎说老师,那我就得引入star来,咱先引入着啊,我知道这样做不太对,先引入着是吧,点点盖点点干,诶,点点干点点干,找谁呀re谁呀star。死道就位没就位了。子组件只要一定要用加是不是收到number这里边二话不说来通知redupa加加几加这些是吧,来试试看看能不能加啊,咱试试呗,看一看回到页面当中,那注意看我选择三,我点击加同学,我问你加没加。加了吧。是不是同学来捋顺一下,各位走走走走走,我是不是在UI组件里边只是调用了父亲给我的家,我可没调用任何Rex相关的API啊,我可没有,我就调了一下我父亲当年给我的家,然后在你父亲这个里边,这个加收到了你的值,然后告诉redux开始加,那同学有一个不合理的地方,你是不是又引入到了呀?
30:13
那这怎么办呢?同学,你说A函数的目的是不就是把状态传过去,所以说人家帮你调A的时候,人家就真把状态交给A了,完了说,哎,那接下来由你决定吧。是吧,那同学我想问你啊,这个B函数的使命是干嘛的呀?B函数的使命是干嘛的?是不是专门用于传递啥?是不是操作状态的方态?那我想问各位,咋操作状态呀?啊,咋操作状态呀,你不dispatch,你怎么能操作的了状态呢?所以说同学你觉不觉得在这个里边,在B函数里边,你是一定一定需要一个人的,就是到点pach。对不对,在A函数里边,你是一定一定需要一个人的,就是里边所保存的一个状态,那人家就把状态给你了,那你说在这儿我一定一定需要一个什么东西,是不是dispach,正如你所想,他把dispach传给你了,这你也不用自己再到点了这个store也让他下课吧。
31:14
哎,所以说同学,人家设计的让你传两个函数,那人家一定就对这两个函数有所处理,对吧,不能说你传了俩函数完了,人家帮你调这俩函数的时候,人家默不作声,什么都不传,啥都靠你自己是吧?那我们还用这个库干嘛呢是不是?哎,好了各位啊,说老师呢,这就行了,试试他,那你瞧一下效果啊,打开控制台编译完了没报错,回到页面当中刷新,注意看我选择二来加同学加没加。加了OK不OK是吧?同学,你在我的UI组件里边,你是看不到任何redux相关的API的,我就调了一下父亲给我的家就完事儿了,对吗?哎,所以说同学说到这儿react杠的逻辑咱基本上就说通了,但是还有一点点不合理的地方。
32:08
这是啥?兄弟,没记错的话,这玩意儿是不是叫action对象?Action对象完了就自己写,自己写一个对象亲手写,同学记不记着,我们有一个东西在redu里面放着,专门有一个东西叫action啊。那你觉得这哎你告诉我咋写吧,各位这里边得引入啊,引入谁呀,From点点杠点点杠re里的谁谁哎action。然后引入这个东西叫做create什么action,是不是increment action,那你这别靠你自己写呀,是不是,哎那咋写是不是写这个来走那加几啊,是不是传个number,那这是不就得了呀。对不对,各位,哎。甲。好,那再多说一个同学,就是这个名字用A和B啊,其实有点不太合理,人家官方给我们名字了,老师的名字叫啥呢?老师呢,我看看控制台,控制台不会告诉你叫什么名字的。
33:12
其实同学从理论上来讲,我问你这叫X,这叫Y是不是也行,但是咱得标准一点。啊,咋标准呢?同学你看着啊,我如果让A函数没有返回值。哎,同学你说他是不是就犯错误了呀,他是不是没有返回值啊啊或者说同学我让他RETURN1,你是是不是也犯错误了,因为人家说要返回一个对象,没有对象怎么形成k value6,没有k value6怎么作为pros传过去是吧?那你说我就返回个一是什么后果呢?保存回头来看走刷新一波,等会儿同学你看啊,他说什么,他你看他是说什么啊。Map state。Map啥意思?地图是不是有这意思?其实还有一个动词的意思,Map叫映射。
34:01
State啥意思,状态to变成啥props啥,哎,就咱学的那个三大属性嘛,Pros,那所以说同学它的意思是。映射状态变为pros的那个方法,必须返回一个plan object,返回一个一般对象,那同学你说其实那个map state to props这方法,同学你说说的是谁呀?啊,是不就是我们代码中的A呀,因为A你没有返回一个对象,但是人家给你报的错,同学你发没发现,人家可没这么说,说A没有返回一个一般对象。回到页面中人说的啥呀?是不是map state to props呀。所以说各位。这不应该叫A不太好,你说A的使命是不就是把state变成pros传给UI啊?所以说我觉得人家起这名字还是可以的是吧?同学咱又不是说舔着他说这东西好就是好,不好它就是不好啊,那你看这人家设计的map啥state完了兔啥props,建名之意呀,映射状态呀,变成pros呀,这不就解了吗?是吧?哎,那这好好写着是不是count?哎,把了值是不是state?
35:16
嗯,State是啥呀?State不是别人,就是里边帮你保存的状态,就那零对吧?嗯,是不是传给人家了?嗯,KY6OK呗,好啊,来同学,那你看着这啊,我return的东西目前我这么写,你说return的是不是一个对象啊。好,我瑞看看一同学,你说谁就错了,B是不是就错了呀?那你看他报的什么错误呢?回到页面里边刷新,同学你看他说的是啥?同理他说你你这个映射dispach变成prop,那个东西必须返回一个一般对象,所以说同学回到代码中这块叫B是不是不太合适,那叫什么名字啊,Map thispach,然后呢,Two props。
36:09
Map dispach同学,人家说的也挺合理的吧,你是不是接到dispach了?那你这里边是不是用到dispach?那从而导致UI组件是不是能操作状态了,那你不觉得这也是一种映射吗?哎,好了,那这同学别返回一了,那返回啥玩意啊,走是不是得返回一个对象啊,那对象里边是有一个加的那个加的那个方法呀,啊来咱自己再写一遍,那加的方法是不是一个函数啊。啊,那这个函数是不是能收到一个number啊,对吧,来看看UIUI里边掉没掉加掉了啊传没传值传了,哎回到这接不接,哎接里边干嘛。里边干嘛?哎,你得这样,是不是dispach点咋的啊,Dispach得调用是吧?啊dispach,那然后呢,是不是得分发一个action呢?但是action别自己来呀,是不是得借助它呀?啊,那加的是多少啊,是不是number啊,那这段代码是不是能精简呀?箭头函数的左侧只有一个参数小括号是不是可以省略空格,那么箭头函数的右侧只有一句话,那你说这个画括号是不是也可以不写,这是不是就结了呀?啊那这的名字是不是得改一下,别叫B,是不是得叫这玩意儿map dispatch two pro对吗?好,那回头来到这,咱刷新一波,首先初始化没问题来,加一就加一,加三就加三是吧,可以啊同学,你看看这个流程是不是就跑通了呀?
37:45
哎呀,同学,此时此刻你想一想,我们写了过多的代码吗?没有,是不是就写了一这个,写了一这个呀,好,来各位,咱把东西呢再给它好好写一写,这不叫A函数了,这叫做map state to prop函数,是不是啊,那我们把这个注释呢,给它拆成多行的,省得大家看起来比较乱啊,走着,我先写第一点走。
38:10
目录关一下啊,首先第一个map state to props函数返回的来写上叫做啥是一个对象A,这是你第一个需要注意的,然后第二个啊,返回的对象哎,中的K就作为传递给UI prop的key,那同理,Value就是I prop的value啊好了,来把这个再往下落,再往下落,第三点,然后是。把它写过来,Maps state to props,用于传递状态完事,所以说人家才叫做map state嘛,对不对,那么这三个复制来到这里边,给它一粘贴,同学名字一改,这叫做mappa啊,也返回一个对象啊,这块也是同样的,那这块主要来走用于传递啥东西操作状态的方法,对吧。
39:09
哎,好了,这是这菜,但是现在你这么写啊,同学,你是不是只能完成加减,你是不做不了啊,那来呗,那就减呗,那同学你说你给人家传递了一个家,那你这是不是可以再来一个叫做减呢?啊,咱先这么搂着写啊,一会儿我再整体给你改这名,那你说是不是也是这一堆东西也得给我个number吧,我也得dispatch吧,但是这是我创建的,是不是就不能是加的action了?那你说我创建的是什么呀?来这写个逗号,Create是不是得是减的action呀,对吧?复制然后呢,来到这走创建减的action是不是就可以了呀?哎,那这回回到,诶不能马上看,你得回到你的UI里边去做对吧,那这得怎么做,UI里边就得调父亲给他传过来的那个减法,你说对吧,那这就得写什么呢?减啊,然后减这些值对吧?啊那来把这个加法呢给他复制,这是不是说奇数在加呀。
40:09
啊,那奇数在家,那你就得写判断呗,啊如果怎么的,然后你再执行这个加那条件写啥呀。当前求和如果是奇数,是不是在家,那当前求和是奇数,那当前我怎么得到当前呢?我怎么得到那个值呢?同学,你这咋得的?是不是这么得的?那你这是急什么呀?是不是可以this.prop.count父亲给我传过来的嘛,Reus里的值嘛,哎,如果你除二,哎,取它不等于零,那就不是偶数呗,那就算是奇数啊,好,那就这么写,哎,奇数再加。对吧。哎,好嘞,同学,那咱看看啊,这几个能不能用啊,刷新一波加一加一加一啊,减一减一减一,好,那当前求和为奇数再加,那来咱试试这么点没效果,那三的时候是可以的,对吧?啊,那这一遍一遍的输出挺烦,咱可以给他助掉一下,那回到哪儿呢?回到render里说老师他咋一遍一遍的输出呢,各位页面都能看到最新的效果,那你说render是不是得多次调用啊?哎,好了,那回到这儿,咱把这一行先给它注掉,那同学你告诉我这个E不加怎么办吧。
41:31
嗯,这个E不加,自己在这写定时器,没记错的话,咱们之前是不是写了这么一个东西呀,叫做create increment a s action,你说呢,那所以说你这怎么办?再给你的子组件传一个叫做加async,对吧,加a think,然后你再把这个东西哎给它写在这儿,还是收到值,还是dispach,但是这就不能写它了,就得写创建加的异步action,再写number对不对?好,那回到这个里边,你这得怎么写呢?this.prop点加,然后是不是a think呀,那你把这个词给它拿回来啊,给它放在这走那一步加多少啊,Y值乘以一是不是转成数字了呀,那回头来到这,咱刷新一波,加没问题啊,那减。
42:31
单呢也没问题,奇数在家也是可以的,异不在加,诶等会注意看啊,异不在加,好像一下子就加了,那检查检查吧,咱哪出问题了呢?啊,回到咱的代码当中,你是不是说你加呀,但是你少传了一参数,大家记不记得了,哎,我得等500毫秒是不是在加呀,这是不是得多传一个500啊,那你这多传了这个500啊,我问各位,那你说你回到这儿的时候就不能光接到这个number了,你说对吧,各位是不是就得写一个叫做time呀,啊说老师为啥这里接到两个,你这个方法是不是收到两个呀。
43:12
按住CTRL键点进去,同学人是不是收到两个当年咱写的,哎,那所以说你这怎么办,这time呀,是不是得多递给人家一份啊,哎,那这回呢,咱再看看刷新一波啊,来走等500毫秒是不是可以了,来走等500毫秒是不是可以了?哎,那同学咱捋顺捋顺呗,那你说其实从头到尾啊,我给你讲react-re的时候,我好像从来没碰过别的文件,一直在写这容器,你说对吗?从最开始引导大家说容器如何产生,一直到现在以经完美的把状态以及操作状态的方法是不是传递给UI了呀。啊,好了,那这会儿也给大家写上注释,这叫做引入action对吧?那这东西越来越多了,我们是不是可以回车回车回车,然后在这儿再来个回车,这是不是就可以了呀。
44:11
哎,希望这会儿呢,大家多练一下,一定对这儿有所体会,所以说同学你觉不觉得核心就是谁呀,啊核心就是谁,是不是就这个connect。Connect传第一个函数干嘛,映射状态,传递第二个函数干嘛,映射操作状态的方法,然后这传UI什么意思?什么意思啊,跟谁做关联对吧?这一套就都完成了啊,这是一个比较难的点,大家下去一定要多加练习好吧,哎,我已经尽可能的呢,把一些错误也都展示给大家看了啊,说这为什么返回对象一定是自己理解性的记忆,而不是说哎呀,我感觉好像返回900也行是吧?嗯,哎,同学考你一下啊,看看你是否真的听懂了,我这叫SYZ咋办?
45:03
我有没有把状态传给UI,传了那个K叫啥SYZ,那所以说各位我问你啊,回到UI里边,你觉得你这能该是count吗?不能了,是不是得是SYZ,哎,好了,扯回来,咱不写SYZ啊,那我再问一下啊,同学,如果说你在这传了一个ABC,你说咋办咋办吧,你在UI里边,但凡你想加的时候,是不是得写ABC,因为父亲传给你的那个pro的名字就叫ABC啊,撤回来我们就用加,那撤回来这也用加好了,哎,这就是整体的这一块,还有就是同学对这你得理解一下啊。你这个map state to props不就是想映射状态吗?那人家肯定会把状态给你的。那你这个map dispatch to props不就是想操作状态吗?想操作状态你觉得可能不用dispatch吗?必须用100%用,所以说人家诶,Thispa我给你啊,哎,好了,同学多加练习,这小节暂停。
我来说两句