00:00
好了,各位昂地,这个UI组件库呢,我们就聊到这儿,回到课件当中,我们就把第六章的内容啊学完了,但是在这儿想跟大家多聊几句。市面上有N种UI组件库呢,为什么我们选择讲解它呢?两个原因,一、昂D呢是蚂蚁金服出品,无论是组件的封装还是API的设计都是非常优秀的,甚至很多其他的UI组件库都在参考人家进行封装。还有一个原因啊,就是当你去横向的对比那些react的后台管理项目,你会发现啊,On d使用的几率还是比较大的。啊,所以说我们选择哎这个进行讲解,那么还有一个问题啊,同学你说到了工作岗位上你就一定用on d吗?不一定有可能你到了工作岗位上,你做那项目,你在最开始人就说了,我们不用on d作为UI组件库,我们用什么呢?比如说举个例子啊,你没听过的什么什么什么杠UI组件库,那怎么办?同学不慌不忙的,我们就打开它的官方文档,我就看看你那组件都有啥,每一个组件都是怎么用的,每一个组件的API都有什么就可以了,所以说同学不要,哎想说老师我要不是学的六个八个的UI组件库,没那个必要把一个经典的人哎学一下,然后剩下那些呢,临时用,临时咱们参考官网就可以了。
01:31
啊,好了,那这第六章呢,我们就说到这儿,接下来我们进入第七章的学习,学习一个新的技术叫做redux。同学,我先说redux不是一个你必须要掌握的技术站,你就比如说老师我不会redux,那以后我能不能干react开发呀,也能也可以,但是如果你的那个项目里面涉及到很复杂的啊,这个状态的啊交互,那这个时候如果人家里边再用上了,那这个项目你就不会写了,对吧,不是一个必须的,但是学习这个呢,对大家是有一定提升的。
02:09
啊,所以说还得好好学啊,很多的初学者呀,都说redux啊,太难了,概念多,文件多,写法也绕,我根本hold不住,那怎么去解决这问题呢?同学这样做啊,我讲一小节,你练一小节,不要出现你连续听了十节,然后呢,一点也不练,这就不太合适啊,我讲点你练点,最终呢,哎,东西就也能生成,然后你再多写几遍,就能把它记住了,但凡是你记不住的东西,要么是刚开始理解的时候,对他就没有说真正去接受这个东西,或者就是说你真正的接受了,但是懒没敲没练,对吧?好,哎,这个读法你得会啊,叫redux好了,来,接下来呢,我们理解理解这个redux啊,三个文档给大家放在这了,英文文档中文文档GI up主页。我们讲课的时候,可能还需要的时候会查阅一下文档是吧?好,往下看redux是什么?先读第一句话,各位,Redux是一个专门用于做状态管理的JS库,也就是说你用了redux,它能帮你干嘛管理状态?说老师,我的状态凭什么要交给它进行管理啊?那状态不是组件里的东西吗?
03:21
那你看,比如说老师,我有ABC3个组件,那每个组件都有自己的状态,自己管自己的事儿不就得了吗?是吧?那为什么还要re管理呢?别急呀,你先知道它能帮你管理状态,至于说为什么非得用它去管理,往下咱就说了呀,是吧?好,撤回来走,再读括号里的话,它不是react插件库。有些同学就被他的名字给骗了,老师,你看react那Du老师明白,他俩都是一家的,不是啊,同学啊,他俩之间的关系呢,就像Java和javascript,仅仅就是名字有点像,没啥联系,所以说同学你也别说,哎,老师这个Rex也是Facebook出品,不不不不是是吧,说老师那Rex那是谁出品的,就是一个团队的作品。
04:11
啊,然后在react项目里边用的比较多,能帮你管理状态是吧?再读第二句话来走说它呀,可以用在react angle view等项目中,也就是说前端的三大框架a view和react里边都能用谁呀,Rex。但是和谁配合的是最多的呢?跟react老师,为什么呀,那我说说,比如说在view中,你想进行统一的状态管理,说老师,那我就用relax,不view,人家有一个自己哎独有的叫view叉,人家也能进行哎状态的管理。说老师那我就不想用view叉,我就想在view里边用也行,没说不行,但你那么写就不太合理,人家有一个更专业的人嘛,对吧,好哎,那所以说呢,跟react配合比较多,好了我们再读第三句话作用。
05:06
Redux能帮你进行集中式的状态管理,先把这句话读一下吧,集中管理react应用中多个组件共享的状态,那问题来了,啥叫共享呢?给大家画个图来,比如说同学这有一个组件啊,叫什么呢?APP里边呢,我再多画几个组件,好吧,嗯,诶,这是一个,再来一个粉色的,里边再画一个橙色的,里边再画一个加粗一点啊,绿色的啊,那这儿呢,再给它来一个红色的,我这颜色都用的差不多了,所以说颜色重复也就重复吧,一会儿我给你改名,比如说蓝色的组件,我叫的是A组件,而这个粉色的组件呢,我叫它。B组件啊,橙色的呢,我叫它C组件,绿色的呢我叫它D组件,好这个红色的呢,我叫它一组键写好啊来同学再给你补一个,再复杂一点,这再来一个。
06:14
叫F组件,好了,差不多啊,不写那么多,同学来,什么叫共享啊,首先呢,咱一点一点的聊,别嫌麻烦啊,同学我问一下,接下来问你提需求。B组件的状态E组件要用B组件的状态粉的E组建,这红的要用,那怎么办呢?那同学你可以这样做啊,首先最笨的一个办法,先说最笨的一个办法啊,B组件把东西交给APPAPP再传给谁呢?再传给E,这是不是可以好,那这种办法比较笨是吧?因为我们学过消息订阅与发布,同学我在E组件里边进行消息的订阅,我在B组件里边发一个消息,E是不是就收到了,是不是就像咱们之前所说的消息订阅与发布适用于任意组件间进行交互,对不对啊,你给我东西,我给你东西,其实咱们有一个专业的词儿叫通信,对吧?但是现在啊,同学们,我们还没有把所有的技术都学完,你能把所有的技术都学完了之后,最终给大家来一波总结,叫做组件间通信有哪些方式,现在咱先学着啊,咱目前制作的就两种,一个是靠副组件逐层传递,那一个呢,怎么办?哎,就是靠消息定位发布,有一种隔空喊话的感觉,对不对。
07:36
可大喊一声E就听见了,OK,就这意思好说,老师,那这也不用relax啊,也不用集中式啊,也没有共享啊,好,那你听着,接下来呢,我再给你提个需求,同学注意听啊,D组件,绿色的那个D啊,D组件就它D组件的状态,ABCEF都要用。
08:00
哎呀,说老师,那也就是说D里边的东西abef都要用是的来,比如说同学D里边那个状态呀,是个对象,有一个AB是一,有一个B是二,有一个C呢是三,好同学注意听我说啊,A和B就这个AB,没说C啊这两个东西。嗯,然后A组件B组件C组件,组件F组件都要用。那怎么办?同学,这就有点共享的感觉了,对吧?明明是D里的A和B这两个值,但是那些组件都要用,那怎么办呀?你当然也可以这样做啊,你不嫌麻烦,D先传给CC,再传给BB,再传给APP,同学这条线如果想跑通,是不是要求APP当年得传给B一个函数,B接触之后再传给CC,再传给D,对吧?得有这条线,然后在D里面一调用,就把东西交给APP了,然后APPAPP再啊给epp再给AAPP再给B,是不是一个一个给啊?同学不说这种方式了,忒麻烦了是不是?
09:12
啊,那还有什么方式啊。如果说你不嫌麻烦,你可以这样做,A里边订阅,B里边订阅,C里边订阅,E和F里边也订阅,他们都订阅,然后D呢,一发布消息是不是也能接收的到啊同学,那你觉不觉得这些方式它都比较麻烦呀,是吧,你得一个一个订阅,要么你就得一个一个传,诶同学,如果你要用redux,那这个问题就好整了,你看一下啊,Redux在这儿呢,同学,你看啊,它是独立这些组件存在的,不是说redux在哪个组件里边,Redux是独立所有组件存在的,Redux就在这儿呢,好。D组件里的一和二是不是其他组件想用啊,那么你注意看我画一个加粗点的箭头,这个D组件啊,就把A和B呢交给redux,诶,Dux里边帮你存着A帮你存着BA,好,那你说redux都帮我存了,同学们,这个里边是不是就可以不用写了呀?哎,那所以说D组件自身就不再保存A1B2了,但是D组件里边存不存这三呢?同学存,因为这个三是D组件自己用的,那为什么它不存呢?是吧?好,把那些人人都要用的交给redu,然后redux说来吧,ABCF你们几个组件听好了,我这里边已经拿到了D给我的东西,你们谁想用,亲自来我这取。
10:49
不用你就不取用,你来我这取一下就可以了,哎,那所以说同学你想想,如果A组件要用怎么办呀,通过哎某些语法取出来E也要用呢,那你就去取呗,对吧,哎,咱就写F吧,E太远了是吧E对吧,说老师那我不用不用就不取,同学觉没觉得共享的感觉已经出来了。
11:10
哎,我就把那些人人都要用的我交给redux,剩下的事儿我就不管了,你们自己去找redu去吧,对吧?这就叫做集中式状态管理,但是并不是说D组件要把自己所有的状态都交出去,然后说D组件就不能有自己的状态,也不是状态该有有,但是你状态里的东西要是共享,你就可以交给Rex,对不对?所以说同学管理状态,Redux是专业的,说老师,那要这样呢,如果说E组件那一组件有状态,它里边有X是零,有Y呢,是一老师,E组件这个X0也想让大家都能用得到,那就要求一组键,你得大方一点,把你的零交给谁Rex。但凡是别人都要用的,你就交给我就得了,同学呢,我问你,如果没有共享,你就比如说D里边这个三,D组件里边这三,我想问的是同学这东西是不是D自己在用啊,那你就没有必要再放在这儿啊,明明只有你自己用的东西,你非得交给redu,然后你再不嫌麻烦再从redu里边取,哎呦喂,您累不累呀,是吧?
12:19
啊,所以说同学你看这就共享的感觉,这不就出来了吗?同学,这个redu现在你怎么理解它啊,同学你想一下生活中的例子,我不知道大家经没经历过那样的啊,我见过那种就是。我有钱,我就想开一个饭店,但是我不懂饭店的经营管理和宣传等等这些,那么我就可以请一个职业经理人,对吧?我把权限都给你,我也给你开工资,你就负责帮我把酒店打理好就可以了。reus同学,他不是职业经理人,他是一个职业状态管理师,是吧?有点这种感觉是不是?哎,所以说同学你看他也没这么难,哎,这共享好了,回到我们的课件当中,同学往下看,什么时候需要用redux呢?读一读吧,某个组件的状态需要让其他组件可以随时拿得到,有没有一种共享的感觉,是不是刚才我画图那感觉,哎,再读第二个就是一个组件要改变另外一个组件的状态,我们管这个呢,哎说哎叫通信,这啥意思呢?你比如说同学,我这有一个组件啊叫A,我这有一个组件呢,叫做B,如果说A组件想把自己的状态咋的呢?哎,交给B,然后B收到这东。
13:30
去之后呢,B就把收到的东西作为自己的状态,那你觉不觉得就是一个组件需要改变另外一个组件的状态,如果A里边的状态改了,那么由于你这个东西是传给BB接住自己用的,那你A1改,B是不是也改啊,是吧?哎,这就是属于一个组件要改变另外一个组件的状态,那这个时候呢,你可以借助redux,也就是说你可以不这样,A把东西给B,你可以这样啊,A呢,让它省心一点,撤回来,我把这箭头撤回来,这个B呢,我正常给你写上,A说呀,B这样吧,我不跟你直接对话了,B啊,我反正就把东西啊,我就交给redux,别的事儿我不管,哎,我就交给redux是不,你如果说你喜欢用,哎,撤回来,小写的啊,走哎,交给redu啊,我不管,反正我把东西交给re了,如果说你想用我的状态,哎,拿过来你去用,那行你去redu,你自你自己去取,你取出来之后你是直接展示。
14:30
还是说你取出来之后,哎,然后你想自己作为自己的状态,那我就不管了,反正我交给reus了,需要的时候你自己去取,其实体现的也有点共享的意思,对不对?同学啊,那要这样的话,你觉不觉得其实B组件也不用有自己的状态了,A组件的状态是不是已经交出去了,那B呢,从reduce里一拿就得了呗,有没有一种感觉A和B在共用这个里的状态?哎,就这回事啊,再读第三句话,同学第三句话就有意思了,说redu使用的整体原则就是能不用就不用,嘿,同学们看到了这句话之前我在线下讲的时候啊,有同学开玩笑的说,老师你不是说能不用就不用吗?放心,哥们儿,我今天就能不学我就不学,那不行,该学还是得学的。说老师为什么说能不用就不用呢?那是因为啊,如果你在你的组件里边用到了redus,它并不是像你想的那么简单,你嘴一张一闭,这玩意儿就用了,你学习它也是有学习成本的,所以说同学如果说没有大量的组件要共享状态,其实你没有必要,对吧,用这个re,哎,所以说这就是我们所表达的能不用就不用,但是要是需要用到的时候,你也别客气啊。来读后半句话,如果不用比较吃力,然后你再考虑使用,老师这什么意思呀,你比如说红色的是APP,我里边有一堆的组件,一堆组件,而且组件嵌套的还比。
15:54
找申同学一个非常深层次的组件,就说他要把东西给他来,我问你要不你自己就逐层传递,要么你不嫌麻烦的,你就消息定位语发布,你像这种情况还说哎,这个组件的状态要给他,哎这个组件的状态呢,也要共享出要给他,这业务逻辑就有点复杂了,这个场景就复杂了,所以说这就是比较吃力的情况,那这个时候你就不能再客气了,你就不能再绷着了,你就该用用对吧?哎,所以说不用比较吃力,你再考虑使用,但是吧,咱话又说回来,这东西不是随便就用的,学习成本比较高是吧?生活中的例子就是啥呢?你比如说你每天都上班坐公交,坐地铁,对吧,是不是都得等车呀,是不是比较吃力呀,那吃力怎么办?自己买台车,买台车不花钱呀,对吧,也是有成本的,好,这就是对redux的一个简单的理解,好了,那这一小节呢,我们停一下。
我来说两句