00:00
这节课我们来写一下案例,用来学习relax,那写什么案例呢?就是上节课我们说过的,哎,这个案例,那这个是用呃htime和这个GS写的,那我们这节课呢,先写一版纯relax版本的啊,后续再去慢慢的去写这个relax版本。首先。看一下要写的这个案例啊,再给大家演示一下啊,就是这么一个案例啊,然后我改了两个东西。这边还是一样的啊,开始是一个零,一个计算结果是零,这边我们选择要操作的一个数字,哎,比如说哎加二,它就是二,然后那减二就变成零对吧?啊加二,那这个呢,是当这个计算结果它是这个奇数的时候,再执行加,那现在是偶数肯定不会加,对吧?那如果啊,我先把它给加一,现在变成了奇数,再去执行这个,执行这个加的话就可以加了,是吧?那这个是异步执行加,比如说异步的话呢,它就是不是立马出结果,它会有那么一个呃,延时等待的一个结果,我点了之后可以看到啊,大概过了呃500毫秒才会进行这个加啊,因为代码写的确实是500毫秒啊在这里啊,哎,接下来我们先创建一个。
01:07
这一章节的一个目录啊,这个是我们的13章节。我们的状态管理。啊,接下来新建一个啊零一的一个项目,用来写这个例子啊,那有两种方式,第一个方式是我们直接进到这个目录里面,就是13这个目录里面。我现在点开这个终端,因为新点开的话呢,它还是在我们上一次,哎之前写的例子这个目录,所以我们要啊往外翻两层啊出两层出到这个目录下,再去进入到13这个目录,CD带点杠,这是第一层,第一层呢会回到这个,哎12我们这个里面,接着再来CD调查框,再往上走一层,那到了这个react,到了这个react之后呢,我们就可以去啊CD到13这个里面,CD13来进到这里面,进到这里面之后啊,我们要创意建一个react项目,那有两种方式,第一种方式是哎,我们使用这个create啊react APP,然后创建我们的零一,然后一个项目的名字对吧,那这种方式呢,时间啊比较久,而且它还会多很多文件,还要去删除,之前在说脚手架的时候,就给大家说,我这边准备了一个呃,比较呃纯净的一个一个模板嘛,就是把一些没有必要的文件都给删了的这么一个例子啊,那我就直接复制。
02:37
这个。复制这个,放到这个13里面,把名字改一改,改成零一。然后啊啊,因为我们这个是纯react的版本,先去实现这个,诶这个例子,所以就叫react啊。接下来复制完之后,我要进入到零一这个目录啊,现在还在13这个目录呢,进入到零一这个目录,进入这个目录之后啊,因为现在是没有这个相关依赖的,我要根据啊这个文件去安装相关的一个依赖啊,执行这个样影install或者npm install啊,我执行样样就可以了。
03:12
如果你用NPM,就是n PM in道,等它安装好这个呃依赖之后,我们就可以去运行这个项目啊。很快就安装完成啊,然后这个安装这个速度呢,取决于你的这个硬盘,如果你的硬盘读写比较快的话,这个速度还是比较快,因为它要向硬盘里面去啊,写入很多的一个文件,找到这里啊零一这里。好,这个已经有了,那直接来运行一下,看一下效果样start。比较呃,纯洁的一个项目啊,就是简单的说出了一句话。看一看代码。简单的去,哎,说出了这么一句话,好。
04:02
是这里啊,接下来。我们把我们之前用htimer写的一个例子开始往react上面去移植啊。首先我们写这个肯定是要用到这个组件的形式,对吧,先建一个在src下面建一个组件的一个目录com comments啊,接着啊,我们这个案例它是什么案例呢?是呃,有点类似于一个求和的一个案例啊,一直在加,哎,各种各种情况下的一个加,对不对,那我们再先建一个count组件。Cot在这里面来新建一个GSX的一个文件Co index.gh叉之后rcc,哎,生成我们的这个组件,把这个改了啊Co。好,接下来就是啊,这块的一个一个内容,那这块其实写什么内容呢?就是我们啊整个body这里面的这些内容,那我就直接复制过来吧,我们就不用再去来手打了,来放到这个里面啊,因为最外层要有一个包裹嘛,我们用这个div来进行包裹。
05:18
这里写完之后啊。要把它给。加载到这里才能去使用对吧?好,这里我把这个组件给引入import count啊,这后面自动帮我补全了,那接下来直接就是使用这个组件cot啊,单标线就可以来先保存看一下页面能不能出来效果。好,是不是已经效果了,但是这个贴着就比较近,我们来调一下间距啊。简单练习啊,直接用空格啊NP。来两个吧,好,两个空格,每个按钮后面都给一个啊,最后一个不用给了,然后呃,这些就不用去就不要了啊,因为之前用GS的话,我们要取它的这个类型,对吧,那换成react,其实为每个按钮绑定啊,不同的点击事件就可以了,对吧?好,接着再来看看效果,好间距已经有了,那接下来呢,现在只是静态的一个页面,对吧,我们把这些事件要给加上。
06:22
给这些按钮啊,绑定这个啊,点击事件on click click,那我直接this这样,诶这个是加的话呢,我们啊就不用这个ad了,用个这个ment来减的话,On click this点二啊dment。然后是啊,奇数时执行加一个时间,那名字是首先它也是一个加的操作啊,In encouragement,但是它是什么时候加呢?是奇数的时候加,哎,所以我们加个e e fo e OD是奇数啊,接着给最后一个加啊事减类似加,那异步执行,异步执行加也是inrement对吧。
07:11
诶,但是我们要1AYC啊think好,那这几个,呃,事件的回调我们写完之后呢,但是你会发现啊,没有没有这几个函数,对吧,我们在这里把这几个函数写一下。Increment啊,等于我们使用检测函数。这个是啊,打出这是什么啊加。接下来诶复制几个,把这个都给写上,减是吧,减少的减。是。这个是技术架,一步架来,把这个方法名都写对。
08:13
接下来我们要做件什么事情,诶,在点击这个按钮触发这个事件的时候,我们要能拿到这个LA的一个结果,对吧,而且还要对这个结果进行嗯计算,那所以这个我们就不能直接去写零了,要定一个状态对不对?Speed等于count,哎,默认是零啊,这个状态定义好之后,这里还得给它用上才可以的。Count,接下来就是最关键的一步,诶,点击这个事件,我要获取这个选择框的这个值对吧,那之前我们学学过这个RF啊,这里呢,我就呃直接。哎,使用这种方式快速绑定啊,C选项Z4.number。
09:10
呃,应该是叫select element,因为我们这边绑定的这个C呢,它其实就是我们当前的这个slack的这个这个这个元素啊,所以我们把这个名字给给写完整嘛,啊好,然后我们把这个属性呢,也就说这个,呃,Slack的这个对象是挂载到这个实例的这个啊s select s selectck这个属性上面对吧,所以说我们要想要拿到它的这个结果,要获取的是这个,就说这个s selectck的它的这个Y6,就是它的这个点Y6,诶所以当我们点击这个加的时候呢,我们可以let从哪获取这个Y流囊,从这个list呀s element去获取啊注意啊这里,呃,这个if之前呢,给大家讲过,我们这边绑定的它的这个回调这个C这个参数是这个select的,哎,这个节点对象对吧,那这个节点对象呢,你要想拿的它选择的这个值。
10:10
得它的这个点Y6才可以,是不是点L才可以对吧?那我们使用这种解构的方式就啊不在后面写这点Y6这么回事啊,接下来拿到这个出入,就是说选择框的这个值之后,你要对这个状态进行进行增加,对吧?你要对它进行增加,首先你还是得先拿到这个当前的这个count里,我们也使用这种结构的方式,Co unt,那从谁去解构呢?从this这state里面啊结构出来这个这是原来的这个count啊,我把注释给大家写清楚啊,防止大家搞混,那这个是。State啊,状态中的这个count,然后我们要执行加操作对不对,加的话你要改变那个状态,那就是this,哎,也就是我们的执行加,那怎么执行,其实就是改状态而已啊,This加set state改谁让它里面的这个count啊,用它原来的这个count加上我们select选中的这个值就可以了,是吧?好,我们先看一看效果啊,等一下再完成其他的来,现在是是零,然后我来选择这个一,我现在执行加A。
11:27
发现没有啊,你不能说,哎,这个函数啊,我们的事件没有效,它确实加了,只不过为什么这样呢?啊这给大家说一下,因为我们从这个select克里面,我们选择的这个值,也就是说这个value啊,这个value它是什么?它是字符串类型,而我们的这个count呢,它是啊这个数字类型,这时候你去加的话呢,它就相当于是在连接字符串了,所以一直在我们连接,那我们要想办法把这个value给转成一个啊数字类型,你才能和它去进行数字的一个相加啊数学的一个计算啊怎么转换呢?有有这么几种方式啊,一个是使用这个啊pass in的对吧,或者说直接给它,诶乘以一,我们使用这种弱类型转换也可以啊,它是字符串,乘以一之后变成了一个数字类型之后就可以进行加,看看效果好,这时候我们再选择一加加加是不都好使了,选择三加加都好使,好我们把其他的也可以完善一下啊。
12:18
来找到来直接复制一下啊,那这个呃减的话呢,其实就是把它给改下就可以了,对不对,来接着是呃基础项,基础项呢,还是这样的一个一个代码,只不过它在执行这个加的时候呢,它不是说直接去加了,那除非你是就是说我们这个值你得符合是奇数才可以对吧,那奇数也就是说我们要写一个判断if啊,这个Y6取于这个二,如果你不等等于这个。不等等于这个零啊,我们就直行相加,因为只有基数它才会,呃取于二取不进嘛,是吧,好这个时候就可以了啊来这个异不加呢,嗯,其实。
13:01
嗯,也还是就这么回事啊,这么这么些代码,你肯定是在获取到选选择的这个值,然后获取到呃,State的状态中保存值时,最后执行这个加对不对?来把这个改成加,但是E步对吧?E步的话呢,我们写个呃计时器其实就是一步了啊,写个定时器啊set timeout和我们原先的例子一样,那这里我们也是给500毫秒就可以了啊,这500毫秒之后它才执行这个加对吧,这样是一个异步的一个操作,好,这些都写完了之后,整体来运行看一下效果。来刷新一下啊,首先一开始是零啊来我先让它啊加二加二加二可以好好使的是吧,那六让它减一五是毫升的对不对,好接下来。就说奇数的时候直行加,现在五是奇数对吧,那我加一,诶可以加啊,这个变成减了,应该是代码有问题啊,改一改没事,找到这个奇础价,那这里写错了啊,哎,所以说我们写错代码,有时候一测试就知道哪里有问题,来还重新测试吧,那我现在是一个三啊三加上这个三啊零加上三是三,那接着三是奇数,我奇数加,加三六好使对吧,那六是偶数,我加。
14:17
判断有问题啊。这里啊,我们不能拿我们选择的这个值去判断,我们要拿这个状态中的这个值去判断,对吧?啊,这个变量写错了啊,来回过头来再来测试一下啊,来还是刷新现在选择这个。啊三现在是零零加三三,好,然后啊,这个都是好使的啊,我再加接着啊,如果它是奇数的时候,我们进行增加,好现在是偶数再点的话,应该就有效了啊,我们那个判断变量有问题,接着一步加,诶等等这500毫秒可以看到,那这个案例我们使用react版本就写完了啊当然有人可能觉得啊,你这些都是一样的,这个代码你完全可以精简一下一个函数就可以了,我通过传入不同的类型去判断就可以了啊,有点类似于我们写的原生的这个,那我通过就是传入的啊匹配的类型一个方法就可以搞定了啊,那这里呢,我们就先不精简了,因为这么写着让大家看起来就啊比较就是说好理解一些啊,而且后面我们再把这个redu引入的时候,大家不容易搞混,不容易乱。
15:21
好,那这个例子我们就先写到这里。
我来说两句