00:00
来,我把这个关了啊,我们现在要去打开另外一个项目,就这个把它打开看看C。欧美。看下V啊是吧,This window好来啊,我们这里面呢,就没有写在那个word课件里面,这里面有一个read me。啊,这个人币呢,大家可以用浏览器打开,会看的更舒服一点。来用浏览器打开一下,嗯,好,那我们这个课程的主要内容是做两个字,第一个呢实现一个迷你版的,第二个呢,是实现一个迷你版的react跟re。啊,在实现他们之前呢,我们啊先来去说一下,我们会有一个测试啊。
01:03
用react写了一个版本,我们来看一下啊,这个明显不对是吧,这个应该把它换成什么SC,我就输入备份一个啊来现在我把我的项目呢,运行起来看一下啊,运行起来看一下是一个非常简单的一个效果。NPM什么start?这里面就一个组件啊,写的非常简单。嗯。那我们这个效果呢,其实大家前面,嗯,看看有没有。见过啊,在这里面呢,哎,我这里面有个分割线啊,我想说明是两个啊,两个两个状态,一个是我点击的次数,这做过吗?做过是吧,很好啊,那后面呢,就是是不是有四个操作呀啊四个操作OK,好,下面这个呢是添加消息。能看到吧,我这里面也有一点没没有没有给他干掉啊,这样的话我可以我可以不断的贴啊,不断的改都行。
02:07
那就说我现在应该是不是有两个状态。一个应该叫什么取名字,这个叫什么来着。Count嘛,点击的次数对不对,那这个这个状态是怎么说呢。Message意行不行,可以吧,可以来下面,我假设它下面有两个状态需要管理啊,需要通过管理,我们现在看一下react相关的代码,前面的代代码呢,一点难度都没有受简单啊,就是渲染APP,那现在我们APP打开。我NP里面呢,有两个状态,一个是count为零,一个是message v。空数组开始没有对吧,接着看一下下面。啊,下面呢,跟我们以前的结构很类似。是吧,基本上说是一样的,可以说这个我就不再去详述了,下面有一个input啊,接收我的新的消息输入,接着呢有一个ul显示这个消息是什么列表。
03:13
那我有几个事件处理一个,我有四个按钮嘛。不去做增加。减少还有什么?如果是奇数才增加。还有个什么异步增加对不对。能看到吧,啊,接着我还要添加消息。这个很简单的。现在我要干嘛呢?我要将它改造为。啊,Re的版本啊,先改造为re版本。接着再改造成react的版本。我们要写两个库吗?这怎么弄好?我们来先来看一下。回顾一下redux里面有些什么语法,还记得不?
04:04
嗯。也就是说先大家需要去注意模块,有一个好的理解。来,我这里写一下,Redu整体是一个对象模块。为什么说他是个对象?还记得我们引入怎么引入的?Import大括号from。大括号说明我是不是在解构一个对象。对吧,而它里面有对象里面有些什么呢。有些方法。对吧,我们只是我们取出来的时候取成函数呢,哎,常用的有两个。一个叫呃,是非常核心的,对不对,还有一个是什么。Combine reduces啊,这一个呢,是我们应用上中间键的,中间键的实践我就没写了啊,所以呢,这个暂时我们就不做了,所以我们先暂时不用研究它,所以我们的函数有两个,一个是create store,一个叫什么。
05:04
Combine reduce。大家还要注意注意个什么呢?注意它里面接收的参数是什么。它如果有返回值,返回值是一个什么东西,这个很关键啊,好,下面我们这个create是多少返回的,是不是个多少对象啊。始终对象有三个重要方法,这些我们都要实现了,这要自己写的。一个叫get state,这个其实实现起来非常简单。啊,去获取它内部的状态,再一个呢,分发actionp action,再一个什么订阅监听。没问题吧,还记不记得我们说过,这一个订阅的监听什么时候会被调用?是不是一旦我的这个度产生了一个什么新的状态的时候,它就会自动调用是吧?而且我要告诉大家,我可以绑定订阅多个监听。
06:04
就我可以把这这个语句执行两遍,三遍四遍。那如果我执行了四面,那有四个监听器对不对?那一旦我的状态改变了,那为什么四个监听器的回调函数都会调用,那必然的吗?这个能不懂啊,语法就这一些。来下面我们用上啊。那首先大家肯定要是要先把re的代码是不是下载下来啊,用那个库要下载下来,这个已经下载下来了啊,大家看一下。能不能看到大已经下了,好了,那我们就用上。用redux是不是要写一些固定的代码来着?还记得几个东西吧?先接个文件夹,是不是有个四个部分,嗯,总是固定的写法,来我们来写一写啊,先写这个最简单的叫X-time,那有X-time那必然有X了,对不对啊,来写一下啊。
07:10
Action,还有reduce是不是,嗯,Reduce写一下啊,或者叫reduce也行啊,这个没关系,还有一个啊,核心对象尺度。美女们,美女啊,好。里面东西呢,我就先不写了,我们先来看一下啊,先来看一下我们这个地方啊,怎么去怎么去用他们的还记得不。是吧,怎么去使用他们呢?啊,估计大家使用的方式都差不多,忘了是吧?来那忘了之前,那我先把它们写一写吧,看一下啊,我首先写它可以。我们现在这里面写的是不是管理状态的一些函数?
08:00
我这里面是不是两个状态需要管理。那么呢,一个count,一个什么message,是我故意写成两个函数去分别管理,因为我要测一下,要使用一下那com病reduce。啊,什么意思,大家看一下啊,我们在这个里面不是要引入那个redux里面的这个整合的函数吗。还记得吧,在这里面我们是不是要分别去这一个是管理谁的,比如说我们就管你看的那的名字叫什么。是不是要看这里面写什么来着?State是不是等于一个初始值,那我就写个一的什么看可以不,这个是一个什么action?那我前面应该有一个什么。Cant初起零。
09:01
能看到不好,这里面是不是会固定的来一些什么Switch action点,这是代码,咱已经写了很多遍了啊,这什么后面是不是有case,最后有一个什么default,因为case还没想出来嘛,对吧,Default return的是谁?State固定的嘛,是吧,好,下面我们要管理谁去。下面我们是不要管理消息的列表,也就叫message。那它就叫什么意思,那它什么类型。数组啊,对不对,那这个里面接收的这个伊,那这个名字叫什么呢。Message是什么?能不能看到,那我们最终向外暴露的是什么呢?调用这个什么。Combine reduce传一个对象。
10:02
对象里面是包含这几个函数,把它写进来一个两个可以了吧,可以了,好。那写好它啊,我们可以去啊,想一想这样一个事情,什么事情把这个写一写吧,这个。这个我们来看一下我们的界面啊,对整个有哪些更新的操作,我们上面不是加质减吧。能懂吧,下面是一个叫什么。是不是添加消息来这里面就写一下,大家看到我啊,Export comes inment可以吗?是我们以前写的这个名字。是不是一共四个,一共三个是吧,这个下一个叫什么啊,这个呢。
11:00
叫爱的什么,添加一个消息嘛。能看到吧,能看到啊,这我就不再写注册,因为这个咱做了很多遍了,好,那下面我们可以去写它了。因为这一个写完了嘛,对吧,啊这个也写完了,这个其实是固定的写吧。是吧,这个是固定的写法啊,我们可以把它写一下,因为这个固定啊,看一下,也就是最终我们需要去啊,先把暴露一个东西,先引入一点东西出来啊,Index里面引入一个东西。叫十度。那也就是说,我最终要默认向外暴露谁十度的一项,十度项,谁来产生可以的十度穿什么?还记得我们这里面要传个reducer吧?Reducer怎么引入的呢?Import reduce我们叫它reduce啊,是包含多个reducer的一个reducer啊,点斜杠。
12:06
但是你要知道,一定要知道,这也是个reducer,能不懂包含多个什么reducer reducer它本身也是个reducer,它内部包含了好几个reducer,对不对?这个能不能懂啊,我传的就是什么。就是他。没问题吧,啊,这个是比较简单,其实这个也好写啊,这个也好写啊,我们啊需要去向外提供。因为我们最终你想想看,我们这里面不有三个type吗?点斜杠tap哪三个呢看下。还有什么message,我们说过有几个type,就有个action action create,对不对,而且我们现在没有衣服啊,因为我们现在不做衣服,不做衣服啊。
13:04
来,那我们就写一写export啊,叫increment。等于来返回一个对象是吧?Type值为什么呢?需要传date date是多少?每次我们增加是不是要指定增加的数量有一个number可不可以,那这个对的就谁number再来两个。这个叫。啊叫可以吧,这个呢是。没了是吧,搞好了。能不能看懂可以吧,可以好下面这个地方,那我就叫他什么I的message是吧,那诶I的message传什么传message呗,是很自然的事情,对不对,好这个地方呢,I的message。
14:07
Message这个咱都写过,我就不再写多余的注释了。就相当于我们前面写项目里面的,还是简单很多的。因为我们的重点还没在这里,这现在还是写的引子啊。好,那接着是不是要去写case了?可以写的,这个很简单,我们这里面有几个case,这个里面。啊,一共有三个,但这个函数里面是不是两个K是什么呢?哎,先要引入。把他们引入啊,你要写这些东西感觉很轻松啊,你要这个感觉很难的话,自己不好整瑞称称多少呢?是不是在原来的状态的数量上面加上一个什么X date,也就是这个数量增加的数量是不是?
15:03
能不能看懂,好下面往下啊,接着这一个是第一回,那这个就是什么减有个问题。美女是吧,好,下面呢,我再来可,嗯,再来可什么爱的message是吧?好,接着return return的是我们也要去,它本身是个数组吧。师傅往这数里面加一个。听到吧。往这个数字里面要加一个啊,那就看你加在前面还是加在后面对不对。啊,如果你想加到前面应该怎么做呢?啊X点对,这是新的吧。对不对,接着写什么啊,现在我问他写什么。很关键啊。我是不是在原有的前面加一个。
16:02
原有的啦。这样的吗?当前这个state不是本来的状态吗?本来状态就是个数组,我不能改变原来状态,对不对?说白了,我不能这么写,怎么写呢?你不能这么搞,Saved,你不能这么写。啊,这样整是不行的啊,记住。不能这么写。对吧,好。来,那我们整个就管理好,大家要注意啊,我们向外暴露的那个状态是个什么结构。啊,整体状态结构是什么?结构对象count是不是有个数值,假设是个一或者二都行啊,接着是个什么message里面是什么。它的值是个数组吧,诶这怎么回事。哦,这个这个应该它是不能这么,这里面本来有问题是吧,能看到吧,而里面是一个一个的文本吧。
17:08
登吧,因为我的添加不就添加一些名称嘛,消息啊,什么叉叉叉YY。之类的。我们整体就是这样一个结构。OK吧,OK好来整好以后,那我们这个整体的代码,这个里面代码就都写好了。那关键怎么用呢?如果你没有用上react杠,你得这么用看着啊。把他们先关了。在这个index里面啊,需要去来看这里啊,需要去引入一点东西,引入一个什么呢?引入一个store啊,我需要从哪引入呢?点斜杠。所dux下面的多,而这个S段需要传给谁呢?传给这APP,因为我的APP是不是需要跟redu进行通信,而通信的载体是谁就十度,那也就是说等于它。
18:12
对不对,还记得吧,好,那我AP这边得干嘛呀,是不是声明接收。是吧?来一个pro等于一个对象。是吧,名字叫什么。对象嘛。一指什么?快,这时候我要引入一个东西。他吗?对吧,那这还有吗。干掉。对吧,好,那我现在问大家,我得到这个数量,我得到我输入的数量以后,我干嘛呀。
19:03
我是不是要去调用这个多的方法去更新,产生新的状态。对,不怎么做来的,还记得吧?This时间pro时间do,好久没用多了是吧,这什么,这基本的语法要还是要懂的Dis。那第四派就是传什么呢,对不对,是不是要接受一个action。是吧?Action不是我直接创建的,而是要去引入一些action create import from,点点点斜杠,Redu下面的什么呢?Actions,它里面有有还有什么I message。对吧,那现在我应该去调水去。穿什么难,因为他要接受吗?给他看一下。
20:04
哎,这个地方来找到这一个啊,现在不叫它啊,记住我这么写是叫它吗?不是因为我要叫它要怎么写。This。对吧,所以我实在找他对不对,来看number number message。有没有看到好,下面后面的事情都是类似的,我要去减少用谁。对不对。能看到吧,好,我这一个啊,这个看到我要去获取当前的count值,这个很关键。怎么得了?首先通过store来得多点get state,而我的state是看了吗?我们的什么结构?不知道啊,不知道去看一下。
21:02
来看一下这个reduce,刚才我就说过这个结构啊。对吧,也就是说一旦用上看病以后,我们的状态永远是对象。对象里面包含我们具体的一些状态属性,对不对。就认了吧,永远是一个对象啊,因为我们用上这个函数了。好,那我们现在应该干嘛去,现在已经是这个对象,对象里面有个什么属性看呀是吧,如果count是基数,那我得去更新状态,怎么更新呢。不增加一个指定的值吗?来把这一段代码给他什么?拿过来是不是可以?啊,这些猪食都不要了,那么多干嘛?能不能看到。好,那下面啊这个啊,这个也是一个类似的一个事情,来这个可以不要啊,这里面但是set out是要的。
22:07
因为延迟。对吧,我这个里面干嘛去。不就是把这个拿过来吗。对不对。能看到吧,这个我要增加一个数量,只是说延迟一秒钟去增加吗?好最后一个。Message来,那我这个里面呢,有得到我输入message,你说我下面干嘛是调用啊,这一个类似的,只是我去整什么呢,爱的。传什么?对吧,好,还有一点东西,这。我来看从哪取。不能认state,那不行,this.pro store.get state这是个对象嘛,对象里面刚好有个抗的属性。
23:15
所以我现在写对的吧,这个大框很关键,对不对。好,下面呢,都不要动啊,都不要动啊,有一个地方。我们这一个还有一个这个message呢。是不是类似的,我们是需要message是吧?来这我的message是从哪来的一样?结构出来呀,我们有看的和两个属性吗?有没有问题,没有吧,好,那也就是说现在我们用啊,用redux啊库来去实现的这样一个效果。可以吧,可以好了,现在我们要去看一看啊,看一看它能不能用啊,还看有什么问题啊,这个十度大,看看20什么六行AP啊,没有定义啊,十多没定26行。
24:15
我这里面是不是直接写了十度。对吧,这个这个不行呢,这个应该写什么多。可以了吧,下面我们来去验证一下,看看行不行走。是不是有问题,有问题得看啊,大家看一下把它搞开。点一下添加这个地方就有一个事情,初始化显示没有问题,显示零嘛,我们其实啊来这地方啊,我要写些打印输出。在哪写呢?在这写,这个是我们的count就了,对不对啊,打印我们的state,打印我们的action没问题吧,好,下面把另外一个函数也打印一下,因为我们现在还没做完啊,还有一个监听,好下面我们来看一下。
25:17
好,来看一下这里面呢,有countt调用了,不知道为什么它还调用了多是啊,先不用管这个事啊,来这个和这个。对吧,但是我们现在大家看一下啊,大家看一下,我们现在去增加一下走里。掉了没有?对不了,大家看呢,我再我再写,再搞一下,你看数据是不是有哪些。有累加,但是这里面要注意一个事情啊,其实我现在是要去增加那个count,但实际上它也调用了谁messages,但是它会进入那个case吗?里面有没有可能进入messages里面的case?
26:02
不可能,也就是什么意思,它会去,它会去do count也会去do,意思不传入了一个,传入了一个action.tap嘛,也就是说会进入这个case吗。他他进入case,那我的那个message时的状态就会改变了,肯定不会进入,因为我们这些名字都什么值都不一样,只能进入某一个reduce的某一个case,对不对?也就是说我虽然说调用它,但是马上就从那个是不是default里面出来了,没有一个case匹配嘛。这里要注意啊,这后面我们也会有这种现象啊。就是他会去啊,调用所有的。各个reducer,但是只会有一个R的进度case。那现在其实我们现在数状态是不是有变化呀,大家看看有变化呀。但是呢?
27:01
大概我我我整下面这个也一样。有没有有啊,没有问题啊,是在掉,你看是在掉吧,没问题,关键没更新,这个得做一件事情。在这个index这边得做一件事是不是。叫度点。指定一个回调函数用来监视是对的改那个是对的改变对吧,一旦改变了干嘛去重新渲染?对吧,啊是关键点啊,这个是容易大家忘了啊监是啊,十多关使多少中的什么是state的变化啊,一旦变化。一旦变化,嗯,会什么自动调用什么回调函数,干嘛去重新渲染对吧,好,现在应该可以了,看看啊走可以了吧。
28:16
可是没问题啊,对不对,来能增加,这次能不能增加,不能,那这个呢异不增加。是吧,就这可以吧。一点问题都没有。说明是OK的。好,那也就是说现在我们是做的是Rex的版本,我们没有我们自己的,我们自己都没写对不对,这个要搞清楚,搞清楚以后呢,下面我们才去写我们自己的。
我来说两句