00:02
呃,我们下一个要讲的是Rex。嗯,在讲它之前呢,我们说一下我们的应用中有就有Du的一个需求。嗯,是一个什么意思呢。嗯,比如说我们这里面有两个数据啊,一个是这个标题的数据,一个是优。比如说这个标题的数据,我们在这左边要用吧。要确定是哪个标题,是不是再一个我们这上面是不是要显示啊,重点最终是要显示,而这个显示是不是靠我这个左边的这个组件来去决定的。是不这个地方啊,我们现在的时间是什么,是在这个上面,在这个组件里面又重新去查。这实际上有点。那为?因为我们点我们选择的时候,这个左侧选中的时候,是不是就已经确定了,它应该显示哪个标题啊。能听到不,那这个时候就涉及到我们是不是这个多个组件啊,两个组件共享一个数据的一个问题。
01:07
啊,当然还有一个更严重的就是有着有着好几个组件用的。比如说啊,比如说我们啊登录组件要用吧。这个hand要不要用?因为它显示用户信息嘛,还要去退出登录是不是。包括我们整个界面,他是不是也要去判断用户是否已经登录,如果没登录,是不是要退出登录。就进入了我的登录页面,是不是也说整个界面显示的前提是不是用户已经登录啊。我们有好几个组件需要用到同一个数据,就是那个U。然后我们现在处理方式是什么?是把那个user放到了一个memory优,也就放在内存里面吧,就这种处理方式呢,是种简单的有点小漏的处理方式。
02:00
啊,有专门的工具库来帮我们去做这样的事情。那个库了就是谁了。来,我们来看一下啊。首先要对它有一个基本的理解啊,这里面呢,有它相关的一个文档,来,我们就来去打开它的应用中文文档,当然我们可以去印象啊,应记里中文里面去找是吧,找谁。嗯。好,那这里面就会说了很多,以及它相关的语法啊,以及一些啊教程类似的东西。那好啦。在这里面呢,就有一个介绍一个动机什么的之类的东西,会跟你去说,那我就看我们自己的啊,看我手机好的。首先我们来说一下是什么呢?他是一个GS库,这个没问题吧。
03:03
那是A库,我要用它的话,是不是,首先你干嘛去。是不是首页的去下载。那也就是说我要在我的项目里面通过young爱的方式,是不是去下载下来。当然我们啊,为了。简单几页,我们这里面应该已经下载了,我们看一下。能听到吗?下载包对咱来说不是问题啊,只是网速的问题啊。好,没问题,那它用来干什么的包呢,是不是?用来专门做状态管理的包。状态是什么?状态就是一个可变的什么呢?数据。能听懂不?我们说一个人作为一个对象来说,他有两个方面的数据,比如说你的年龄,你的身高,你的体重,你的姓名,对吧。还有一个方面的数据,比如说你能跑步,你能吃饭,你能睡觉,你能写代码。
04:01
诶,这两个方面数据有区别吗。有。有刚刚看到说的姓名年龄身高体重,这个我们是如果我们用GS来对象来表的话,是不是封装成属性,那后面说的你能跑步,你能是败,你能写代码,这是什么方法是吧?方法,那那刚才说的啊,实际上说的你的年龄,你的身高,就体重称为你这个人的一个什么呢状态。状态数据听到不。而你能做什么事情?那是你的什么呢?行为数据。能理解吧,状态对应的就是属性和行为,对应的就是什么方法。能听懂不?而我的行为是不是很有可能去操作我的状态数据?而且我的状态的数据的值是有可能改变的吧。能听到吧。
05:00
啊,你的年龄不是随着岁月的推进以后不断的在变嘛,今天一岁明天两岁是吧,那当然不可能是一年一年变一岁是吧。好,来。那我们的组件是不是就是根据状态数据来显示的?能听懂不好?那它专门是用来去做状态管理的库,这个地方要强调一个事情,Rex并不是的插件库。这个比较特别。美女吧,那也就是说不仅仅可以跟react配合使用,还可以跟其他库也可以配合使用,只是说。基本上可准配了。也就是说我有某一个啊,我这个有跟任何库配合能力,但是跟谁最合适的问题,对不对。能听懂不啊?有一个合适的问题,我跟react啊,他们配合起来更好一些,不是说不能用啊,在view里面也可以用relax,但没人这么用。
06:07
啊,再一个它用来干嘛呢?诶这里面就有一句话。叫集中式管理的应用中多个组件共享的什么状态?比如说我们当前我们这个应用里面的user。是不是多个组件需要啊,那么呢,我们现在是不是自己搞了一个工具的一个模块来去存那个user,这种方式其实不太优雅,不太好。简单的还行,要多了。不好控制,最好是用专门的库,说白了库做的更加专业是不是?啊,这个要懂啊,集中式,所谓集中式就是一起放在一起来管理。啊好,这是这个事情要懂啊,共享状态是不是就是多个组件会都要用到的一个状态数据吧。
07:00
没问题,好,它这里面呢,有一个工作流程图来去解释啊,Reduction里面。是怎么运转,以及它相关的结构有哪些。好,那再去写他们之前呢,在去说他们之前,我们最终啊,我们是通过一个应用来去说这个,说这个例子的,我先来去做一个应用啊,说一个应用来去再继续往下说。大家看着啊,我们最终要做这样一个应用啊,我来先说明一下这个应用啊,我们这个应用呢,有一有没有状态数据。也是老师每个状态数据变化的就是状态数据。听懂了不,我这个地方是不是有一个点击次数的问题。能看到吧,这123实际上是我选择的一个数据,这个的话不是双大数据都可以。
08:00
能听懂不,主要是这个上面在变化,不断变化的数据为点它是不是产生变化呀,这是我的一个状态数据啊,我们最终呢,就以这个例子来去说明这个问题。啊心要有这个药,我们就要要做啊好。来,回到这里来啊,回到这里来啊。这个工作流程图,再说一个什么事呢?这个工程图其实看着很复杂,分为两个部分。这是什么部位?React components是不是主件?而且什么意思?多个组件。想着我们那个优者啊,我们那个优者是不是有多个组件要用到那个优者。是不,我们应该将多个组件共享的状态交给谁去管理?是不是叫做管理?那交给管理redu部分有这么多相关的结构。
09:00
那一旦把状态数据交给re啊,我的组件是不是要跟re进行交互?是不是,那我要交互有两个方面。你想想看数据呢,在这个里面。但是组件我是不是需要这个数据。那我至少要怎么?是不是要能做一个什么操作。毒啊。是不是这意思?那组件除了独装态数据,最终是不是还要更新状态数据显示?但是装的数据没在我身上啊。所以我下一个操作是不是就要去告诉Rex去更新状态数据。而且一旦他更新了,我还要自动什么。显读取。显示更新后的结果对不对?这实际上是不是就两个操作,一个是去读,一个是去什么写,或者叫冰心。可以吧?不就这两套的吗?
10:01
你别管怎么做的啊,你别管怎么实现,你先要知道有这两个行为。这个懂不懂,这个应该是懂的啊好。那下面要说一个事情,Redu里面最最核心的一个结构是这中间的一个结构,它的名字叫什么?多多什么意思呢?存储,如果是动词,就要存储,如果是名词,可以把它称为仓库。存储的一个容器能听到不啊,这个容器里面存什么呢。存状态数据呗,对不对,这能听懂不?它内部可以存储状态数据。啊,我它不仅有存储的一个能力啊,还有管理的能力。它有管理能力,比如说我们要通过通过这个图,你能看出来我这个组件怎么样得到这个状态数据啊。是不是通过store来去取状态数据?
11:03
看看这个吧。好那个,那如果我要更新时段里面的状态数据了。这个流程就有点长。会涉及到有一个方法,有一个函数叫什么,Papach什么意思。见过这个男生吗?没有金波。没见过的单词,什么第派遣来看一下这个单词意思,我啊看一下叫分发的意思,我们看一下。派遣。发送。啊,有一个呢,啊叫风发事件。我们平常我们是不是叫触发事件呢,我一点击是不是触发事件呢,是浏览器自动去什么呢?它内部要做一个事情,叫分发事件,叫PA。
12:00
而他这里面是分发一个什么。Action action什么意思?行为行动,我们可以把它放在一个行为,一个动作。能听到不?这能懂吧,也就是说,比如说我这里面有一个有一个看看有回想一下,回想一下我们这个功能。这一个假设,我将这个是不是点击的次数啊,我把它名字称为count,可以吧。我可以将这个count交给管理吗?可不可以,可以,那我点击这个按钮,是不是要对这个count加一,或者加一个一定的数量,是不是点这个减呢?啊,就说咱是一吧,那是不是减一。那到底是加一还是减一,是加多少,这个东西就要封装到一个什么里面呢。Action里面这个action是不是决定了我对这个数据是进行什么类型的操作,是不是。是做增加的操作,还是做什么减少的操作,听懂不?
13:04
而且X型是减少多少,增加多少,都要放到一个什么呢?X里面能听懂吧,接着说去分发这个行为,分发这个行为最终的结果是要产生新的状态。我是要更新状态去的嘛,是不是产生精神状态,也不是我逐渐的产生,是由它有专门的一个结构叫reducer,这个不用加SR reducer。Reducer是一个什么类型的?说一下是一个函数。这个函数,这是他接受的参数。这是它的返回值。那这个函数要干嘛?怎么描述它?接收一个原本的状态,它里面是管理状态,原本他是不是状态值的,还接收一个什么。是我指定的吧。是我去指定的这个里面存储了哪些东西呢?存储了我要增加还减少是吧,我要增加或者减少多少,那个值增加一。
14:06
增加增加三这个数值是不是存在里面,好,他根据你原本的状态数据,以及你告诉他的这个行为。来去处理,最终产生一个什么新的状态?那我的store是不是得到了一个新的状态?接着接着要干嘛。让我的组件是不是读取新的状态显示,而且这个操作应该是自动的,你不让我还要又写代码去重新又去读。这能听懂我意思不?就一旦吃多了,你们的状态数据更新了,那我的组件也应该更新是不是?大家能懂吗?啊,当然现在你没办法说非常非常明白。你大概知道了啊,现在我们要将组件多个组件共享状态数据交给redux管理,对不对,它是存在哪个里面的,多里面的是不是,那我就要通过多是不是来读。
15:07
这个方法也是十多的。这个方法也是适度的,这个暂时先不看啊,等会我们用到了再看好,接着呢又调用思度,是不是要更新状态去。要更新状态,是不是得告诉他?是要增加还是减少,是不是是要增加多少,是不是都放到这个里面呢。他是去调用专门的有一个人,他还有一个角色,专门有个人来去生成新的状态。是不是做了一个分工啊,大家看来做了一个分工,谁来帮我专门来根据老的状态生成性状的呢?就是这里有个概念叫reduce丢手。所以user这个单词见过吗?Reducer没见过,但是咱见过reduce对吧,是用来干嘛的啊,是不是用来去做一个数据累加的呀,累计的对不对。
16:01
啊,其实这个名字就是啊,大家知道reduce它传什么吗?要。传两个参数吧,第一个参数是不是是个函数,是不是做累计累加一函数?第二个参数是个初始值,能懂不?而这个函数有一个专业的概念,就叫reducer。它的这个结构就是根据这个名称来的,为什么叫这个名字,后面我们才能分析,因为还没写,所以无法感知跟它有什么关系。啊,大概有一个影响啊,我们等会写完之后,我们做完练习之后,我们再来画,自己画这个图大家就清楚了啊。好。什么情况下需要使用re啊?他说了很多的原则,基本原则是能不用就不用,其实咱不用太小。对于一个真实的应用来说啊,真实的应用来说。啊,中大型的基本上都要用redu,如果你用的话。
17:04
基本上都会用relax。那什么时候不会用大呢?有两种情况,一种情况咱这个应用确实太简单了。就是展现展现数据,啥也没有。能听懂不就非常非常简单的项目。第二个我们的项目呢,确实有点难度,但是呢,我的程序也搞定。能听懂,不就是我对我的这个技术吧,我没有信心。我就自己管理得了。听懂我意思吧,我就自己就自己把你拉到。嗯,就别要我的大来管理了。无非就转用可能性,其他的都应该会用。那re,整个是react,整个技术里面咱学了这么久,应该就两一个啊,在到家学一学就知道了啊。好。来后面呢,会涉及到,那肯定它一个库嘛,肯定有一些什么。
18:02
是不是相关的语法我们大概的过一下啊,首先它有一个函数,它提供了一个函数叫create store,我们刚刚说re,最核心的一个结构是谁?Store是一个对象,这个对象怎么产生呢?亏斯多专门提供的这个函数去调用亏斯多就产生了一个什么对象,说一下只是亏斯多要传给他一个什么呢?一个R。需要去传给他一个reducer,因为到时候将来这一个是不是得调用这个reducer来去生成新的状态。能听懂吧,大概有个印象啊,等会我们用的时候,我再会给大家来看啊,这里面我就不仔细的去说了。好多的对象,它有一些什么样的功能呢?他大家看到啊,它内部维护这两个东西,我们刚刚说是多来管理费。状态是不是,那必然是对吧。
19:01
还有一个就是什么R为什么需要它?你想将来在更新状态的时候,这个湿度是不是得调用reducer来产生新的状态?那他提供了这么一些方法,我们来看一下get state是用来干嘛的?读返回读取它内部存储的什么。状态数据,你不能直接看到它内部的状态数据,他把它隐藏了。听懂了吧?这种方式是比较合理的方式,通能不能听懂,这种方式是比较好的设计模式。其实我们前面我们用memorys来去存那个user,是不是直接用一个属性存的这种方式好吗?不好,因为我们说过模块要有一个特点是不封装性。隐藏是有数据,通过一些方法是不是来暴露出来。能听到不,哎,这个地方他就这么做的啊,他就这么做的好。来下面呢,还有dispatch也是是多了一个方法,我们说这个方法用来干嘛呢?回到我们的这个图,最终的结果是要干嘛,更新状态数据,实现组件的什么更新显示吧。
20:13
啊,下一个。这个呢是用来去订阅监听的,这个用来干嘛呢,等会我们再说,因为要出了问题我再来说啊,这个后面再说这个事啊。好。这个呢,现在也很难说,因为我们还没还没这个需求叫apply什么意思。应用上什么明白没有?中间键对吧,中间键是不是用来扩展已有的东西的一个能力的啊,等会我们再说啊,还有一个combine reduce。Reduce是不是多个reducer,我们说一个reducer是个什么类型?是个函数,用来根据老的状态是不是生成什么新的状态的函数是不是,那reduce是不是多个函数?
21:02
Compare什么意思呢?整合。那也就整合合并多个reduce函数,生成一个新的reduce啊,这个呢,也等会再说。啊。OK,好,这里面呢呢还有一些概念。第一个啊,Action,这个action什么时候用到过。看到这个流程图,我们第一次拍的时候要分发什么?分发是不是X,而X是个什么?来说一下是个什么?这个对象它标识我要做什么。那对象里面呢,有两个方面的属性,第一个属性是固定的,叫什么态。Type什么意思?这是一个字符串的一个属性值。看你说这啥意思。你说这太广,这个标识标识什么呀,大家说。Increment什么意思?Increment不知道这个单词意思吗?
22:01
增加提升,我们回想一下我们刚才的这个。我是不是有可能点加号,也可能点减号,是不是无论点加号点是不是都要更新状态去的。那我的action到底是?一个增加X型还是个减小X型呢?是不是我这个说明我是一个增加的吧,那如果我要是一个减少的了。那我还有他吗?不用,这是不是个标识名称啊。一个标识名称,你说这个啥意思啊。为什么是二,二什么意思?对我增加数量是几啊?我每一次增加二还增加三,是不是要携带给告诉给我们的V?要吧,不然的话,他将来怎么知道增加多少呢?这个人能有这种感觉吗?啊,大家要知道啊,这个呢,这个是涉及到我们的,我们是不是要生成这样一个对象啊。
23:02
但是这个对象redux,它要求你必须有专门的函数来生成。如果一个函数啊,每一次执行都能返回一个新的对象,这种函数称为什么函数呢?工厂函数。这能听到不?工厂是用来干嘛的?生产产品的吧,一个产品是不是就是个对象。调用长,调用那个工厂函数,是不是就因为生产返回了一个新的对象了?啊,这个里面这个结构图里面也有相应的结构。如果我说的过程中,你不是完全理解也没关系啊,能理解多少算多少,先过一下,先大家过一下。啊,有专门的工厂函数来去创建,到时候我们写的时候再说,好这个好的点,这是大层面比较核心的一个结构吧。他什么类型。函数,函数接收什么参数?
24:02
两个脑的state和你指定的什么action,这个函数不是我亲自调啊,是毁掉听懂了,不是毁掉的方式调用的。嗯,而返回值应该是个什么?新的state,诶,这里面有一个概念叫纯函数。说过我这个概念吗?没有,那后面呢,我们要跟大家说一下什么样的函数。是纯函数是吧。哎,这个函数还有存不存的问题吗?啊,当然是有的,后面再说啊,这也是嗯,里面一个比较高级的概念,到时候再说。好,那是大概是这个样子的一个函数,它接收两个参数,是贝塔是吗?而且每一次都返回一个新的状态数据。这里面有个事情啊,我提前说一下,注意啊,注意这里面这个函数里面不要直接修改状态数据,而是要什么返回一个什么新的状态数据,其实在APP里面就有这个要求的。
25:04
你不要直接改装的数据,而是要产生一个性状的数据去S,对不对啊。这个里面要求比那个更严格,是完完全全,你应该是用新的,不能改变以前的。啊,不要去改变以前的这样的事情啊,大概过一下啊。下面这个十度。十多个对象呢,是他最最核心的一个对象,这个对象里面是不是提供了三个方法,有两个方法大家好懂,一个用来获取状态数据的。一个用来去更新状态数据的。而这一个呢,是让你绑定监听啊,绑定监听,为什么绑定,我们需要的时候再跟他说。啊先呢,我给大家大致的过了一下,当然这里面有很多的概念和语法出来了。有部分呢,大家应该是不太懂,没关系啊,等会我们做做的过程呢,再去强化,慢慢就懂了啊。
我来说两句