00:00
看先呢,大概对他们有一个基本的理解,那基本理解以后呢,我们就要去看啊,它是一个怎么做的,这里面其实涉及到另外一个东西叫context的一个理解使用,因为它里面用到一个技术叫context context翻译过来叫什么呢?上下文。啊,其实我就把它理解成一个啊,全局的对象,全局的容器啊,全局的容器,那就说容器里面放什么,放数据的呗,那也就是说一旦放到这个容器里面那个所有的子组件。都能看得见。啊,都能看得见,这是说一个什么事啊,大家看一下啊,我们以前存在这样一个问题。这问题咱以前说过,就属性多级传递等于什么一层一层的传。对吧,就是说能不能简化呀,是吧,我们那是用什么呀,帕萨。
01:06
对,不但是用号上,主要是传函数的问题,解决函数的多种传递,那一般属性的多种传递了。对吧,啊OK,当然用redu可不可以做到,可以做到,其实我们现在要研究的是Du内部是怎么做的,听到吧,它内部会用到这样一个技术,叫context啊,这样一个啊,这样一个技术,它是一个什么意思呢?哎,我们把这个得讲一讲啊,因为后面我感觉好像挺多的。来我们建一个建一个页面啊,建一个新建文件夹啊,建一文件夹不行。先我们叫context健康,好在这里面呢,我们去建一个页面。啊,就叫就叫test吧,啊随便啊好,我们要去写RA的组件,得导入一些。
02:07
用我们页面的用法啊,再导入一些包,就导入这玩意这些。好久没用了是吧?啊,给它搞过来,如果是页面的用法,那就应该把它搞过来放在这里。能不能看懂,好,那看懂以后呢,下面我们要引入他们吧,引应该可以引吧,来引入一下啊,诶不动啊啊记得了。啊,就点斜杠就行是吧,首先引入的是react这个吧,啊接着react.do啊看DOM是吧,接着是。呃,Proper还一个是不是,呃,就这个不吗?就这个吗?是这个吧,还有一个明白了吧,好来啊里面呢,我们就可以写一些我们的JS,在这上面先写一个div吧,先写一个div啊,它的ID呢叫test,好来接着再去写一个的一啊把这个改成什么Bible对吧?好,现在啊,我就来去看一下啊,定义三个组件,我要定义三个组件A。
03:39
就简单写个名字就拉倒啊,React component,必须这么写啊,不能往下不行啊。再写个什么?Re,能看懂再一个结构是吧,好,我来去写一个div,写一个HR啊HR这是那个A组件。
04:07
啊,A组键主键,诶主键看啊主键OK,好,我们说过来这里面啊,我要说一下啊是个什么关系,A里面是谁套着什么呢?套着B。能不懂B里面呢套C,那下面我是不是要套B去,那我就要写一个B能不能看懂,那我当然也要定一个什么,定一个B组件,下面就是复制粘贴了来个B能不能看懂,接着呢,我这是B组件,这里面什么C。有没有看到,好,再来一个。这里来一个什么C组件,接着呢是C组件啊,这个就就不用套了。
05:02
看完了好,最终我去渲染谁去reactr点啊,怎么都没提示了学校费劲了啊A是吧,接着这么did不出来了,半天才出来啊did。是吧,Test y test吧,嗯,没问题,好,先打开这个结构。能不能看到好能看懂吧,假设我现在A呢有一个状态。啊,我不知道这个这个能不能写这个语法啊,有可能不能写,就是写一个这个就是我假设我这里面有个状态叫color红色有没有看到啊,我想把这一个状态值传给C。我想传个CC来显示。
06:00
怎么说,那我得什么?先B是吧B的,再看C,这是以前的语法是吧,那而我们现在要说的是用contact的。他是怎么做的?对吧,啊。好,那我们先得把这个打开。打开以后呢,去看到文档,文档里面有一个高级指引啊,在这里面就有什么context。啊,这个说的是那个啊,前面以前说过,好,这里面大家看到前面他就在去说一些事情啊,说一些事什么事啊,就是啊。如果你不想向下每层都手动的传递你需要的pro,你可以去使用强大的什么context。
07:00
但是他又说了,为什么不要用这个挺奇怪的一个词啊,是什么意思呢?是一般的程序,你自己不应该用context啊,但是我们的库。他在用就在告诉你什么,就是这东西啊不太安全,你用起来你技术要强,你就可以用,你要技术不太强,你他建议你尽量不要用,而应该用什么呢?用封装好的。懂我的意思吗?就这个东西可以用,但是吧,这个用起来很有风险。啊,所以一般的程序呢,你能不用就不用了,那如果你确实需要这种啊,看来实现某个事情,其实你用redu肯定能做到。啊,或者说用react啊,应该说它是这它内部就在用这个,当然那些写库的人肯定是很牛逼的,而且他们也是不断一点一点的写的,开始也没写那么好是吧,不断的完善,不断迭代,最后是不是才形成一个特别好的一个用法。
08:12
懂不懂啊OK,但我们现在啊,腾讯老师,那既然他建议不要用,咱为什么要用啊,咱是测试,不是真正的在项目中用。能不能去测试一下,看看这个功能到底怎么用的,到时候我们要去写实现了啊。而它的这个用法吧,也有一点麻烦啊,有点小麻烦啊,这个大家不用继续太背,我们来看一下那个我的这个文档里面的东西是怎么去写的,这个分为两个方面要写。两个方面,一个是父组建一个什么呢?后代组建,大家看到啊,我强调是后代组建,什么意思,所有子孙都可以,能不能我们那个pro是不是得一层一层传啊,他不用。
09:04
啊,他不用啊,大家看到,但有一个事情啊,这一个是在干嘛呢,我们看一下副主件里面在写什么啊,就这一个是用来去声明类型的吧,啊这个是用来去声明我的孩子。可以看到的context里面数据类型有哪些?首先名字叫什么color color什么类型使菌啊,当然你也可以写点什么,1REQUIRE也没问题,懂不懂这个他必须写,你不写他包啊,他强制,因为这个东西写起来有风险,所以你必须声明,你不声明效果就出不来。啊,OK,好,但我孩子这边也要声明,因为我要读吗,明白吗?但是名字有点区别。看到了吧,这个声明是我可以向所有的孩子传递什么样的contact,对吧?而这个是说什么,我读我接收什么样的contact。
10:08
这个名字不太一样吧。有没有看到好下面,那我怎么指定我的context里面有什么呢。这里面这里面说白了,我的孩子能从我手上得到什么样的context了,对不对啊,这里面有个get什么,这名字都比较长啊,Child的contact,就我的孩子到时候能得到你什么样的contact,这个就是contact整个。里面有什么卡了。来,我把这个不用把这个搬过去。放到哪个里面。A还是CA吧,对吧,对吧,但是A这个值这个值。这时我想是不是用它呀,那我怎么写this点点对吧。
11:09
好,嗯。来搞定了啊,那下面我的孩子呢。首先你得声明吧啊,声明接收什么啊,先声明啊,在C里面也说白了,可以挑个B。对吧,啊,OK,声明声明好,声明好了以后啊,声明好了以后,接着我是不是有可能,比如说我这里面有个style对吧,我要显示一个字体颜色。怎么是不是要去读啊,咋读呢,不是是点什么开了能不看到,好来我们先来看一下,看看这一个是不是有这一个效果啊,哎,刚才是不是打开过。
12:05
诶,这个嘛,走。可不可以,可以不啊可以,那也就是说我们用上context以后,就不用像pro样什么一层一层传递,其实我问大家,你说我的B能不能取啊,可以啊,因为它什么相当于全局的吗?这个全局啊,只是针对是我所有的后代。对吗?我所有的后代都可以去。这与你是孩子还是孙子有关系吗?没有。诶,他为什么用这个语法呢?是吧,这个你得想啊,我们最外层是不是用的provide。是吧?而我们在任何一个层次里面都有可能存在一个什么呢?存在一个容器组件。在provide里面是不是有可能存在一个容器组件或多个对吧,任意多个,那我的容器组件是不是要去操作。
13:08
对吧,我还超了十多,关键现在麻烦了,我能得到十多吗?我怎么样得到十多呢?对不对,那我们的provider就做些事情了,Provide给干嘛呢?他首先他自己是不是接受到了一个属性叫S多呀,有的多他做什么呢。对不,他就给暴露给什么所有的孩子。我看太子不就能做这个事情吗?对不对啊,我的所有的孩子是不是可以就可以去看到我的这个湿度了,只要有了这个速度,那事情就好办了。那你要是获取状态可以吧,你要去分发action可不可以可以都可以了。啊,你一定要先理解这一个provide。
14:03
它起的作用以及我们的这一个容器组件。它要利用这个度。去读状态,去分发action,就干这两个事。啊,但真正写的时候他还是有点难度的。就说归说,其实真正写的时候他在里面啊,就是会东西会比较多一些。啊,不要眼花啊。嗯,OK,这里面是主要注释也比较多,嗯,前面就说过了啊,这个东西啊,大家尽量听啊,如果你能听懂一些了啊也行啊,实在听不懂,那你就进来听一下。因为昨天昨天我为了就是这个课件是昨天晚上整的啊,昨天晚上应该我整到就不知不觉就是坐在那个,坐在电脑前就就冲冲冲冲冲,就是我从八点钟坐坐那里就没怎么动啊,水水喝了一杯水,就中间就喝了一杯水啊后面后面感觉水没了,也懒得去,就不想就坐在那就不想弄啊就是就后来后来后来一看快搞完的时候已经一点多了啊啊就是最后最后应该是差不多两点钟才睡觉,其实没困意,一点困意都没有啊因因为是什么呀,就两个事啊,两个事情,一个事情就想着我今天晚上搞不清楚,我明年没法讲啊,其实这种这这这种情况就是啊,这是一种必然的压力,大家以后工作也会到碰到这样类似的压力,再一个事情就是我觉得我不把它搞清楚,我觉得啊难受,就必须得把它搞清楚,才才有可能觉得要。
15:54
就是原因挺简单的,其实真正整个过程也是还是挺费劲的。
16:00
啊,就不,你别觉得我现在好像写起来很顺的,其实开写的时候也也报过很多错,最后一点一点解决之后才写出来啊,大家不要觉得你们写不出来代码就怎么着啊,其实是非常正常的一个过程,行,大家就先讲到这里啊,准备准备啊。
我来说两句