00:01
来我们来看一下,先看一下昨天上午我们讲的东西啊。昨天上午呢,我们主要是讲了一个库叫什么。那这个库啊,是用来去做什么呀。去专门来帮我们应用管理什么状态。它并不是RA的什么插件,这个要注意,但是一般在开发中都是在RA项目使用。好作用刚才说了就是对啊应用中的状态进行什么集中式的管理。就是状态是什么?就是用来显示界面的一些可变数据。这能听懂吧,也就我的界面的显示就是根据这个数据显示的吧,而且这个数据的值。是很有可能发生什么变化。而且你的值一旦发生变化,最终的结果我的界面也要什么是不是改变?
01:04
这能听到吧。人啊好在开发时呢,那不仅会用这个库,还会用相关的啊几个库,比如说这个咱用了是吧,它是RA的插件吧。这个是真正的是RA插件的,这个还没用,通过名字能看的出来它是什么re的插件。啊与这些插件呢,进行什么呢,配合使用。那re呢,有相关的一些啊,API的一些语法。那首先呢,因为单词本身它包含了这么常用的三个语法,当然也有其他的,我们常用的就这三个。第一个叫奎诺。这个是来引用的,创建一个什么十多对象,也就在re里面,整个里面最核心的一个就什么。是做对象。啊,其实这两个呢,还没用是吧,那我就暂时先不说了,我们到时候用的时候再跟大家说。
02:04
好,那得到多对象之后,我可以干一些什么事情呢?我们说多最核心的对象吗?那它有什么功能呢?它提供了这么三个常用的方法,第一个获取他内部管理的什么状态?那也就是说,你只能通过这个方法来读读状态吧。你能直接点吗?不能看不见。这能听懂吧,这是说读状态数据,那除了读状态数据还可以干嘛?更新,那更新靠哪个方法。Dispatch,当然dispa最终是不是调用它内部的另外一个结构函数,叫reduce是吧?好。下面一个,这个是用来去订阅监听的,监视谁。监视的是什么东西,状态数据的改变对吧?如果状态数据变了,我监视的回调函数是不是就立马执行。
03:05
他其实是通知你,我的状态变了,你看要不要跟你见面。这是这个。再一个呢啊,我们也会用到这个库,这个库昨天我们说了一下啊,其实这个库呢,表面上其实很简单,因为它就提供了两个铝板。而且第一个语法无比简单的事情,用一次机构有一个组件叫什么?R接收一个什么属性?十多写一遍,整个应用中写一遍够了,不用再写了,所以这个不是我们的难点,难点在于下面。它有一个高阶函数对不对,有个高阶函数connect。那这个connect是用来干嘛的?你翻译过来叫什么?连接大家已经写过一下,应该就有更有感触,这个这个这个单词。连接谁跟谁了,我们有两个部分,一个是react的组件啊,Component,一个是redux,那当然redux里面是不是有些状态。
04:08
那当然最核心的其他是他的度,有了度是不是就什么事情都可以做了。好了,而这些含就是去连接他们俩。能听懂吧,连接上以后,我们是不是可以去读它的状态或者编辑它的状态了。当我们的组件本身。并不直接啊,这个组件说的是UI组件,它并不直接显示的操作是做。而是通过这个connect,我们connect是个高级函数的原因是不是它返回的函数啊。其实他是不是参数也参数。我们说高阶函数,什么是高阶函数?有两种情况。一种返回值参数吧,一种接受的参数参数吧,其实它两个条件是不是都满足。
05:00
本质是不是只要满足一个条件就是高级函数?对吧,而且他这个高级函数返回的函数又是一个什么。高级函数,而且还不是普通的高级函数。是一个高阶组件的高级函数,听懂不?也就是说,你是高阶组件必然是高阶函数,那你是高阶函数就一定是高阶组件吗?不一定,那什么样的高阶函数才是高阶组件呢?它的形参参数接受的是什么组件,大家知道组件它是一个,它是一个类,是一个函数,听懂不?能听懂吧,我们不定一个组件类嘛,内翻译成ES5的代码,它是不是就是个函数啊。能懂不,而且它的返回值是不是个新的函数,也实际上本质上是一个新的组件,对吧?那新的组件不就是新的函数。那通过这一次使用,大家需要去对高阶组件、高阶函数有一个更进一步的认识。
06:07
啊,那这个时候啊,他接受的就是一个UI组件,UI组件主要是不是做显示的。对吧,他会跟直接去使用相关的东西吗?不会。他自己一般也不需要状态。直接接收,接收属性数据,那属性数据包括一般的属性或者函数属性。那靠谁呢?就靠我的这个connect,最终给它生成一个什么容器组件。这个是不是UI组件呢?那容器组件。负责给UI组件。做什么事啊?向他传递什么属性对不?而那个属性值,比如说一般属性的属性值来源是谁呀。Store里面的状态数据。能听到不?那如果传的是函数属性,大家知道函数是不是用来将来调用的。
07:06
将来调用是为了干嘛?我调用函数,你说我在UI组件调用函数是为了干嘛?最终是不是要更新我里面的状态数据?对不对,最终目的是这个吧。啊,但是他不会显示的去写这样的代码,而是你要给他传一个好的函数属性过去才行。也就在这里。哎,第一个第一个部分这个固定的是一个啊,第一个参数是个固定的这个函数返回的这个对象,而对象里面的属性就会传递给我的UI组件。对吧,难就难在第二个参数。第二个参数一定是个对象吗?不一定,可能是个函数,也可能是个什么。对象。其实我们平常用的都是对象的写法,而且这个印象里面包含的是你需要的一些action。
08:03
我们是不是有专门的action create的模块?啊。这个呢,我们等会要重点再写一写。啊,再去熟悉一下,这个是整个里面最难的一部分,其他的难度都不算特别大。啊,这是这个。好,Redu有核心的概念,有这么三个,第一个action,第二个reducer,第三个是多,当然最最核心的是是多了。对吧,是多是整个管理者。啊,其实多好并不难,好理解。它里面不管理这两个东西吗?一个是管理着什么状态,当然存着谁。函数对不对,函数好了,它提供了这么三个方法,刚才我们说过了。获取状态、数据分发、action更新状态以及什么订阅监听来监视什么东西。状态的更新啊,他是一个什么类型。
09:07
这个函数,那个函数接收几个参数?两个,那两个和什么是固定的吧。这函数是我直接掉吗?不是。啊,是它自动调的对不对,自动回调是不是啊,所以啊,我们接收什么参数不是我们定的。这个是对的,接下来是他内部现有的状态,而这个是我指定的吧。这个值实际上是我指定的,因为我在去派的时候指定了一个什么。Action in space是不是导致于reducer?这能听到不啊,这个地方根据脑的状态和指定action返回一个什么呢?新的状态值。记住不要去修改他的状态啊,到时候我们会说这个事情。
10:03
好,Action呢比较简单,它是一个默认,是个什么类型,是个对象,我们后面会讲action也可以是个函数。但先认定他是个对象啊。OK,那这个时候对象的结构很固定,首先有一个什么属性?太第二个属性这个变色了吗。不一定,这个是用来干嘛的属性。携带数据。能听懂吧,写的数据,这个是用来写的数据的吗?太。不是。它是一个标识。听懂了吧,比如说我们要增加有减少,那到底是要增加减少,是不是也得标识出来?这能听懂不?那我的对什么意思呢?比如说我要增加或者减少,关键是我增加减少多少。增加一。还增加还增加三。是不是要写带数据啊?那一定要用date吗?
11:01
不一定啊,你也可以用number当这个蓝,就你要确定你存的数据就是一个数值对不对。能听懂不啊,这个data是一个笼统的名字,是一个通用的名称。哎。这个data是个通用的名称,你可以选择这么做,也可以不选择这么做,但这个必须是type。啊,注意这个事情啊。好,而且这个对象呢,不是我们手动的自己去写大话创业,而是要通过专门的什么。Action为什么通过它,因为后面涉及到我们是不是写它的时候有一个简化的工作呀。有了action,我这里面就可以简化一些,因为他支持这种简化的语法。二。这是这个,那后面我们会讲它的值也可以是个函数啊,后面我们再说。
12:03
好,这是它的三个重要的结构,下面一个是re的流程啊,其实呢,相当于刚才我们已经把流程都说的差不多了。嗯,昨天呢,我给大家画了一个图,大家需要把这个图了能画出来。啊,比如说我给他打开一下。放到他下个位置,这就是个图。其实这个图啊,它没有我们画的比这个完整一些啊,因为它这里面没有有一个订阅监听的过程是吧。啊在整个上下,上面是下面什么组件啊和里面呢,有几个重要结构,一个是多一个是。Reducer啊叫就行,还有一个呢,是。那首先我一上来,是不是我一上来可以从说里面去读吧。他要想都得是不是有得有初始数据啊。
13:01
那措施依靠谁产生?Reducer。所以他上来是不是调用一次流程,这能听懂不啊好,那下一个我们有可能要更新状态,更新状态调哪个方法。而派action触发谁都用。而产生一个什么新的状态,而新的状态产生,他会自动的更新组件吗?不会。不会,他只会去先调用前面已经绑定好了什么监听。对不?我们需要在监听的回调函数里面是不是更新状态,更新组件,对不对,这知道不。这是我们要做的事情,他会去通知所有的监视器。好。关于呃,Re,这两个库,我们今天要去给他自己做一个实现。
14:03
就这两个过,一个是一个是react跟。我们自己写写看看,看看能不能写啊,这是这个写他的一个是锻炼大家的一个基本功,再一个就是大家应该写完之后,对它的这个语法可能更加熟悉一些啊,知道它怎么回事啊好。这是这个,那后面呢,使用相关库的一个编码,主要我们啊,有的还没有写完,所以我们就展现这个先不说了,因为我们还没写完整。
我来说两句