00:00
这节课给大家讲一下兄弟组间之间如何传递数据,之前我们写的这个电影搜索的这个例子,哎,上面是色系组间,他搜索到这个数据之后,诶,数据是给谁用呢?是给这个历史的组件用,但是因为我们还不知道怎么啊,让这个兄弟组件之间进行数据这个传递,所以先把这个数据啊给到了这个他们的负极组件APP组件之后,再由APP组件传给它的这个子组件历史组件啊,是这么一个过程啊,稍微画一下我们现在的这个数据传递是怎么一回事。在这里我们处理的这个数据啊,搜索这个数据之后呢,把它给到了这个,呃,APP,我们在APP里面定义了很多状态,然后APP组件在。得到这些数据之后,哎,又把这些数据给到了谁呢?给到了这个立测组件啊,那这节课我们要来学习的是直接让兄弟之间,兄弟组间之间,哎数据进行一个传递。啊,那如何让兄弟组间之间进行数据传递呢?这时候我们用到一个机制啊,什么机制呢?就是呃发布与订阅机制,来看一下笔记。
01:10
哎,就是这个消息的订阅啊与发布啊,注意它是一个机制,那什么是消息订阅与发布呢?我们来通过一个简单的这个例子来理解一下啊,我在这里新开一个啊。来看一个什么例子呢?就是我们之前订阅报纸的这么一个例子,订阅报纸,那订阅报纸首先要干什么,是不是你去交钱,然后哎,要订阅什么什么报纸啊,订阅什么什么报纸,对吧。好,那你交完钱哎,我订阅了,比如说这个啊,什么什么晚报订阅了这个报纸之后呢,那接下来如果这个报社他发布了新的一期的这个报纸,是不是要通过这个啊,邮递员去给你送报纸。对吧,给你送报纸。哎,是要经过这么两步啊,首先你去订阅这个报纸之后,你订阅了报纸之后呢,当啊有新的报纸出现之后啊,人家就给你送这个报纸啊,就是发布这个报纸啊。
02:09
那回到我们的这个,呃,消息订阅这个机制呢,也是一样的啊,类似啊,首先你得哎订阅这个消息订阅我用X来表示这个名字啊,订阅什么什么消息。好之后,哎,当有人去,诶发布了什么什么消息之后,你就可以去收到啊,这个你订阅的这个消息,这就是消息的订阅与发布。啊,那如果我们要在这个RA中去使用这个消息的订阅与发布,那就要用到一个组件,用到什么呢?啊,用到一个这个啊。Pub sub GS啊,这么一个库啊,Pub呢,它是这个发布的一个缩写,那这个sub呢,它是一个这个订阅的一个缩写啊,用到这么一个GS啊。啊,先看一看它的这个文档怎么用啊,之后我们再去这个下载,诶首先呢这个工具库,诶我们用到的这个工具库是top sub GS啊,那这个工具库呢,你是可以在getu去搜索到的啊,我们来看一个啊,打开getub。
03:19
好,在这里进行搜索啊。回撤。啊,一般你去搜索了之后呢,你一般看这个收藏比较多的啊,就是你要找到这个啊。点进来之后。好,下面有它的一些文档,以及它的这个用法啊。这里有一个简单的一个例子。哎,它有两种方式我们可以看到啊,它一个是import啊,是我们在这个ES流中使用的方式,还有一个是这个啊common JS,就是我们在这个note JS服务端去用的这种方式啊,所以说它不仅支持我们前端使用,还支持后端的一个使用,然后提供了一个简单的例子啊,比如说啊,在这里去定了这个消息,对吧。
04:01
啊,使用哎这个pop sub,它使用它的这个subscriptscript,它去定位了这个消息,啊,这个是消息的这个名字,哎之后呢,这个是啊就说监听的一个回调函数,相当于也就是说当有人去发布了这个同名的这个消息之后,那我这里定阅的这个消息呢,哎,我这里监听的这个回调函数就会触发。清楚了吧,啊,那我怎么知道它是一个函数呢?这里已经写了,它写了,你看这里是一个方形对不对啊,这个function形呢,回调函数呢,它其实有两个参数,一个是me,一个是date,也就是说当你发布了这个消息之后,哎,发布了这个这个名字的这个消息之后。你可以啊,把这个数据哎,在发布消息的时候给我带过来,那我这个回调函数里面,我这个date,我就可以接收到你发布的这个数据啊,那还有一个message是什么呢?Message是你的这个消息的这个名字啊。啊,其实这个呃,稍微有点多此一举,那我既然是我定义的这个消息,我还不知道这什么名字嘛,我肯定知道是吧,但是他既然他这么写了,那这个参数我们也少不了,也要写上才可以啊接下来。
05:06
啊,还看他啊,他在订阅完消息之后,给了一个什么,是不是啊,给了一个这个talking啊,就是说有一个返回值是一个talking,它类似于什么,类似一个啊,一个ID,也就说你这次订阅的这个消息的它的这个个编号啊,那为什么会有这个编号,我们想一想,之前我们写定时器,我们开启了一个定时器,是不是它也会返回给你这次定时器的一个ID,那它主要用来做什么用,是不是我们在清除定时器的时候,可以清除这个指定ID的这个定时器啊,它也是一样的啊,在我们订阅了这个消息之后,我们会得到一个ID,如果我们不想订阅这个消息了,可以去取消订阅,找一找在哪。可以看到啊,这里你看啊script啊,取消订阅,那取消哪个订阅呢?就是我们之前订阅消息得到的这个啊talking就是这么一回事哎。接着来看一看这个发布消息啊,发布消息就啊比较简单,直接使用这个publish sub的这个啊publish方法就可以了啊,你首先第一个参数是诶,你要给哪个消息就说哪个订阅去发布消息,第二个是你发布的一个一个内容啊,这样的话,呃,就会订阅的这个名字,就会接收到我们发布的这个内容啊,就是这么一个回事啊。
06:15
对这个工具库有了一定的了解之后,那么接下来我们去用一下,诶首先我们要哎导入这个工具库,但是呢,你在使用这个工具之前,你要先下载,把这个库下载到我们这个项目中,对吧?注意啊,我们的工具库的名字是它,但是你下载的时候呢,是这个名字清楚了吧,就是它get ho的这个,呃,工具库的这个名字可能跟我们使用的这个NPM的这个库名不一样啊,那这个是通过这个giu我们去搜索的这个库,那如果要通过NPM,你来怎么找这个库呢?诶,就是。Pub sub-GS,哎,NPM上面的这个库的名字实际上就跟我们要使用的这个库名字就是一样的啊,那你点进来之后啊,你可以发现这个作者都是一个作者啊,那你点进来之后,其实它的文档也是呃,一样的一个文档啊好,而且在这个这边他会告诉你get up的这个地址。
07:05
啊呃,接着啊,我们要使用这个工具库就要安装对吧,那安装的时候肯定是安装的是这个这个NPM的这这这个名字啊,就是我们呃,导入的这个名字。找到我们的这个代码。来这里啊,之前这个零二是我们写完的一个搜索的一个案例,我又复制了一份出来啊,从零二复制了一份出来啊叫这个啊,加了一个这个后缀,因为我们改了之后呢,要在这个上面去改,就不动这个写好的这个啊,所以你先切换一下你的目录啊,就是说你终端里面,你先切换到这个目录里面,再去安装这个组件。来看一下这个安装方法给大家说了啊,如果你使用NPM就是NPM隐道,然后如果使用的这个样直接是亚I就可以了啊,那我直接啊就使用这个样安装就可以了。
08:02
安装好这个之后,我们就可以去使用了,那在使用之前呢,我们先不要着急,先看一看我们的啊这个例子啊。来看一下啊,之前我们这个例子。搜索数据是在这个search这个组件里面进行的,但是数据的展示以及一些状态的判断都是在Li组件里面去使用的啊,也就是说这些状态是在Li里面用的比较多,对吧?但是这个改变这个状态的这个行为呢,是发生在这个色体组件中,因为在之前我们不知道如何去让这个兄弟组件之间进行通讯,所以会借助了他们的这个副组件APP组件,哎,把这个状态放到了这个APP组件上面,对吧?之后哎,当你的状态发生改变,我去改变这个APP组件的这个这个状态,从而让这个APP组件把这个状态传递给list组件时候,进行一个一个改变啊,再想一下啊,之前是这么的一个回事。对吧,但是现在我们知道怎么让兄弟之间啊,这个组件之间进行数据一个传递,所以说我们要对代码进行一个调整,对吧?好来接着看代码。
09:07
那怎么调整呢?首先来看我们的APP组件对吧,其实现在我们如果使用这个pops up这个工具库的话,让兄弟组件之间能够进行数据的一个呃传递,那这个APP组件就没有必要去使用了。对吧,它就作为很简单的一个啊框架就作为最外面的一个壳去包裹这些组件就可以了啊,所以说那这些组这些状态啊什么的就不用了,对吧?啊,当然你如果这么直接删掉了,那肯定有问题,就说这些状态啊,不是说。不用,而是说不放在这个F组件里面了。放在哪呢?那你如果删掉你肯定有问题是吧?那放在哪呢?我们想一想,这些状态谁用的最多,是不是这个list的组件用的最多。对不对,是不是这个绿色资源用最多,所以我们把这个状态给。剪切掉去,放到这个历史的组件中。来找到这个类似的主件啊。
10:02
在这里哎,去定义这些状态好,接着呢,那既然这个状态。已经剪切过来之后,其实这个更新状态的方法也就没有必要了,对吧。哎,那你这些状态和这个方法都没有了,你这个就不用再传了,是不是,嗯,把这些都删掉啊,也就是说那这个APP组件就作为最简单的外面的一个壳去包裹了色,包裹了这个list,好接下来。我们把这个状态呢,都放到这个list里面啊,因为它在这个list里面去用最多,那既然这个状态直接就是list里面的状态,所以就不是purpose过来的是这个啊C里面的这个状态对吧,那这里也要改好,下面的就不用改,接着我们来想象一个问题啊,你这么改了之后。你会发现,你这个状态永远改变不了。哎,我们没有地方去操作去改变这个状态的这个方法了,是不是啊。但是我们来想一想,是在哪个地方去操作,去更改的这个状态,是不是这个设计组件。
11:02
对吧,哎,是不是这个色体组件好。那现在我们不借助于这个副组件了,也就是说不借助于这个副组件,这个this pop pop去修改这个状态,而是直接让这个兄弟组件之间进行数据的一个呃传递,那我就先把这些啊都注释掉,那怎么传递呢?哎,就回想一下刚才我们说的啊,这个消息订阅。和发布对吧,可以通过这个技术来实现,我们来捋一捋啊,这个是色系组件,这个是内测的组件,好谁来订阅消息,谁来发布消息。来想一想。啊。是不是发布消息的地方,就是说明他的这个数据会啊会产生一些变动,然后会去推送这个啊消息,推送这个新的一个数据,对吧?好,那订阅消息的地方是不是说哎,我要用到这些数据,所以我要订阅这个啊消息去啊监听这个数据,如果你发布了这个消息啊,发布了这个数据我就要用,对吧?那所以说啊,你理解了这个关系之后,是不是就是在list里面你要去订阅这个消息。
12:04
对吧,因为我状态都在这个里面,所以我要在这个list的啊里面,我去订阅这个消息啊,我订阅好消息之后,如果你发布了这个消息,哎,就是你发布了数据过来之后,我去更改我的状态。是这么回事吧,啊,所以哎,我要在这里面去来订阅消息那。我们捋清了是在这个里面去订阅消息之后,再想一件事情,什么时候去订阅。对不对,你不能说你直接你在这随便写你就可以了,是不是啊,那什么时候进位呢?是当我们把这个。组件挂载到页面之后再去订阅,哎,这个消息好,我们是不是学生命周期的时候知道有一个函数。当这个组件挂载之后,对吧。Component啊。在这里来订阅这个消息,订阅消息,那订阅消息是不是要使用这个pop的一个呃,Script来订阅消息好。
13:01
那要使用的话,我们就先来引入啊,之前已经安装过了啊input。怕萨啊?From。啊,这已经有提醒啊,Pop subs啊,使用它的什么方法呢?第2SUBB sc啊来订阅啊。订阅消息,我们首先有两个参数,它这里已经提醒了,第一个是我们的消息的这个名字,第二个是一个回调函数,对吧。这里哎名字你随便定义哎,比如我就啊定义这个一个啊Mo啊这么一个名字啊,就是说data吧,定这么一个名字之后,第二个是一个回调函数,注意这个回调函数它也有两个参数啊,我们来看一看这里。它是不是也有两个参数,你看它是拆开写的,我们只是把它写在一起,它有一个message,就是我们消息的名字,还有一个date,就是啊发布消息的这个,呃地方他给我们发布的这个数据。
14:02
好,呃,第一个message啊,你不能省略,因为这个你省略的话,它这个参数的顺序就不对了,好第二个是date。嗯。接下来哎,我们先简单的去,哎,输出这个data,看能不能拿到这个订阅的这个消息啊。在历史的组件中,我们订阅完这个消息之后。在哪里去发布呢?哎,我们在这个色系里面去发布这个消息。好,这些,哎,我先不管啊,这些我先不管。我先把这些都注释掉啊,都注释掉,我先来测试一下我消息发布能不能发布过去啊。发布消息是不是也要使用这个?萨。Pub sub啊,From。Pub sub JS,哎,发布消息使用这个pop sub的点啊,Publish它呢,哎,有两个参数是吧,第一个是呃,你要向哪个消息名字去发布,第二个参数是一个date,你要发布什么数据。
15:10
可以吧,我们来写一个啊,注意啊,这个你要对应的上啊,这里我们定义的这个是date,那我就要向这个date这个消息去发布数据,发布什么数据呢?啊,这个你就随便写啊,你写这个字符串也可以啊,你写这个啊对象也可以啊,写数值也可以啊,就说你这边你发布了什么数据,这边我订阅消息的,这里我就会接收到什么数据,清楚了吧,那我随便先写一个对象啊,比如写一个内蒙啊。啊Tom啊,再写一个A啊18。12万。这样的话,当我点击这个按钮之后啊,点击这个搜索的这个按钮之后,就会执行这个方法,那这个方法就会去发布啊,像这个消息名去发布啊,这个这样一个数据,那我list里面,我在订阅消息的时候,订阅这个名字的消息,那我会接收到这个数据,我们来看一看能不能输出这个数据啊好。嗯,启动一下啊。
16:01
让start。启动完成之后,我们来到这个浏览器中。嗯,他已经帮我们刷新了。来把这个往上调一调。找到这个conslo。好,这个先不用啊,这个是说我们这里定义了没有用啊,先清空掉。接着啊,我来随便点搜索,诶可以看到是不是输出了对不对,好,如果不好区分的话,我们把这个,嗯。标识给大家写上,比如说这里我输出什么呢?Search组件发布消息了,发布的这个内容好,那在这里呢?我再输出一个啊,这个是list组件,是不是list组件。嗯。接收到消息啊,接收到消息啊,他是先订阅的,先订阅才能接收吗。
17:01
再来看一下啊,稍信。先把这个。清空调啊。来点一下。是不是你看色系组件发布了消息之后呢?哎,绿色组件收到了消息,并且展示这个消息的这个内容,对吧,你看这个这两个是连着的是不是,哎,先执行的它是吧?好,那说明我们这个啊消息能发布过去,哎,这边定也能成功,接下来就开始去诶优化我们这个搜索了啊。好。首先啊。怎么优化呢?我先改这个list吧,那这里我就不是输出这个data了,这里我就把它改成什么呢?啊,就是一个变列名啊,我随便改啊,改成state r BG啊,一个状态对象跟我们之前写的那个例子一样啊,也就是你给我什么状态对象,我把我的这个状态对象就修改成什么啊,This set state对吧,想想之前我们的例子是一样的啊,只不过我们之前是用的啊,父子之间这个数据的一个传递,现在是用的消息定位发布啊,那这边我既然要一个状态对象,那这里。
18:07
我就不能你看去使用这个pops,而是直接使用什么,使用这个消息的发布,哎,是吧。咱把这个先删掉啊,来把这个给注释掉,我复制一下这个。那这里比如说修改这个状态,我就不是像这个之前调用这个副组件的函数,而是直接发布,那发布到这个date这个消息,那发布的这个数据呢,是什么?就是我之前要修改的这个这些状态的这些数据,对吧?好,那接着复制,当我啊接收到数据之后,同样的啊。这里。那我这个就删掉,用掉了我就删掉啊,接收到这个数据之后,也是向嗯list里面订阅的这个消息去发布什么呢?发布我接收到这个数据啊,就是这些数据对吧?好,那把这个第二个这个给替换掉就可以了,那这个就删掉,同样下面的这个当出现错误的时候也是一样啊。
19:01
我去去更改,就是说发布这个错误的相关的一些数据,把这个删掉,好,这个也删掉,这样就改完了,对吧?嗯,因为我们在这个list里面,我们去啊定位了这个消息,所以说当我这边我出现了一些呃不同的一个情况的时候,我只需要向你去发布不同的消息就可以了。接下来我们来试一下,看能不能去使用啊。刷新。这个list里面有一个报错啊。是他啊,OG这个写少了,来刷新。好,接着我来搜索啊,搜索这个你好。嗯,有一个报错,Set state。找不到。这是一个啊函数啊函数的话,这个this指向有问题,所以我们把这里去啊改成这个建头函数啊,刚才写的说没有注意啊,这样的话this就会向上继续去找才会哎指向这个list的,如果我们写这个方形的话,这个this就是按DeFine就没有这个方法啊,那这块注意一下大家我刚才写的快了。
20:16
好,接着再来去刷新。你好,来搜索一下是不是正常了,你看数据就有了。跟我们之前的方法是一样的,但是这个时候是啊父,就是说这个兄弟组件之间直接进行通讯的,没有经过这个父子组件对吧,好。接着我们来再来优化一下啊啊,当我们定位了这个消息之后,哎,有时候我。就不想再订阅了,那我要把它给,哎,就说取消这个订阅,这时候我要干什么是不是啊,诶它订阅成功之后会有一个这个talking对不对,那我把它订阅成功之后的这个talking啊,给到这个this的这个talking之后,哎当组件啊,卸载之后啊,卸载之前啊。
21:01
Component。啊,While a moment在卸载之前我取消订阅。取消消息订阅。哎,取消消息订阅呢,还是使用啊这个里面的一个啊an,然后是this talking给一个ID。就是它的这个标识,给他这个标识就可以取消这个消息的这个订面,好这个时候啊就优化完了,但是啊,还有一点小小的一个问题,哎,什么问题呢?我们来看一看。就是当我们去搜索的时候,我先刷新啊。你好,搜索啊,当我们去搜索的时候啊,注意这里是有loading的,但是这个按钮没有变,你注意看是不是按钮没有变。对不对,所以我们把这个细节也要处理一下,那这个按钮呢。他还是判断的,谁判断这个this pops的这个is loading,但是已经没有这个pops去传传这个loading了,对不对,所以这时候哎,我本身这个组件它也要需要一个状态。
22:07
This。啊,这个1LOADING是这个组件它本身的,它自己需要的这个状态。对吧,那我在这里也初始化一下啊。Stay。Is loading,哎,一开始肯定是for啊,不是加载中的。那呃,在这个搜索之前呢,我不仅要去发布这个消息,我还要改变自身的一个。一个这个楼顶啊。好。然后。在。这里啊,这两个我还都要把它给改成这个for。这样才可以啊,因为我们头部也用到了这个is loading,所以要加上一个这个才可以啊,啊,这个是该发布给其他订阅消息的地方,就该发布发布啊,那这个是我本身我组件自身我要用的这个东西啊,要用的这个状态好接着再来看一看。
23:11
现在哎输出啊,输入这个你好点搜索,你注意这个按钮,它有没有去这个显示这个load顶啊。没有显示啊,说明我们的代码有问题,来看一下代码啊,问题大概出现在哪呢?那我们看一下这里定义状态,这里去改变状态,改变状态这些是没有问题的,那可能是出现在下面下面,哎,这里我们取这个时候。就有问题了是吧,你解构的话,它这里面没有,你从这个ZZ里面去解构还行对不对,或者说你直接使用它。好,咱们把这个删了嘛,我们还使用结构啊,这时候再来去看一下,我来点这个搜索啊,输入这个你好,这时候我们只注意这个按钮,看它有没有这个楼顶的这个状态是不是就有了,好这样的话我们就优化完了啊,好这节课主要讲了这个啊,消息的订阅发布,那通过这个消息订阅与发布这个机制啊。
24:01
就可以实现兄弟组建之间去传递这个数据,你们可能发现了啊,它不仅仅适用于这个兄弟组件。因为。他跟这个什么什么,你是什么组件没有关系,它只是靠这个消息的名字和订阅啊,对吧,你只要是订阅了这个消息的这个名字,那我发布的时候就可以收到。是这样的吧,所以你呃,其他的你跨这个组件都是可以相互去传递数据的啊,通过这个机制。那这节课就先说到这里。
我来说两句