00:00
好了各位,这个案例完成之后呢,在这小节呢,给大家讲一下兄弟组件之间如何直接进行数据的交互啊,我们简称兄弟组件间的通信,好同学你想一下啊,我为什么非得把这么多的东西放在APP里啊?然后你想APP还辛辛苦苦的传给list,这是为什么呀,我怎么不直接放在list里呢?同学,你想想list是不是根据你有没有错误,你是否第一次展示,你是否处于加载中啊,你是否有用户的这些数据,然后决定list要展示什么东西,也就是说这四个人其实谁用的最直接呢?是不是list,那我为什么还要这么费劲的放在APP里边,然后通过APP传给list呢?那是因为呢,我如果啊,直接把东西放在list组件里边,那你可要注意了,这四个状态,List在读,读出来用,那谁在操作它呢?其实是search,由于兄弟组建之间没有办法直接通信,那所以说逼着咱们没办法了,我把东西放在APP里边了,然后呢,来,你注意听我说APP啊,传给list对吧,父子之间传东。
01:19
还挺方便的,用什么传的呀?来给大家写上是不是叫做pro对吧?来同学,那你说放在APP里边,那search是怎么操APP里的东西呢?那就要求咱之前画过这个图,说要求啊,在最开始的时候,哎,我画个虚线啊,重新来走画个虚线,哎呦,这虚线好难画呀,来慢慢来画个虚线,APP传给search一个函数,然后search在合适的时候去调用这个函数,就把东西是不是带给PA了,所以说同学们子传给负东西是不是其实也得借助pros,只不过呢,刚开始你得借助S给我传一个函数,那你看同学search调函数影响a PA papp,再传给历史,是不是完成了兄弟之间的数据沟通。
02:05
我们简称兄弟间的组件通信对吗?那同学如果有这么一个东西,你说多好,就是让search和list,就如同两个人拿着对讲机一般,Search说list list听到请回答,把你的arrow呢,里边存入一些错误,因为我这边请求出错了,例子说收到,收到是吧?哎,我存进去,同学你觉没觉得这样会很方便,有一种感觉就像隔空对话一样是吗?哎,我们就要学习这个技术,叫什么呢?回到课件里,同学叫消息订阅与发布机制。消息订阅然后发布呢,是一种机制,怎么理解呢?同学回到我的白板里边,我给大家呢,举一个生活中的例子,叫订阅报纸,同学,好久之前咱们小的时候是吧?哎,可能你家的这个门旁边呢,哎,有一个这个信箱是吧?哎,或者是一个存放东西的小盒子,然后邮递员的往里边放报纸对不对?同学咱就说订阅报纸来说,首先第一步你首先是不是得去交钱啊,交钱的同时是不是得说好什么呢?哎,地址以及订阅哪一种报纸对吧?这是第一步,那么第二步呢,那你就在家静静的等着收报纸就得了,对不对啊,咱说叫做邮递员啊,然后呢,送报纸对吧?这是生活中订阅报纸,那其实同学这个订阅消息呀,是吧?哎,这个订阅消息呀啊,其实和订阅报纸是一样的,首先呢,你们必须得商量。
03:40
好啊,就是这个消息名叫什么,什么叫做消息名呢?同学你想一下啊,如果两个人拿着对讲机,他俩想进行对话,是不是得调到同一样的频段呀,对吧,你在八号频段,那我那边也得调到八号频段,我才能收到,对吧?这就相当于消息名,哎,然后第二步呢,约定好了啊,就比如说同学看这种抗日神剧的时候是吧,你比如说咱俩约定好一个暗号,我说地瓜地瓜,我是哎这什么什么其他的东西是吧,我是白菜是吧?啊就有这么一个,哎,名字OK,消息名,那然后呢,那其实就是等着发布消息了,发布消息啥意思?你这边订阅了这个消息,人家那边发布消息的时候你才能收得到。同学你想象一下,你不去交钱,说好你家在哪儿,你订阅哪种报纸,谁给你送报纸啊,对不对,你觉没觉得这一步呢,其实就是提前在商量好一些事儿,这一步送报纸其实就相当于我们这儿发布消息了,对不对?所以说同学们综上所述,你得先去订阅。
04:40
的消息,哎,然后呢,别人发布这个消息的时候,你才能收得到,哎,才能实现一种隔空对话的感觉,对吧?哎,无论你在哪,也无论我在哪,我只要喊一声,咱俩这消息名一旦对上了,你就能收到我的数据,就是这么回事儿,哎,走消息订阅与发布呢,是一种机制,哎,是一种设计的理念。
05:02
有很多的库啊去实现这种机制,你就比如说说汽车是有四个轮子的,那你看有很多,你比如说奔驰啊是吧,啊有奥迪啊等等,这些车是不是都实现了一种车,车子轮子有四个轮子这种机制啊,本身它说的就是一种机制,有很多的库去实现,那么有这么多的库都实现了消息定语发布,我们用哪个呢?我们用一个呢,大家都在用的比较主流的一个叫做pop subb GS啊subb,哎,OK,那我们呢,去github上搜索一下它啊,打开github啊,它的名字叫什么来着?Pop subb啊回到这啊,Pub subb啊,Pop萨B,回到这儿,然后呢,搜索一下啊,走,那当然是点赞量最高的这个对吧?哎,3000多点赞量,PU萨B啊,这个pub是什么意思呢?其实它来自于这个单词叫publish,叫发布的意思,OK,那这个sub这个词来自于哪?
06:02
呢,其实有那么一个词叫做subscript啊,叫做订阅,哎,所以说消息订阅与发布,那GS呢,当然就是一个JS库呗,点击进去啊,特别简单,这个库的用法,同学往下滑,他首先第一件事儿呢,他教你啊怎么去引入啊,那同学你看他怎么引入的呀,他是这么写的,那所以说就意味着一会儿你进行安装的时候,你好像得写这种代码样ad,然后呢pub,然后sub-GS,这个库就叫这个名,啪sub-GS可不是你刚才所说的那个啊,咱看到那个那个仓库名,啪同学,一个技术的仓库名和他在NPM上的名字不一定是一样的,咱都知道包名的规范是不能出现大写字母,那怎么能出现大写的P呢,对不对?哎,所以说它的名字叫做pop up GS,那这样吧,同学,我们先给它安上行吧,安装上,那么我先把这脚手架呢停一下,同学,我接下来的代码呢,不能在这里边写。因为这个里边我讲的就是用A正常发请求是吧,不是消息订阅与发布,所以说这个src来吧,别客气了,CTRLCCTRLV右键改名叫零五_src啊下划线。
07:13
RC下划线,那这怎么写呢?Github搜索案例,哎,然后下划线对吧?哎,就是anxious发请求的啊as实现嘛,啊好走,嗯不让改是吧,不让改呢,你就把Vs code呢给它关一下啊给它关一下,因为有可能是你浏览器那边呢,它可能也开着的啊,那重新开启一下啊来最小化是这个是吧,嗯,打开。嗯。好,稍等啊,那这个呢,给它改名零五_src_GIHUB搜索案例下划线A,因为我确实用A写的,对吧?哎,零五准备好了,接下来我们在这里边写是吧,那来刚才要干嘛来着,一样ADD安装pub sub-JS走它慢慢装他的,咱往下看,看看这玩意怎么用啊,ES6这么引入,如果您用的是common JS,你得这么用,用require对吧?嗯,在服务器端它也能用好来往下同学这有一个最基础的案例,咱就看这个足够用啊同学首先观察两个地方啊,第一个地方就在这,先观察这儿啊,Pop up点,诶这个单词出现了啊同学出现了叫subscript,什么意思呢?叫做订阅,然后呢,你第一个传的东西呢,就是消息名,那请问一下你订阅的是哪个消息呀?叫做MY空格topic对吧,这个消息,那第二个是什么意思呢。
08:44
啊,听我说,同学,如果有人发布了my topic这个消息,那么你的订阅呢?诶就起作用了。对吧,有人说了my topic哎,发布这消息了,你就收到这个消息了,收到之后呢,你要注意。
09:01
它是一个函数。他就会帮你调这个函数,老师你怎么知道它是函数,这个MY怎么就是一个函数了呢?那你看这干嘛呢。Myscript是不是函数?哎,好同学,捋顺一下怎么回事啊,你在需要接收数据的组件里,我可开始给你说了啊,使用原则,你在需要接收数据的组件里边去订阅消息。然后呢,说好你订阅的是哪个消息,如果有人当真发布这个消息了,那么你所指定的这个回调呢,就要被调用啊,不是你调的,是别人调的,对吧?哎,它是一个回调,然后别人在调用你这个函数的时候呢,给你传了两个参数,第一个message,就是你的消息名,这个my topic,那么第二个data就是别人想交给你的数据。你就比如说同学,这有一个组件叫做A,这有一个组件叫做B,啊找回来叫做B啊,写错了叫做B,那么A呢,想收到B给的东西,也就是B提供东西给A,那么A就需要在自己的组件里边进行订阅消息,商量好你消息叫什么名,然后在B组件里边,你通过某种语法,你发布这个消息啊,发布消息的同时再把你要带着的数据给他带过去,也就是说B里边呢,它会做这么两个事情,一确实得发布消息,发布消息的同时你得把数据带过去,那这边由于订阅了这个消息,也就收到了这个数据,就是这么一个交互模型。
10:39
基本上不存在B只发布消息,然后不带数据,如果B只发布消息不带数据,那就是这个意思,比如说听视频的各位,如果你叫张三。那就是这种场景,我说张三呀。没了。没,没有后边的后话了,我就叫你一声张三啊同学,我发布了一个消息,叫张三,你也收到了,但是我们之间进行任何数据的交互了吗?没有,那如果说老师我想带点数据,那就是我说张三啊,啊,你把教室后边的苹果给老师拿过来,那你看同学我发布消息了,并且是不是有消息所携带的数据啊,哎,就这回事。
11:20
好了,同学,那这是干嘛呀?这叫订阅消息,如果有人发布消息了,我就帮你调这函数,在函数里边你可以做任何你想做的事,那我们一会写,写的不这么复杂啊,同学,我非得定义一个my subscript完了再通过哎,变量再给它写到这,同学我就直接把这函数直接写在这儿,是不是也可以呀?好说老师,那这怎么还能接到一个token呢?那我说一下,同学我问一下,当你开启一个定时器的时候。你比如说你写了一个set啊,可能是interval或者是timeout,我就不写了,Set什么什么啊,可能循环定时器啊,或者延迟定时器,我问一下你在左侧是不是都能接到一个定时器的ID,对吧?定时器的编号,那同学为什么要拿到定时器的编号啊,当我需要停掉定时器的时候,同学我问你是不是可以通过这个ID把定时器停掉啊,那这啥意思呢?你每一次订阅消息都会有一个订阅的token啊,跟ID呢是一样的效果,等以后你不想订阅这消息了,你比如说我的组件被卸载了,那我就不要再订阅这个消息了吗?啊,那这个时候呢,你可以通过某些语法去取消订阅,其实呢,就是在这,嗯,叫做on subscript subscript叫订阅,那么onscript就是取消订阅,传一个token就可以了啊好,那如何发布消息呢?我们往下看,就是这句话,来,Pop sub.publish。
12:50
Public是啥意思呀?就是发布,你发布了一个什么消息呢?叫做my topic同学觉不觉得这俩消息名是一模一样的,OK,那你说第二个参数什么呀,携带的数据呗,哎,那所以说第一个是消息名,第二个是携带的数据啊,你发布了这个消息,那之前有人订阅了这个消息,而且名字跟你是一样的,就触发了这个函数的调用,就把消息名给你带过来了,最主要的是带谁呢?带这个数据对不对?哎,好了,那我们就把这个技术呢,应用到我们的search和list上,同学。
13:24
你告诉我谁订阅谁发布,嗯,谁订阅呀,是不是list订阅消息呀,然后search把自己搜索出来的结果,通过消息发布的形式,是不是交给list呀?哎,好嘞,那么回到代码当中,同学,首先你必须做好一个准备性工作,你觉得APP里边还应该有这么多东西吗?APP本不应该有自己的状态,也本不应该有这个,APP本不应该给这些人传这些东西,APP它就是个外壳,你说对吧?那所以说接下来你要做的事就是注意了,慢慢来,我们不急啊,APP能有自己的状态吗?不能有,说老师,那就删了去吧。同学,你要这样做就有问题了,那你想啊,你把状态删了,那就意味着什么?Users is first都没了。同学,那我问你list到底还怎么展示东西,就没人告诉他了,你觉得呢?
14:24
哎,说老师那状态就是不能删,对不能删。不能说直接就那么删掉是吧,你可以不放在APP里边,但是你得放在别的地方,你不能说停到这儿就就说改完了,那不行,同学那你分析啊,回到这儿,我之前呢,是防止search无法给list传东西,我才放在APP里的,但是现在呢,有一种感觉,同学我就想把东西写的更直接一点。我写在APP里的,那你说APP也费尽周折的传给了谁呢?是不是传给了list对吧?哎,通过啥传呢?是不是props,那同学你说其实说白了,谁在真正读取这个状态做判断,然后呢,根据你的,哎这个东西说你有没有错误,我展示什么,你说谁在做这事儿啊,是不是意思啊,所以说嘛,同学你就不要再让APP有自己的状态了,你觉得呢,你就把这一堆东西给他剪切走,你交给最应该用这个状态的人谁呀,List。
15:23
对不,同学你看看list多辛苦,之前还这么拿呢,对不对,那接下来呢,来慢点来,同学,我撤回来啊,撤回来我都关掉,现在我可什么都没改呢,接下来开始改,第一件事,不要让APP再这么累了,把东西剪切走,放给谁呢?给list?为什么给list?因为list用的最直接,这些东西list都用是不?所以说来这一堆代码放在这儿。同学,List有没有自己的状态?有,那你之前list取出users is first is loading,还有arrow,我问一下都是从哪儿取的呀?都是父亲给他传过来的,对不对?
16:05
那这回父亲还给他传了吗?不传了,你不用从父亲那接了,对不对?各位,那你说这回咱们从哪儿接呀?是不是得从这接呀?哎,把pro改成state对不对,好。保存一下,回到这儿,同学,我问你APP连状态都没了。还需要再有update APP state吗?也不需要有了,那我再问你,同学,他连这方法都没有了,还需要再传吗?也不需要了,同学,你觉不觉得这才是APP本该有的样子,对吗?我就是个外壳,包着你们好关掉,回到list里边。同学,注意看啊,这是不是状态啊,哎,对,那这是不是从状态里边读取数据啊,哎,对,这是不是在做判断,根据不同的值做不同的显示啊,哎,对,但是你要这样写下去,你觉不觉得list里边的状态这辈子他也变不了了,为啥呢?他固步自封了。同学,你看一下是list有状态,你这直接读状态做展示,同学,你包含任何更新状态的方法吗?不包含。
17:24
是吧,好,那这个时候呢,关掉,我们回到search里边去分析一波,同学理性的分析问题啊,我确实得获取用户的输入,对不对?同学,我还需要通知APP更新状态吗?您不应该这么做了,那得怎么办呢?来同学,是不是应该把APP改成list,通知list更新状态对吗?那你肯定不能这么写this.prop点你啥也拿不到,因为父亲什么也没给你传啊search,那所以说回来,那这儿怎么办呀,咱就不能写第十行代码了,对不对?那我就先把它注掉,好吧,同学,哎,注掉,那这样我做个分格,这一行呢,我用这种多行注释给你注掉,好,那你说这会儿就得是请求成功,你还得通知谁更新状态呀,是不是?丽,那你好像也不能这么写吧,来给它注掉。
18:18
这一对对吧,说老师之前为什么通知APP哥们儿,之前APP帮你忙了,状态都在人那儿呢,你不通知人家,你通知谁去是不是?哎,那这儿呢,也不能写了,好了,那咋办呢?同学,那你看看啊,来关掉这是search啊,执行搜索拿到数据,想把东西交给谁呢?List你看这俩兄弟现在都摆在这儿了,同学谁要接收东西是不是list?啊,那list就得订阅消息,你觉得呢?好,那咱就订阅,那问题是什么时候订阅消息合适啊,List这个组件什么时候去订阅这个消息合适呢?同学你说是不是这个组件一旦放到页面上了,我就得马上去订阅这个消息啊?
19:07
那组件放到页面,所以说你得借助这个钩子叫component data mount同学,你仔细看,我现在用的是最新版的react脚手架吧,你发没发现那三个人component view mount will receive props,还有will update都被划线了呀,啥意思呢?不推荐你使用了对吧?你再往下看,就算他们加上了onsafe,同学,你发现是不是也被划线了呀,啥意思,就不推荐使用了吗?即将废除了是吧?Get amount mount,哎,走,同学,咱们当时在讲这个钩子的时候,说它这里边是不是一般做一些初始化的事儿,同学,你告诉我都什么初始化的事啊,开启定时器呀,对不对?哎,之前咱好像就说过订阅消息呀,对吧?你只要一跑到页面上,二话不说,我马上订阅消息。那同学刚才啪啪萨那个库啊,你安装了,但是还没有引入呢吧,哎,那写好说老师这个名字,其实这名你叫佩奇都行是吧?哎,给它删掉,咱不叫佩奇啊。
20:07
回呢,嗯,Github它的仓库主页,他说叫做pop subb对吧,咱直接把这复制过来得了啊来到咱的代码当中走引入了没引入了,那来吧,订阅走订阅pop up点来订阅订阅啊,叫做subscript,来同学起个消息的名字吧,我就比如说叫做艾特硅谷行吧,消息的名字随便起吗?艾特硅谷好了,同学,如果有人发布这个消息了,那我就执行这个函数可以吧,我就会收到一些数据啊,Data,那我就把这个数据呢,就给它输出。你要这么写啊,你就有点小问题了,同学,你看一下人家这个函数呢,接收的不是一个参数,是两个啊,第一个呢是消息名,第二个才是数据,同学,其实我说一下啊,我个人觉得他这个设计呢,有点就不太好,同学,你想啊,我订阅的是什么名,我自己还不知道吗?那你说如果有人真的发布这个消息了,你帮我调这个myscript,你就直接把数据给我,我这一接不就得了吗?还非得写两个,还得写个message。
21:14
啊说老师那我们也不用,我们就不接了,不行,同学函数关于参数的传递和接收是不是得看顺序啊,哎,所以说你得写一个message逗号,但是有些时候这个message我是真不想用,但是你不写还不行,那你可以这么写,同学下划线逗号占个位,哎占个位好了啊走。啊,只要有人发布艾特硅谷这个消息,我这个函数,我这个回调函数就要执行,而且会把那个人带来的数据我在这输出,对吧?好同学,谁订阅消息了呀,Did mount啊,在data amount里面订阅的消息啊,是例子组件,那谁发布消息呢?Search,好同学,我把search这个方法里边所有的东西啊,我全都给你注掉,全都注掉啊,但是这里边呢,我包含着多行的注释,所以说它可能就不让我去注掉了啊,那我这样吧,同学这儿呢,我给它解开啊,其实为啥我想在这写多行注释呢?我想让这三句话呢,能让你看的更清晰一点,那来吧,这会写成单行的,这也改一下啊,改一下,好同学,我把search里边所有的东西都给你注掉啊,这回都注掉了吧,Search里边我就干一件事,就是发布消息,是不是想发布消息啊,走着,那你是不是还得引入PU萨呀。
22:34
走起来,到这儿啊,来发布消息咋发布pop萨点儿publish发布你那边定义的名是不是叫艾特硅谷,那你这就得叫艾特硅谷,来带点数据过去,带个啥呢?带个啥呢?带个人过去吧,有name,那名字叫做Tom,有age,年龄18岁,OK,不好,同学你看看啊,现在这个效果回到这儿,来到案例当中,现在你这里边肯定不能执行真正的搜索了是吧?哎,刷新一下啊啊,我还没启动的嘛,啊,那给它关掉吧啊,脚手架还没启动呢是吧,刚才给他停了嘛,来启动一下n PM start,走,稍等啊,等着它启动。
23:20
好了,启动啊,有点小问题,说什么呢?Search里边的index.gs的第八行有语法错误,那检查一下吧,怎么了呢?啊,哎呦喂,这写错了哈,诶,Sorry,应该是放在这里,好嘞,那这回呢,我们瞧一下啊,哎呀,还有问题,那再刷一下呢,那就好了,嗯,走,有的时候呢,他反应可能慢一点啊来同学你注意看啊,我输入123,我输入什么其实已经无所谓了,因为我发布的那个消息叫艾特硅谷,而且里边的那个人呢,也是写死的,对不对?哎,好了,来,走起啊走同学咋样?嗯。同学,这是哪的输出啊,说老师这这是不是你就直接输出这个人了,哎呦喂,兄弟,这是哪个组件呀?看好了是不是list在这儿前边加几句话,List组件收到数据了,这来一逗号date,我在这发布消息之前,我再来一句叫做search组件发布消息了,这回您再瞧瞧,刷新输入123走search发布消息了吧,我问一下同学list收没收到消息,必须收到了,那所以说同学你说如果说啊,我在list组件这块收到这个date不是随便传的数据,而是一个状态对象,我在这里边也不做别的事,我就this.set state,我就直接把state OB BJ,我是不是可以。
24:57
你放在这儿,你只要给我状态对象,我就更新我的状态对不对?那你说来到这儿呢,同学,你别随随便便就发布消息啊,那你说你发布消息这一堆代码是不是得来来来来来,把这解开吧,该获取输入就获取输入对不对?你得通知list更新状态,那咋通知啊?诶,就这么通知publish萨点publish at硅谷来是不是把这一堆东西给他传过去,嗯,跟之前不是一样的吗?对吗?发送请求之前is first为false is loading为true,对吧?之前是这么写的,现在不用这么写了,对吧?现在这么写啊,那同理,那你说你把这一堆给它复制过来,那么如果请求成功了,也不用这种方式去通知了,对吧?因为没在APP里的,现在直接就能跟list对话,那你说是不是还得传这些东西啊,同学状态在谁,那这状态对象是不是得传给谁,让谁去更新呀,哎,好了,那你说这儿这么写啊,那这儿呢,是不是也这么写呀,你只不过是把里边的。
25:58
东西给它替一替是不是就可以了呀?好了,这儿删掉它,同学你看看我都是用什么进行交互的呀?消息订阅与发布,你瞧,一直在发布消息,而我这儿呢,组件一挂载我就订阅消息,你只要给我,我就更新,所以说同学你看这个案例是一样能跑起来的哟,刷新输入艾特硅谷。
26:19
搜索楼丁等着数据是吧,回来了同学,怎么样,是不是让你的APP组件干干净净,谁用状态,状态就放谁呢?那如果有别人想改这状态呢?List你去订阅一个消息,谁想改来search,那就发布消息完事,这就是消息订阅与发布技术。同学,你觉不觉得这个东西不仅仅适用于兄弟组件之间沟通,你觉不觉得适用于任意组件间沟通?你比如说同学举个例子啊,我这有一个大的组件是APP,你用心去体会这事啊,这里边有个组件,这里边还有一个啊,这里边呢,再来一个粉的,粉的里边呢,哎,又有一个呢,比如说是绿的好。
27:06
然后在这呢,哎,举个例子,它还有一个红的,红的里边呢还有一个绿的,哎,绿的里边呢,还有一个蓝的,行,差不多了。同学,我想问一下,最里边的这个绿的想和这边最里边的这个蓝的他俩直接进行组建通信,是不是可以用消息定位发布技术,你在哪已经无所谓了,我在哪也已经无所谓了,只要你把东西给我,OK,我就能收到。接下来呢,写你的逻辑就好,对吧?同学,所以说消息定义与发布技术是不是挺好用的?哎,那当然了,你写的不太完善,我们再完善一下,怎么的呢?就是这儿啊,会拿到一个token,我放到this身上,对吧,this.token然后你还记得那个钩子吗?同学们叫做component view on mount,只要你的组件即将要被卸载掉了,那我就必须得来这么一下子,叫pop sub.on subscript取消订阅,那得传一个token,谁呢?就是this.token OK,同学,你看用了消息订阅与发布技术,是不是这东西就比较清?
28:06
析了呀,哎,好,那这一小节呢,我们先停一下啊同学,咱再说一下这个重点在哪啊,首先谁接东西,谁在data mount里边订阅消息,然后在view on里边呢取消订阅,然后谁想给别人传东西呢,谁就发布消息,对吧?哎,好了,那这小节呢,我们停一下。
我来说两句