00:00
呃,下面呢,我们来去啊,把这个题往下写一写啊,这个里面呢,我们主要是来来去确认一下往这一个包装的组件里面传些什么东西啊,这个很关键,那在哪去做统计的事情呢?我们选择是在这个里面做的,它接受两个属性,一个是pros,还一个是叫context,哎,对吧,是super吧,其实这个也可以传过去,就这个它有接收的代码,其实好。那我们要在这里面去做些什么事啊?我们最终是要根据这两个想办法收集产生两个对象,对吧?哪两个对象一个,我们一个取名叫哦,来,我先把名字取出来,一个叫state pro。
01:05
是一般属性的对象对吧?包含啊包含啊一般属性的对象,而下一个呢,是包含所有什么,是不是函数属性呢?包含呃,函数属性和对象啊。来,我们先把它这个好做,我们缺什么我们再补啊,其实我们想到我们的目标是干这个事情啊,来先说这个。这一个里面的对象是不是通过电话他来产生的吧。能不能它是个函数,接收一个是对返回一个对象,而那个对象就是啥对吧,那关键的一个问题就是我执行他没问题,要接收一个什么,是不是接收一个state。
02:02
对,不但我手里有state吗?没有啊,我得去想办法得到state对不对,谁可以得到STATE10多对吧,那我就要先得到什么,先得到十多十多好得十多号在哪个里面。不是在prop里面,因为现在已经变了另外一个组件了啊,开始在这是pro里对吧,这又是个新的组件了吧,这相当于子组件啊,这个时候怎么的啊,就看T似的,点十度就能得到我们的什么十多,这我们要反复用的,先放。就是一下就搞定了,其实这个很简单,难就难在下一个。对吧,包含函数属性的一个对象,这就很难受,虽然说这个对象里面也是包含函数。
03:02
对吧,但是这里面的函数不能满足我们的要求,虽然我们会用,但是不能满足我们的要求,那现在呢,我们要去专门再去定义个函数来做一个封装,因为这里面呢,不是一条鱼就能搞定,它挺复杂的。啊来,我先定一个名字,记住哈,那我这个名字呢,会叫这样一个名字叫Dis pat啊pro,我主要想说明我的那个里面函数都会用到dispa这样一个语法。懂不懂好啊,这个名字呢,叫什么呢?我来写一写,叫为什么要取这个名字,到时候再说,你看它能提示,其实这是呃react干re里面他用了这个名字,所以我也用这个名字了啊,他既然觉得这个名词,那我也用它相仿他做嘛。传什么呢?传这个啊,你去封啊,不用我不管,你去封装,返回一个我需要的就行。
04:06
能不能,所以怎么做,那总会在想嘛,是吧,但这个不能直接写这些类似点。认懂吧,写时间,那我这个方法得怎么定义啊。就得这么写吧,这么写是不是意思里面可以看到。能不能好传什么传这个是吧,好这个大家说一下。啊,这个函数呢,它是用来干嘛的,它是根据它。对吧,去返回或者生成一个包含啊,就是包含dispa,包含分发X的吧,啊分发啊action。包含N个分发action的函数的对象。
05:05
的函数的对象,嗯,也就是说什么意思,我这个对象里面。有很多方法对吧?有很多方法假设叫FN1 FN2,而这个函数内部会写到什么代码,是不是P?那么呢,现在我只是得到这些函数啊,我有执行吗?还没有对不对,还没到执行的时候,我先得准备好啊。而这些函数最终会传给谁?这些函数。最终不得传给传给他对吧,它里面是不是会掉啊。嗯,好,那这个得想办法去什么。他是一个对象,我根据那样哪家去可以用一下,又用一个技术了,叫什么呢?叫reduce啊,但是这样整不行,这样整它是个对象,它没有这个方法,对不对,它没有这个方法,它是一个对象,我们的数组才这个方法吧,对吧,还是我们前面搞的一个事情,怎么弄呢?包jack.case来它呗,这个是所有属性的数组了吧,啊OK,当然你要不熟练,你可以先说啊,还是刚才那样,我们先得到所有的什么,是不是K,对,不再通过case去什么。
06:38
是不是60?好,先确定一下初始值是一个什么样的东西。是个空对象嘛,对不对,好接着再确定前面的,因为这很关键。能看到好前面的是这么一个这么一个语法。对不对,好,记住这里面一定有return,包括这一个也应该是一个什么return。
07:06
啊,记住这里先写好,因为一不小心就忘了写了。懂基于什么,我们得算了是吧,好这一个我们是不是应该有一个。好比叫我加,那就没意义了,应该最终叫可以叫这样一个名字啊,叫这个,叫这个吧,因为最终我想得到的是一个他。能不能看到好第二个参数了,可以吗?然返回的是谁,就他是不是啊就是它。但是在这之前,我是不是要给这个对象添加一个什么东西,对吧,添加一个方法吧,对不对啊好,那添加属性,那那属性零是多少呢。
08:03
对吧,属性名是不是同名呐,对吧,同名。好,等于。函数啊,是不是能看到吧,啊这一个就是给啊。添加一个什么呢?叫包含disp语句的函数啊,语句的方法这意思吧,方法名是不是跟我前面的名字要一致啊,我如果叫I message,是不是你也叫I message。好,这里面有一个事情大家看啊好,那这个里面啊,这个里面干嘛去。我们刚刚说过了,这里面要包含什么,Dis despite,那缺啥,缺那个多呀,是不是多,怎么读啊啊these.context点是多,但是要注意一定要用建筑函数。
09:16
听懂不?你要不用进函数,这个意思就不对了,哎,这个这个这个这个再下,我不管它都用进函数,肯定就没问题。啊,OK把用上啊,当然你也可以在这里面是不是传输过来。可以传播,可以,我这有十多啊,我完全可以传的,也可以传的。看到没啊,但是你只要用进的函数基本上没问题,因为瑞是这么调的嘛,嗯。好,十多接着。爹,Dispatch。这里面是不是要接收一个action是吧?设计出来什么关键action怎么产生?
10:07
对吧,我们这一个这个里面是不是很多个actions啊,Actions对不对,怎么办啊,你现在取到某一个,取到某一个,这是某一个X create函数啊干嘛括号关键有个非常严重问题,这里面可能需要参数。太没劲了是吧?啊,其实这一个函数是不是我在组件里面调的呀,这是我最终是不是传给action create的关键,传什么呢?随便你不不确定,有时候可能有的没有传对吧,有的可能传了一个,有的可能传两个,而且名字还不一样,对不?其实就是一个什么事呢,我这里面接收数据是不是他们俩应该一致就行,说白了你调用的时候传什么,那就给他传什么。
11:06
这个怎么办呢?啊,这个有一个有一个有一个概念,其实它这里面就是一个技巧概念,名称叫透传。什么叫透传呢?就是我接触了以后,我员封封的传给你,传给下一级的业务,懂不懂我也不知道你传的什么。其实我根本就不不用关心你穿的什么。说白了,我们是不是决定知道这两个肯定是一样。对,不传的参数是一样的。怎么做呢?哎,点点点X。再来一个点点点X。我相当于你把你传几个,你比如说你传两个,那我是不是收集到这个数组里面这个数组吧,接着呢啊,你看到我这一个相当于是在打包。
12:02
懂不懂,我这个最终是一个打包,我定义函数嘛,是吧,而这个呢,拆包,因为我是调用函数。看到吧,我我这里面是不是把这个数组里面所有的里面的元素是不是都取出来一个一个传呢。啊,这个东西叫什么呢?叫透传,什么叫透传啊OK,将接收啊加函数接收到的参数传递给传给啊原样传给内部函数的。我就是说我的函数是不是接收一些参数是吧,其实我这是在调用函数,大家看的你要明确什么时候在定义函数,什么是在调用函数,这明显是在什么定义函数和下面是在干嘛调用函数。
13:12
这个啊,也是大家去可以跟人聊的啊,比较透彻,就是你要能说出一些啊,可能大家不知道的一些概念啊,你能说清楚啊,肯定就跟别人不太一样。那好了,那我大家看看啊,我现在去调用那我定义的这个函数,把它保存起来,最后将它什么是不是整个保存后的这个容器给它返回啊。反馈后,那我整个。就写好了。啊,这个地方啊,这里面把这个写一下,这个是在干嘛,是不是分发啊,分发action,大家要知道一旦分发action。
14:02
会干嘛去?看到你看啊,分发action啊,我这里面不有一个最上面,诶不是这个文件,另外一个文件,这个文件这个是分X吗。对吧,啊,首先是不是取一下最新的状态,接着了是不是要去通知所有监听。但是我监听了吗?我现在有监听吗?我现在没了,为什么以前本来是有监听的,本来在这里面有一个监听的。对吧,但已经被我什么他被我删掉了,看到了吧,那你想想,相当于我现在是不是一个进去都没了,你状态改变了有意义吗?你会变吗?不会,说白了,我的这个大家想啊,我的这个里面啊,是不是会给他们传递属性,他们会变吗?不会啊,你没有监听呢,是不是OK。
15:09
这是也是大家需要去考虑的一个问题,还有我们的属性啊,我们现在两个属性对象是不是都搞好了,下面怎么把这两个属性传递给他呢?对不?大家看这是在两个不同的函数里面吧,一个在render里面,一个是在里面。是吧,啊,要想让他们知道有两种方式,一种大家看到我,我最终是这么设计的,我是把这个里面的所有的属性都保存到里面去啊。再看啥将?啊,一般属性,所有的一般属性啊,所有的一般属性啊,都保存了什么呢?State中。
16:00
啊,而将我们的这一个函数属性,所有的函数属性,所有函数属性的对300保存在哪呢?组建定向中就可以了,这为什么有两种区别的搞法啊,这个得说一说,因为函数工艺它本身变化吧,它不会变化的,但是一般属性它会变吗?会啊,它会变,关于这些问题。啊,它会变化的,所以我们放到状态里面去啊,一旦它变了啊,我们就可以去重新的去处理。啊,说白了就重新渲染子主页。嗯,那也就是说我们现在是不是要去初始化状态,因为我在看下里面嘛,不初始化状态吗?那状态里面有哪些属性呢。这个是不是所有属性的对象我能放这么放吗。
17:06
那么呢,不能,其实我等于它是不是就可以。对吧,或者说或者说我这样啊。诶,这个。也可以这样,我新建一个对象吧,这样。看没看懂啊,说白了,我现在state里面有哪些属性,现在对于我们当前环境来说。对于我们当前的这个情况来说,我们当前做的这个效果来说,有哪些熟悉。应该有两个啊,一个是一个什么messages。对不对,因为我传了这两个嘛,到时候我用上了这两个。啊好,还一个还一个就是我们所有的函数,我就直接存在什么呢,上面就行。
18:06
存在地址上面,我的这个render到时候能不能看见,能吧,下面我就是要去传属性了,这个应该好做了。我们所有的一般属性是不是要传?怎么穿?点点点this点。这意思吧,好啦,下面呢。是不是还有函数属性呢?再来个大框。干嘛点点点this点啊来,我们刚才叫了个什么名字,叫Dis pro。是吧,但现在啊,还不够。啊,我们没有监听。对吧,我们没有监听啊,说白了就是一个一个什么事呢,我们在这个里面啊,去分发了一个action。
19:04
分发action以后,大家在想啊,我们这个时候是不是要去得到了一个新状态,接着去通知所有listen,但我有listen了吗?没有。没有历呢,是不是相当于不知道啊,就不知道redux里面的得到了一个新的状态,那不行呢,对不对,所以我们要去啊注册监听。对吧,在哪注册监听呢?就这种事情我们经常会在这里面做,第一答里面做。这时候我们是不是要订阅监听对吧,怎么订阅呀。啊,对吧,OK,这个地方是不是多才有注册监定的方法,那我现在得到是多吧,this.contact点度是吧点。
20:06
监听不就是函数吗?是不是啊,这个回答函数就它吧,好在这个里面干嘛去,大家想想看啊,现在我的redux里面产生了一个新的状态,对吧,我是不是要去更新我当前的状态。是不是只要我的状态一更新,你想想看,它接受的属性是不是就变化了,这一步非常关键。这个函数调用说明什么?说明re中的是不是产生了一个新的状态,产生了啊,一个新的什么state?那既然它产生了一个新的事例,那我要将这个新的事业是不是更新我当前的状态啊?那我现在就要干嘛去了,更新当前组件的什么状态,而我组件的状态是不是传给了我的下级的被包装的组件?
21:08
他是不是就感受到了,那自然就会重复了。那下面来啊啊OK,更新state this set state。是吧,是要传一个对象的对不对,好关键啊,关键我们里面怎么得到那个状态的是吧。啊,刚才你怎么得状态的,你现在还怎么得啊,大家看一下我们刚才是怎么得到状态对象的,对不对啊,我们是不是调用它呀。是不是是好,那我是不是一样啊,我这边也可以调吧,大家看一下我的这个,我想去调用一下,它这不是在外层吗?都可以看到,这实际上是个很,这里面有一个东西叫壁波,有很多东西都是通过B包来保存的。
22:06
因为现在我们的函数嵌到是不是很深了,那很多外围的属性是不是里程也在用啊,那必然就是会产生B包的,有这一个方法一直都在,是不是一直都在,那我们就很清楚了。大家看到我们。叫呗,取。怎么说是不是需要state呀,State呢啊取啊取的话是不是取最新的对不对,通过十度取是不是取到最新的,那所以我最好先干嘛呢?先得到十度对吧,很多事都需要它是吧?接着通过store去订阅监听吧,是吧?一旦redux中产生了一个新的state,那我就应该干嘛去了,更新状态来获取一下多点get state。
23:09
啊,这个订阅也应该对啊,这个也应该都改成进的函数啊,只要是只要涉及到这样的啊,你不管用不用意思,你其实你都可以写成进来数,肯定没错,是这意思吧,啊OK好来啊大家看一下这样的一个情况,那实际上这整个就是我的这个对象吧,啊状态对象嘛。啊,这个地方它其实是说实话是有一定的流程的,这个大家去说一说啊,这里面有几个东西啊,一个是redu吧,对吧,还有一个呢是react杠,什么re啊react-redu啊,它里面呢,就会去包装我们的一个容器组件。
24:10
对吧,容器组件呢,里面会有什么包装的UI组件嘛,UI组件里面假设有个按钮。有个按钮它来做更新的,你看他怎么做了,这一个上面它会去调用是不是一个更新的一个函数。对吧,而这个函数内部会执行一个什么代码。对吧,那派是不是找到这里来,是这个里面定义的呀。是不是在这个dispatch里面,他会做两件事情。哪两件事情?第一个获取调用R获取什么新的state?保存吧,接着干嘛去?通知不是监听,是通知所有监听懂不懂,通知所有监听,说白了,调用所有监听函数。
25:01
是不是这意思?那你想想看,你的容器组件在这之前先得干什么?先是不是得绑定鉴定。要不要啊,要说白了,你开始是不是把监听感应监听塞给他对不对,那一旦他调用监听,你是不是就收到了这个消息。那收到的消息你要干嘛呢?你是不是要更新他自身上的状态?是吧,所以说容器组件肯定是有状态的。对不对?容器组件内部是不是有状态,而我们容器组件的状态最终会传给谁?子组件,也是我们平常说的UI组件是吧,一旦我的状态更新了,大家想。子组件是不是就会重新的渲染?扔了吧,我接收一个属性,接收一个pro。
26:00
它如果变化的话,那我是不是也跟着变,是完了吗。嗯,OK。那。他的这个是有一个基本的一个流程的。不过我们得看一下我们的这个是不是写对了,还不好说,现在呢,还有什么。看是差的。呃,这个写的什么?State啊,这没有,这没有啊,对吧,来我这里有state吗?没有我怎么得到state的,刚才写过了是吧?store.get啊,Stay是不是调一下。好,我们来看一下啊,啊,可能会有一些问题,我们再调一调,没关系,先得切换过来,现在还不是用的我的。对吧,还是用了原生的,用他们的啊,得改一改,那改的话大家想有哪些地方需要改,这个得自己知道,其实很简单,我们一共就两个东西,对吧,哪里会用到provider。
27:09
是不是路口GS啊是吧,在这边。是不是来看看点斜杠?我是是R吧,我写到二里面了,对不对,接着啊react杠什么诶这已经有了,这已经可以了,这过来了吗?能没看到啊,已经有了,这个改好了啊。改了,那下面还有哪个地方需要改,是不是connect容器什么组件容器组件在这里吧。是吧,好来看一看对不对,容器组件的connect这个呗。是不是好接着。点点斜杠。啊啊。
28:02
我们是12吧,啊,OK,把它改了。美女吧,啊,OK,这不就改好了吗?嗯,又过来了啊,可以。嗯,哎,那个其他的是用的是,譬如说我们的这个十多里面是用的二吗?还是用的一啊看一下。得了吧,嗯,那就说全部切换成我们定义的库了,就我们一共定了两个库,一个是redux,一个是干。那下面我们得看一看,我们运行了吗?首先看一下编译有没有出错,没有吧,没有出错不代表就正确啊,说不定它运行不起来都有可能刷一下先。好来啊,加一下这好像可以。是吧,嗯,OK。而且我们可以等会,诶,这个里面没有没有限制啊,我们可以看一下组件的结构啊,看它还是可以用的,这个虽然说不能用,它可以用。
29:05
来看一下结构最外层是谁?Provide,我给provide传了什么属性啊,传了一个十度,这不就是这个十度吗?而story里面有什么?有三个属性,Get,看到despite和什么。Cinema啊,OK。好,这里面还有一个事情,你看着我的这一个这一个provide里面有一个什么。Children是什么?就是我的这个纸的,就他们懂不懂,就他的孩子所有的子标签,所有的子结构是他的标签体吧,简单来说能不能啊,OK。这当前呢,是一个当前是个对象,我也说一说这个结构啊这个。
30:01
我的。简单的说一下这个东西啊,说一下它这个结构呢,有几种类,有几种可能性啊,有几种可能性,有三种可能性,如果没有指标线。没有子节点啊,没有子标签它是什么呢?结果就是案发是它定义好啊,还有一种情况,如果只有一个指标签。那它是个什么呢?它是个对象,那如果我有多个了啊,这里面大家应该能想到了,是吧?啊如果有多个指标签,那它是一个什么数组结构,但其实对于我们现在来说啊,没什么关系,因为我就是不管你是不是是什么,我都跟你原样的返回,能懂不,你是什么你去渲染。
31:00
啊,我没有对他们进行任何的处理啊,这个大家需要有个了解啊。好,来看一下里面的一个情况,打开这不就是我的那个connect吗?是吧,里面应该是谁啊。啊,OK,里面就是我们count组件嘛。是吧,就我的count嘛,有没有看到,而大家看到count,他接受了什么?啊,看看我们是不是给他传了一些东西,通过一定方传的吧,看一下点击它就能看得到。这不是我们传的,传了几个一般属性,两个count和什么message是吧?啊,传了三个什么函数属性对不对,而我的这个组件,我的这个组件我问一下啊,我不先不点了。这个里面有什么状况没有。
32:04
这个里面有没有状态,有没有,这是一个容器组件码,有没有状态,什么状态啊,其实就是count和什么呢?Messages来看一下。诶,现在终于看到另外一个了是吧,谁。能看到吧,诶,但是他怎么没有嘞。他没声明。你要接收contact的,必须什么声明才会,你才能看得见,不然的话你看不见。我们是不是子组件里面是有生命的呀,说白了你生命以后,诶你就能看到什么,里面有一个是多这个工具啊,一定要用工具,大家在做开发的过程中,无论是我们去写的项目,还是选view的项目。
33:02
一定要看工具,比如说你很多时候界面出不来,你都看一下数据是什么一个情况。啊,里面就没什么,里面里面的东西。嗯,好,这是这一个啊。那整体其实这里面,这里面最最难的一个地方就是在我们的这里啊,有这个函数其实。就他。通过这一次啊,这一天这两天我们用reduce,大家应该要把这个给用熟练了。它是非常好用的一个方法。好,那下面的时间大家自己看一会啊,把这个流程大家看一下。
我来说两句