00:00
好了各位看完了redux的原理图,也说完了三个概念,咱就开始编写应用啊,咱跟大家说了这API啊,咱先不过直接上来就写应用,你发现写不下去的时候,我告诉你那些API都是怎么用的,来我们做这么一个效果,大家一起看一下啊来在这儿呢,有一个数字的选择框,1233种选择,点击这个就能加。那我选一那就加一,你选二那就加二,哎,减呢同理,你选的是三,你点减号那就减三。然后这个increment o DD这什么意思呀,Increment本身就有加的意思,那这个O呢,叫基数,所以说这个按钮的含义就是如果你是奇数,我在加。但是他所说的基数啊,注意并不是说你选择的数字是奇数,而是说什么呢?目前你的求和。
01:00
哎,所以说同学注意这一块啊,这块并不是说你点击了多少次啊,你看这好像感觉是点击了多少次,实际上这要把和给你展示出来,你比如说最开始这是零,你这选择了三,你点了加号,那么零就变成了三,然后你选择了一,点了减号,那么三就变成了二。好,那当前求和是几啊,是二,那这个时候你再点击这个按钮就是无效的,因为目前你的求和是二,二是偶数,偶数不能进行加,OK,所以说这个按钮判断的不是你选择的这个数字,而是当前求和的这个数字,好,那看这个按钮这什么意思呀。Increment a think increment说过了,是家的意思,A think呢叫异步,哎,就等一等,在家是一个异步的家啊,好,我们就把这效果呢实现一下,但是我们微调一下啊,同学,为了让各位能理解的更好,我这不说click times好像点击了多少次似的,我在这直接写汉语当前求和为哎,然后在这呢也给它改一下,叫做基数在加,在这儿也给它改一下,叫异步加,哎,异步就跟同步相对应,那概念啊,叫异步。好了,就这么一个案例,咱写一下,要是正常讲吧,同学,咱就是一上来直接就拿redux开始写,那为了能让大家理解的更好哈,啊,咱不差那十分20分的是吧,咱怎么办?先拿最纯正的react写100。
02:39
啊,先不拿Du写,先用最最基本的react把这个案例去给它实现了,啊好,这图呢最小化来,我们又要写代码了哈,那就不在这个基础里边写,也不在这个脚手架里边写,我们重新创建一个基于react的脚手架的一个应用,在这里边写,那所以说在这儿我打开命令行。
03:01
那命令大家还记得吗?Create react APP名字给它起一个,但是啊,求你了,别叫这名是吧,同学你叫这个名,那不就跟第三方库重名了吗?因为有一个库也叫做Rex,那等一会你安装redux的时候,是不是就安装不上了呀,所以说我们这么写re_test I测试一下好,当然它初始化这呢,咱就得稍微等一小会儿啊,为了让这个视频呢简短一点,所以说接下来呢,我先把视频暂停一下啊各位啊,等我这边安装完了呢,然后我再诶打开视频咱再继续啊,我先暂停一小下。好嘞,各位,那这个呢,它就安装完了是吧,哎,之前这个完整的脚手架的创建过程呢,也是给大家录过的,对吧,咱们在讲脚手架的那个时候,完整的过完整的过程是吧,我说我不听,哎,我把这个给大家演示一下,那么在这呢,咱节约时间,刚才那些哎等待的过程我就不录屏了啊好了,把它关掉,把这个拿到这里来,准备好了这个脚手架,那么右键VS扣的我们打开它。
04:08
这里的文文件呢,之前也给大家介绍过对吧,那所以说接下来呢,我们这么做,把这里边儿所有的东西,Public里的是不是都删掉不要了,Src里的全选都删掉不要了,那这个read me文档呢,全选清空,哎,全选清空。一会在这个里边呢,我给大家写笔记,你就比如说我们练习哪一块了呀,啊,都需要写什么文件呀,注意点在哪儿啊,还是就像讲路由一样,哎把这笔记给大家形成好啊,那在这儿呢,出现一些哎红红绿绿的这颜色,你比如说我新建一个a.GS哎,它就是红色的啊等会儿哎是绿色的是吧?这什么意思呢?就是说我目前这个工程呢,已经是一个合法的giate工程了啊,所以说它会出现花花绿绿这些颜色啊,那如果你需要呢,那你就保留着对吧,自己在这儿进行版本控制,那如果不需要呢,我们也是可以给它删掉的啊,那你比如说呢,最终我这个代码呢,是以压缩包的形式给大家,那所以说呢,来最小化回到这个redux test里面,我找到这个点GI右键就给它删掉了啊,这个点GI这个配置的忽略文件呢,我就也不需要了,给它删掉,哎,好了,回到我的这个里边来a.GS是我刚才演示问题随便创建的,给它删了去啊,Public里边有什么呀?
05:29
index.atl对吧?固定结构写好,我们学的是什么呀?Redux,那这可以叫redux,这没啥问题,有一个div必须给它准备好,而且ID必须为root是吧?叫别的倒是也行,但一般都叫这个,好了给它关掉。那么src里面我们得准备两个文件对吗?同学们,一个叫做index.js入口文件,还有一个叫做app.js叉,或者叫JS也行啊,那咱叫JS叉对吧?体现出来它是一个组键,好了关掉,那咱们先写app.js叉吧,先准备好一个APP,那用快捷键rcc。
06:09
走出来了,里边写什么不知道,那就APP点点点好,APP准备好了,我们写入口文件,入口文件的写法很固定,对吗?Import引入谁呀?React from走react还得引入谁呀?是不是得做渲染呀?各位react到啊,Do from哪呢?React-do然后怎么办呀?渲染谁APP react do.re APP但是APP是不是没引入啊?好了,上方给它引入走importpp from当前路径下的PP。写好组件标签往哪放呢?Did root好,固定结构写好了,这儿呢也写好了,接下来呢,启动一下脚手架,看看能不能运行,来到这儿,N PM start,走。
07:06
哎,这我视频就不暂停了,因为它速度比较快啊,也不耽误什么时间,稍等一下。大家在练习的时候也是啊,你就是必须得保证你的脚手架是好用的,然后咱咱才能接着聊,你说对吧,好APP出来了,控制台打开。来到这儿刷新啊,也没什么错误对吧,好了,关掉那东西准备好了,那接下来呢。那就写咱们那个案例呗,对吧,那就这个呗,开始写一个select框,四个按钮显示当前求和为多少,来写着最小化,这浏览器我就不关了,我给它最小化吧,一会儿咱还得看呢,是吧?哎,最小化好,来到这儿写吧,你是不是要组建化编码呀,各位得新建一个文件夹,Components,新建一个组件,是不是一个求和的组件呀,我就直接叫这名字了啊,各位叫看。
08:02
因为我要展示当前的求和嘛,哎,就叫做count好走,也不需要什么样式,所以说直接写index.xr走rcc。没识别是吧?删掉保存一下rcc,哎,慢点敲就有了,组件叫什么名字啊,叫count,这也叫count。啊,那这里边是不是得写一些固定的结构啊,啊,好了,开始吧,首先写个H1标题叫做当前求和为先,写死啊零。好,那接下来呢,是个select框对吧,这里边的name和ID我们也不需要,但是我以后肯定要取到select框用户所选择的值,你说对吧?那所以说我是不是得给他打一个ref呀?啊,我在这就不做什么受控组件了啊,什么受控表单那些我就不做了,Ref等于那写什么形式的呢?我写一个回调形式的C箭头this,点起个名字吧,Selected选择的number数字啊,或者你不写这1D也行,Select number啊,那就这个好了,那等于C。
09:14
写完了啊,那这里面是不是有选项啊,Option是有几个选项呢?三个123这儿呢,写上二。这儿呢,写上三。这是一,这是二,这是三,好了,准备好了,是不是还有四个按钮啊,走b To Button2个,三个四个啊,第一个按钮叫做加,第二个按钮叫做减,第三个按钮呢,叫做奇数在加,但是我想说的再明白一点,叫做当前求和为奇数啊,然后怎么办呀,再加啊,那最后一个按钮呢?就是E不加对不对,哎,E不加好准备完了,那这个组件是不是得用上呀?啊在哪用啊,APP里边对不对啊,咱们说了吗?APP是所有组件的外壳组件import count这个组件from当前路径下的components下的count。
10:17
好,那在这儿呢,不写这玩意儿写它,哎,等它编译一下。稍等回到浏览器里边看效果走出来是吧,当前求和,诶啊好了,那这块是不是离得有点太近了呀?啊,咱简单写一下啊,简单写一下来回到count组件,在这个后边呢,留点空格,我就不写样式了,同学,我写这个吧,NDSP啊简单写一下这儿这儿这儿这儿是不是来一个好了,回到浏览器这刷新一下看效果,诶好了,留出来这些空格了,那接下来呢,是不是给这些按钮加上点击事件呀,嗯,然后真正的实现加减基数再加呀,嗯,那这儿看也是有二和三这选项的,来吧,写着回到代码当中。
11:08
那么这个按钮这个这个这个是不是都得加上点击时间那都得写啊,On click this,点同学给第一个按钮起个名字吧,啊,既然它是加,那你最好别叫ad,咱刚才也看到那单词了,标准一点叫做increment increment代表加,那减呢?其实叫做啊。那么当前求和为奇数在加,我问大家一下,是不是也是加呀?嗯,那加那基数在加,那就if。ODDODD什么意思?就是基数啊,如果ODD小驼峰啊小驼峰命名,那么E不在家呢?它也是家吧,那我就写上increment异步在家,Async就代表异步。
12:02
好,那你只是只是指定了这四个东西,你有这个函数吗?没有,那所以说这个这个。按住那个alt键啊,就能选好多这个这个这个CTRLC是不是得定义这四个方法呀,走来到这儿粘过来缩进调一下这儿这儿这儿等于是不是直接写复值语句箭头函数,哎,我就批量的写了在这儿,那同学你告诉我怎么加呀。嗯,你想加,但是是不是得有状态,你去更改态才能引起页面的更新啊,哎,那所以说这里写什么呢?State等于。啊,起个名字吧,状态里边专门存储那求和那东西,那我就叫做小写的count了,COUNT0,当然你要注意啊,同学,这个count跟这个count它没啥关系,这个count是组件名,这个是状态里边标识求和的一个值啊,一个属性名。
13:00
好就看看,那你说来到这儿,那怎么加呀,首先第一步你得知道原来是多少,你得知道用户要加多少,然后是不是才能再执行这加呀,那所以说来吧,第一步怎么着啊,是不是获取用户输入啊啊那怎么获取呀,诶看看这还能不能想起来怎么获取了呀。这是把当前的select节点是不是存在了组件实力自身的select number属性上啊,那我是不是想读出value值,那所以说我就一步到位写了啊,你必须之前的东西得练熟了,咱才能往下听啊this.select number取得它的Y6值。这叫获取用户输入对不对?好,接下来呢,是不是读取原来的状态值啊,那cost结构赋值this.state原来状态值啥看看啊啊用户要这用户要加多少,这呢,原来是多少?那好了,现在怎么办?非常简单,this.site把原来的count值改为count值,加用户要加的值value。
14:08
对吧,好,因为毕竟这是加法嘛,好写好了这叫加法,来我们试试看看能不能加啊。回到页面当中,点击加他咋没反应呢?那回来检查你的代码吧,状态我准备好了,这也获取了,这也更新了,诶,别忘了呀,这是不是还写死着呢?所以说这千万别忘了走,这怎么写呀,this.state点看看是不是读出来了,好嘞,这回咱再试试,回到页面当中。点击加。你不能说它没加加了,但这什么呀,这是不是字符串拼接呀,那这是怎么回事呢?各位,哎,是这么回事啊,回到代码当中,你啊确实拿到了用户的输入,但是你拿到的呢,是一个字符串。
15:00
啊,你在这儿拿一个数字和一个字符串用加号去连接,就触发了字符串的拼串,你只需要做一件事就得了,这乘个一是不是就强制类型转换了呀?哎,来,咱再试一下,回到页面当中,点击加是不能加了,那同理,同学们你减,还有你基数在加,你一不在加,是不是就都能写下去了?回到代码当中来把这一堆东西。全都复制是吧。这啥意思啊,是不是减法呀,写好注释减法,我只需要改一个符号是不是就可以了?哎,那我先声明啊各位,我知道听视频的各位可能想,诶老师你这方法不行啊,你这通用性不强啊,老师你信不信我用一个方法,哎,就叫做计算这方法,然后通过传入不同的type类型,我就告诉他你到底是加还是减,是吧,还是这个基数在加还是异不在加,我知道各位咱完全可以这样做,这也不是什么难事儿,对吗?但是在这儿我先这么写着,为什么呢?我不想做太多的整合,因为一会儿redux一旦引进来了,大家压力太大,所以说同学代码不是不能整合,咱得慢慢一步一步来,对吗?哎,好了,所以说咱先不做整合,先这么写着啊,知道有优化空间对吧?好了,那这复制这一堆再来一套给谁呢?给这个,但这个方法咱得。
16:30
写好了叫做奇数在加,对吧?哎,奇数再加,那来吧,那既然是加,这就不能写减,得写加对不对,但是得是奇数在加,而且是谁是基数在加呀,是不得当前求和啊,那所以说同学前两步你都可以正常进行,但是到底更不更新状态啊,您是不是得判断一下啊,如果怎么的。Count除二取余,它不等于零,这是不是就基数,哎,完了您再加。
17:05
好嘞,那这一堆给它复制,那来到这儿再写,这叫什么呀,E不加,嗯走E不加正常拿用户选择的值,正常拿之前的状态,那只不过E不加,什么意思呢?我确实得加。但是我不能立刻马上加,那我怎么能开启一个异步任务呢?那太简单了,Site timeout是不是就可以啊,模拟一个吧,其实在这儿的同学我们是不是也可以写一个啊,加请求的发送,但是在这咱先不写,那么难走加,那这怎么写呀?等多久啊,500毫秒差不多了,不用等太久啊,一步在加好了再咱整体测试测试啊,回到页面当中。当前求出是不是为零加一加一加一加一。减一减一减一减一都好用是吧?来再加个这是什么数啊,奇数,那能不能点这按钮啊,或者说点这按钮有没有反应啊,有,因为它是奇数,你点是不是加了,但是二是不是偶数了,你再点你再点再点你看废了那一不加呢试试呗,一点哎等会儿这不三呢,那这来我调一下,我这要选择的是二的点击加号,这是个五。
18:15
五是不是奇数,是不是能继续加,那一加是不是七,那七要是减二的,那是不是五啊,那一不加,再等会儿,嗯,是不是七呀,好了,那这个案例呢,同学咱就用纯react的方式呢,写了一遍,其实写这一遍啊,同学只是想让大家诶感受一下原生react写这个东西它不难,然后逐渐的把Du引进来,其实也没你想的那么难啊,那我做一个事儿啊,这个src啊,CTRLCCTRLV,改个名哎,叫一下划线,Src下划线叫做纯react版。哎,咱一步一步的去递进,好吧,那这小节咱先停一下,这小节写啥了呀?求和案例的纯react的版本是吗?好,这小节停。
我来说两句