00:00
好,现在我们用上也用上了,但是呢,这里面有一些啊,有一些问题,就我们这种写法有些问题。第一个问题啊,就是re与组件的代码耦合度其他是比较高的,什么叫耦合度?就是两个模块之间,两个对象或者两个东西耦合度高是个什么意思?简单来说就是我们现在是不是直接在组件里面用的是度。多是我们VS最核心的一个对象吧。能听懂不啊,而且我们现在是不是得自己去订阅。绑定监听。是吧,我们自己的管理钉钉,这个当前我特别简单,可以这么做,如果大家知道做一个项目的时候。外面是一个APP,里面是不是各种各样的组件很多嘛,不仅一个,我跟你说至少十几个,甚至20个都有可能对吧。
01:02
你想啊。你这个时候自己要去处理就很费劲。非常费劲。啊,我们现在太简单了,就一个组件DT。所以很简单,就这么搞一下。那这个时候就专门有人会去想这个事情。就设计了。这是react官方设计的一个库啊,叫什么呢?叫react。诶,左边是react。右边是什么AX。我们刚才问题的核心是不是涉及到组件react,组件与之间通信的时候是不是代码,我们说一个代码相当于说比较多,这一个代码耦合度是不是比较高啊。我们就要利用这个库来做这个库,其实取名就是这个用意。说一下他是用来去干嘛的了,用来去简化应用中使用。
02:06
也就我们里面已经用它的大了,但是呢,我又觉得编码有点有点复杂,怎么简化呢,引入这个库,那这个库。是一个独立的库吗?这个地方就要说到命名的问题。看这个名字我就知道,它必然是原插件。一般命名就会命名比较多,比如说我是一个插件,那我就会叫react叉叉叉。听懂了意思吧?能理解吧,比如说我们是不是有路由啊,叫干什么。Root。这一看就知道这是。插件。比如说我们后面会用到另外一个插件叫re,你说这是谁的插件?是的插件,是的插件吗?不是。
03:03
能区别开来吧,啊好。那这一个库啊,是一个插件,专门用来去简化。Reduction的使用。那。这个地方他一上来就提供了啊,两个两个概念,一个叫UI组件,一个叫容器组件,等会我再跟大家说这个概念。我们先来给大家说一下,他提供了API。他提供的API特别简单,但是用的时候会流点费劲。第一个呢?没什么是吧,他就两个API,一个是provide,这是一个组件。这是一个主件啊,到时候写真呢,是他的标签。这个组件标记呢,接收一个什么呢。石垛?我们原本把石垛交给谁了?我们本来把石头交给谁了?我们本来是原本将师拓交给的是谁?APP现在要交是多少?交给谁了?
04:04
Provider。还加吗?不加。但是AP是不是需要去读状态,需要更新状态?是否AB还是需要的,怎么做等会再说。还有一个语法叫什么呢?看看什么意思?连接什么意思?这个时候就要说到一个事情,我们的一个重要任务是要将react的组件跟干嘛呢?连接起来,让它好进行通信。靠谁呢?就靠这一个方法。就靠这个方法,这个方法很关键,但是他的语法呢,有点费劲啊,费劲也来写一写,来我来写一写啊,再说里面的语法需要的时候再看好,这个时候我先把这个做一个什么呢?做一个备份的处理。
05:00
诶。我刚才没有备份那个,呃。我们刚才那个的版本,刚才不写了一个版本。我觉得。哦,在。不是啊,我我刚才不是写了写了零二杠抗的没有写吗?现在我现在是一个是吧。是时间倒流了。来这个当前是个re本,我写个SRC02是吧,Count应用是什么版本版本。到时候大家好,直接看啊。那我们也可以通过呃,Get来管理来看,没有这么方便,因为同时可以看到多个听懂吧?好,现在我们要去引入另外一个库,叫react re,首先第一步看干嘛?
06:00
是不是下载这个包。没问题吧,而刚才我们说这个包提供了两个语法,一个是一个组件,大写的什么呢?Provider provider什么意思?Prevent。叫提供的意思。能听到不?提供啊,加了ER就不叫提供了,这这是名词了,那翻译过来就叫提供者或叫提供器,提供谁呢?提供什么东西呢?提供思度。啊,等会我们再来看啊,还有一个语法是一个函数。而且是个高级函数。Connect。Connect什么意思?连接是吧,好来我来用一下,它怎么去用的呢?首先。我要改掉他看好啦。这一个订阅不用了,一旦用上record,我不用自己订阅了,它内部会订阅。内部会去保定监听去知道需不需要更新组件啊。
07:04
来引入谁呢?引入它的一个主机。React g ras。这个吧,引入它有一个组件叫什么provide。那provider我这个时候还这么写吗?不知道怎么写的,这个时候看好了provide里面包着谁了?A pap还传多吗?不传把多交给谁?这个什么意思,而且注意这个名字必须写是多少啊,是他已经定好了。没问题吧,没问题,好,下面要说的是现在有问题了。我们的APP还有事多吗?明显没了嘛,对不对,那没了,那这个这个声明就不对吧,我们不能要是度,我们要是度是不是就耦合度很高啊,完全依赖于他了,对不对。
08:03
那我们不要失落,我们要什么呢?首先得说我们显示是不是需要有个count。对不对,我们来说一下我们需要什么啊,来这个时候点什么类型。Number,而且是必须的,对不?这个怎么弄好,有了它我是不是就能显示数据了?但光有这个不行,我们想想我们是后面是不是还要更新。是不是涉及到还要更新状态,而且有两个更新,一个增加,一个什么减少,这里面需要有两个两个函数类型的属性。你说第一个函数用来干嘛的呀?是不是用来去更新添加我的数量的,还有一个。
09:03
叫什么?我也就假设我接收到了这三个属性。我就不用吃多了。你来看,假设我有了这个count,那你说我显示该怎么办?我写什么?点点什么好,是不是简单好,那下面后面我要去添加我怎么做。只需要去调哪个方法,This列pro点什么什么。那下面这些事情。是类似的,只是我还是吗?是第一,你别管我后面怎么做到啊,你反正只要有了我们肯定能这么做是不是?那里面的这个也是类似的。也是类似的,只是前面先要得到什么好。
10:08
对不接着这一个是这样子的。有问题吗?没问题,现在你再来看我们的这个组件,有用到redu相关的语法吗?完完全全没有。但是他有个要求,你必须把这三个东西传过来。这,这是一般属性,这是两个什么函数属性?能听到不?而且这个值应该是从状态里面,从的状态里面获取的是不是。而这两个函数内部肯定要去分布,去更新吧。不然的话怎么更新状态呢?啊,你反正要把这两个三个东西给我传过来。这两个这个组件在。这个库里面它有一个专门的概念,我们刚才说它有两个概念。
11:02
就是react redux,他一上来提出来两个呢,叫一个叫UI组件,一个叫什么呢?容器组件。而我们当前的这个就是UI组件,UI组件什么意思?用来显示界面的组件?我这个就是用来显示界面的吧。对不,它本身有显示的去跟进行通信吗。没有。那这个UI组件我们不写在这里了,我不写在这个APP呢,专门一般我会去写一个文件夹。叫什么呢?叫components。而后面除了UI组件,它还有概念叫什么?容器组件。那这个时候我再会建一个文件夹,叫contain。什么意思,容器?看好了,我会给他改个名字,就叫它count。
12:04
来,Count。这一个组件当满眼看去有用到相关的代码吗?没有吧,没有直接用到啊,这个我们称它为什么呢?UI组件。UI组件的特点是什么啊?主要做显示。啊,与用户交互。好与用户交互啊,与与用户交互这地方说。代码里面代码中没有啊,任何。操作啊。相关啊,就是没有任何。相关的代码。至少你满眼看去上面是没有的,但其实背后肯定要用,背后肯定要去操作,你不操作怎么可能去得到状态,怎么去更新状态。
13:08
但至少表面上看是没有的,对不对?语法很干净,这是很干净的一个东西。好,下面要说容器组件。啊,这地方就要说一个事情,我们这个。有一个UI组件。这是re,状态数据在里面是吧?我们最终是不是古装来显示?最终的最终肯定要读,是不是那就有问题了,我又不能写,你看我在写上面里面写。又要去读,这个时候就要在外面包一个什么呢?容器组件。由容器组件跟re进行通信。容器组件负责将数据给你什么?传过来。诶,这个思想咱用过。对高阶组件。还记得我们那个点。
14:01
哎,就跟那个思想一样。在右后面再来括号是吧,传了一个我们的一个form组件对吧,最终我是想为了让组件传什么对象,还记得不传form对象。是吧?哎,其实思维是类似的。大家看好,因为有这个思维,有这个体验,我们再写就没那么难了,我把这个AP挪到这个里面,把它设计为UI啊,容器组件。但这个APP不要看了这整个标准。这些都不要了。这个得说一说啊,这是一个什么组件呢?这是一个容器组件。容器组件容器组件什么样的组件是容器组件很简单。通过connect包装UI组件产生的组件。
15:02
这能听懂不?那我们这里面就引入一点东西。比如说我们肯定得引入那个connect的吧。Connect是谁的语法呀?是react杠什么的语法,是不是一个函数?能看到吧,好,那他要包装UI组件就包装它呗。那我肯定也要这个什么引。来点点点斜杠啊components下面的什么看看。能不能看到。好,最终我要去暴露的是谁了,是不是通过connect包装生成的?容器组件。那这个时候我们怎么生成那个包裹的容器组件呢?它的语法是这么写的,我直接先写。
16:04
它也是这么个跟活吗?以前是不是很类似啊,类似两次调用这个connect是个什么函数。高阶高阶函数看的本身。是一个来,我先写好传入这个UI组件,我要问大家看的是我的高级组件吗?我们说高级组件是什么?是一个接收一个组件,返回一个组件函数吧。K是吗?看的不是谁,是。返回的那个函数是。能听到不?我们说高阶,高阶组件是一个特别的高级函数吧,这里面涉及到几个问题啊,一个是高级,我们的这个看的看的是一个什么是高阶函数。对不对。
17:01
能听懂不啊,而connect执行,哎,这里面少了一个N是吧,返回的是一个什么?返回的函数是一个什么。高阶组件。啊,返回的函数是个高级图件问题吧,他接收一个什么,接收一个UI组件。是不生成一个什么。容器组件我们是不是有个称谓啊,都有相应的称谓了,那我们前面说过高阶组件函数是为了干嘛,是为了包装它,包装它又是什么意思呢?是为了往往它里面传属性呢?能听懂不?啊来形成容器组件,容器组件的责任是什么?他有责任的。
18:01
像什么UI组件,传入特定的什么属性。能听懂吧,然后我们前面在表单form里面用到的,它是不是传了一个固定的属性,叫小写的form。是吧,那我们这一次想传什么属性呢?想象看他什么属性。这三个是吧,这两个。是一般属性,这个是一般属性,这两个是什么。函数属性。能理解吧,到这里来说应该都没什么问题,难就难在它指定属性的方式比较特别,看。他接收两个参数。我先写啊,先写名字,分别叫什么呢?第一个名字起名叫map state to pro。
19:02
第二个名字,参数名字叫map to。那这两个名字我是怎么知道的文档?这个主体呢,是讲Du的文档,它最后有一个后面课后有一个叫react杠什么。X的文档。你去点他啊。这是react的杠。到这里来了吗?是道在,但是这个里面没什么,主要看它的什么呢?API,它的API比较简单,有一个组件叫什么provider,接收一个属性叫什么store,当最最重要的是它有一个函数叫什么connect,接收的第一个参数叫什么map state cross,第二个参数呢。Mappa to pro后面的可以,基本上基本上不太用,我们来说。
20:04
看看这个名字。Map什么意思?啊,叫映射不叫地图。啊,它是一个动词。叫映射。In是什么意思啊?就是把两个东西跟它对应起来。听懂了吧?你说他把谁跟谁对应起来。把state。映射成什么?标签的属性,我们不是要决定标签属性的吗?能听懂不是对,是不是我的状态数据。我现在要给他传递一个什么样的状态数据,还记得不?我们是不是要去传递一个抗的状态数据?Count是他的名字吧,是不是要从re的状态里面来?对不对,好,这个时候怎么写的呢?我给大家写一写。
21:02
这个有点费劲。来看好了,哎,我写写在这里写。第一个它是个函数,刚才说过了是个函数,而且函数接收一个参数,说白了这个东西我能决定吗?不能,这个函数都是毁掉函数,听到不。包括她也是。它也是好,而他传的不是第呃是对的,而是另外一个。我们说多里面是不是有一个方法叫dispa。传过来就是那个函数,大家知道方法那个多是不是一个方法叫派。那而这一个是就是那个Dis派,那就是它是函数了。能听懂吧,这个时候来我说一下,这个的时候我先写吧,好吧,我把这个结果先写出来,不写吧,你不知道每一个对象。
22:00
对一下里面的属性名叫。直是speed。我们说过里面那个现在是不是count值。现在当管理的C的四个对象吗?不是,就是这看的值也就是零啊,123啊之类的值是不是?你说这个写了以后你就知道了,你说他最后会给我的看了传什么属性呢。抗的属性值是多少呢?就是SP的值,能不能听懂,下面再来一个啊,再来几个,我先写啊,先写看好了,也是一个对象。我们需要哪两个属性来着,看一下。是不是需要一个他呀。对,不看好了。啊,值是一个函数。能不能听懂啊,这个函数呢,将来我这个这个函数就会,这个函数就会传给他听懂了不,而他调的时候是不是传来一个number过来的了,这边调动的时候是传了一个number过来,来看到,那所以我在声明的时候就要声明一个什么number。
23:16
这个里面会干嘛去了。调用dispat,调用PA是不是需要一个action对象啊,是不是action对象是我自己创建吗?不是,是谁来帮我充钱呢?蛮快的啊,我先写一下from啊,点点斜杠,点点斜杠啊,点点斜杠就行了,下面的。Action,我有两个,一个是C,一个什么。可以了吧,好,下面来啊。这个咱写过了。是不是来这几个?
24:01
再提个。这一个不叫这个名字了,叫equipment。那你说现在我们俩会冲突吗?我这一个地块掉的是他吗?不是。能看到吧,掉的是上面的。这是个作用于变量查找的问题啊。好,那最终。这个我就写好了。当然,现在大家可能不太懂。可能不是完全懂,或者有的同学根本一点不懂。我们先来看结果,我们再来说这个是怎么回事,好吧,我们刚才说我的这个抗呢,需要接收什么三个属性嘛。表面上看大家看到是不是有对应关系,Count和什么,这这个是不是一般属性,这一个是不是两个函数属性。也就说第一个参数用来指定什么一般属性的,呃,这个用来定什么函数属性。
25:09
能听到。现在我还有一个是需要改,因为我的这个APP放到这个里面来了,那我这个路径不对了。能不能听懂啊,路径不对的,好,这个是没问题的啊,这个没问题,好我们先来看一下结果,先看啊有没有一个正确的效果。在这里来。首先初始形式没问题吧?没问题,好,我来点一点。先看功能有没有问题啊,先看功能有没有问题,点一下点一下。各位接着看另外一个东西。看他。看什么呢?就看那个我告诉你。
26:01
这个显示的是我的抗的UI组件码,这个是谁呢?对,容器组件。这个是跟我们那个很像啊。啊,思维是一样的,而且你来看接收了几个属性。三个是不是接触,看接触了。一个低。那说明呢,我们的这个函这一个UI组件接收哪些属性,是不是由connect这个函数里面的这两个参数来指定的?只是他这个指定的方式,是不是写起来有点费劲呢?这是比较原始的写法,这个哎,我们稍微要拖点它啊,这个。用来指定什么的了。啊,用来将state就是中的管理的state数据。
27:03
映射成。UI组件的一般属性的函数,这能听懂吧?这是个函数,没问题吧?而这个函数的返回值是不是决定了会产生哪些意外出现?记住,是在这个对象本身传过去吗?不是,是将对象里面的属性传过去对不对。这个能不能听懂,对象里面的属性都会被传到UI组件里面去。好,下面这个函数呢。下面这个函数啊,用来去决定它的什么函数属性,但是啊前面有点问题。这个是将射这个state吗?是射state的数据吗?
28:01
不是。是将什么呢?来说一下。将包含。更新啊包含的派代码吧,大家知道第斯派代码会干嘛去的。我执行dispa会干嘛去?更新状态嘛,对不对,能听懂,不包含PA代码。的函数应用,设成UI组件的函数属性。嗯,这每一个都是一个函数吧。这边这是决定了那个传递属性的属性里吧。这个是不是一个属性的值。而这个子里面这个函数吧,它里面包含了一个什么。Pach代码。说白了,我一旦调用这个函数,它就干嘛去分发X分X减是不是更新状态?我现在需要我自己手动的去更新组件吗?
29:04
不需要。你看我没有去订阅什么监听的吧。我没有订阅监听。他内部会搞好。但最终我们也不是这么写的。这个过程有点长,最终要到最后的过程了,我把最后的这个版本给大家写一下。来看好了。我先把这个。把这个我我再备份一个吧。这个APP来我写一下最终的版本,咱就咱就差不多了啊把这个啊,这个是基础版,我加个贝。可以吧,来最终的版本啊,是这么写的。直接在这里面写。写什么呢?这个可以做个简化呀,这个。箭头。小括号大括号是不是返回一个对象啊,对象里面有个什么属性,看我们值为C,就是四倍塔,这个好说,这个简单,这个简化实际上是把一个方函数变成一个进的函数的简化。
30:11
下面的简化就是真的简化了,我们刚才调参数是不是要传函数来着,不用传对象。对象里面放什么呢?放他们俩。就好了。对,这个就不要了。这些就不要了,也就是说最终的版本样子。从这里你能看到,有时候代码扫并不是对你来说啊,很轻松的事情,因为扫了以后省略了很多工作。能听到不啊,这个地方就说这个好懂,这个其实是真的,函数理解主要是其实最难,最难的就在这里。最难最难的就在这里。
31:02
啊,这个地方啊,这里面。首先我们说这个第二个参数是不是用来决定向他传递什么样的函数时间呢?表面上我要问他一个问题,传的是这两个函数吗?传的是他们俩本身吗?不是啊,不是传的,其实这你写的是它,最终它还是一样会生成我们刚才的这个,这是简化以后的语法。还是会是这个样子的,一个对一个函数里面返回一个对象。传的是这两个函数。听懂,不,不是这个函数。这个函数是不是我们的X那个函数啊,不是。必须包含什么代码呢?Pach代码。哎,我们平常写就这么写。那肯定是这么一写,肯定是简化了很多代码是不是?代码肯定是简化了,但是说实话,第一次理解起来有点费劲。
32:02
啊,当然今天下午的时间呢,需要把这个做到这里来,把这个理解透了啊,把这个写一写啊,后面呢,我们会再把这个再反过头来再讲一下啊。因为这个是整个里面最难的一个啊,我就先在这写着啊。后面我们再说,我们来先来看一下我们这种写法对不对啊。你等会不对了是不是。可以不?可以没有问题,说明是OK的,那明显我们这个就省了很多代码。啊,这就是说我们用上了这个react杠。去简化的使用。就体现在这里。好。
我来说两句