38_尚硅谷_redux_counter应用_react版本.avi原创

呃，下面呢，我们就要讲使用了啊，这里面有些API先不用看啊，先不用看啊，我们就以一个例子来为例，就是昨天我跟大家写的这个例子啊。这个里面，这个里。就这个例子啊，我们一直就写这个例子啊。嗯。不过呢，我们可以先用写一写。来吧，先搞一个项目出来啊，这是一个空项目。Can。Open最好先把名字改一改是吧，名字改了再说，那这个改一改啊，这个叫什么大呗，是吧，好看。就这个。嗯。好了吧，好好了以后呢，来啊，我们下面就来开始去写这个效果啊。

先用react写一下啊，再慢慢再加吧，先把这些都先看。删除我的天呐，删除怎么没看见。来。还是先把那个建出来呗，是吧，呃，入口文件。Index。还有一个，呃，主界。把它先创建出来comments先把结构创建好啊。啊，接下来我们这里面可以，因为我们整个应用呢，非常简单，就写一个一个组件就得了啊，写成一个组件啊，那就叫什么APP是吧，APP啊那个文件夹我也懒得进了GS。

嗯，好。来吧，这个里面呢，这个东西可以先把结构写出来。对吧，啊啊，现在我们暂时不用redu啊，所以说我们不需要下啊，暂时不用来这个里面写吧，很固定了，Mport react from react啊，Import啊，来个啊，好久没写过了是吧，From breakdown，好，引入我们的组件。APP。点斜杠component下面的APP，最后做件事情，渲染主线标签，点re，哎，就图来来下面APP是吧，接着did not。

这个我就不看了啊，应该什么的。好，这一部分呢，我们就写完了，下面我是不是要写它呀。来写它，我们首先我们说啊，相当于我们组件已经拆分好了，因为就一个组件没什么拆的是吧，下面我们是要实现什么静态组件。对吧，哎，说白了就在render里面写结构。来上面应该是一个搞一个P标签可以吧，啊啊也行啊，这没关系，这一个呢是。多少了这个地方说我们再去这个地方先写一个是吧，零因为我们写静态的嘛。Times。可以吧，点击多少次吗。下面下面这些啊，首先是一个什么select啊，整个我们搞的一个div里面吧，啊，整个搞的D哪一个select。

热呗，把这些都去掉啊什么。Select里面是什么op对吧？Op里面显示的是不是分别是123呢？那value不能写空串吧，Value扭写什么？那自然也是123呗。这应该能想到是吧。好，下面。下面这就是几个八啊，四个八。对吧，这是减，这是叫increment啊，叫if order，如果是奇数，下面还有一个也是increment，叫asy nc什么意思？S异步。好，那我们现在可以运行看一下我们的这个静态效果了，是吧。

来m PM start。嗯。啊，这个很难跑，稍微有点挤是吧。稍微有点挤，就在这个右侧加一个多拉福NBSP。啊，稍微分开一下不就好了吗？好了吧，好下面啊，下面静态组件写完了，是不是写动态组件，写动态组件又分为两步，第一步初始化状态显示，这里其实分为两步，先初始化状态就在显示。对吧，那初始呢，就涉及到一个问题，涉及到几个问题，还记得吧，数据类型，数据名称位置这三个问题。固定的，那么呢。

这首先我们看一下这个里面有什么数据是变化的，我觉得可逆可多少次吗？就这一个数据是变化的，对吧，下面是不是要给他一个，给他一个意义啊，取个名字，先把这些心想清楚再说，对吧，这是个什么名字好了。Number count，各位可以次数嘛，对吧？啊，Value就不太好，Value没什么意义了，Number其实和count都可以，因为count就代表次数的意思。对吧，好，初始数为零的好，那在哪个组件初始化，那很简单，肯定就这个组件嘛，没有别的组件。如何初始化固定的叫state等于一个对象，对象里面指定我刚才设计的名字，看初始值零。对吧，啊，这一步高大再一步显示初始化数据，那我这边是不是要读出来显示吧，啊，其实非常简单一个11啊先我在这里面先取一下吧，好吧，看到等于这点。

接着把这个抗给他什么？对吧。啊，为了验证我这个是对的，我需要改一改。改看看行不行。就说明对的，刚刚搞零那个是不太好的，因为本来就零。对吧，啊，不能说明问题可以吧，可以，所以但是呢，我们还是回到零，因为开始最先是零是吗。那初始化状态做好以后，下一步做什么？交互两个字啊，就交互，那这里我一共有几个交互四个，你不要同时做四个，先做好一个最简单的，那后面的就好做了，说白了我先去做加。

啊，先做家，我们说做交互从哪开始做起。啊，绑定事件监听开始做，那也就在这啊立等于这个里面的写法是固定的，你不要觉得那么费劲，这里面是固定的，对吧，我假设我写个increment。增加吧，可以吧，啊可以，那也就是说我下面是不是要给this添加一个方法，怎么样给这添加一个方法，就写在这个大括号里面呢？写在这个类里面就行，对不对，而且我们还要用线头函数。为什么要建函数this才会是主见对象？对吧，固定的写法啊，其实就是套路，你这个套路多练几遍自然就好。好，下面我们要做的事情要写好流程，尤其是大家如果自己没做，一定要说好来写好步骤啊，第一步做什么，第二步做什么，第三步做什么，这样的一个事情懂吗？

来吧。那我们要做的事情，我整体描述一下，就是去读这个选择的值。对吧，把这个值加上原来的这个count的值，得到一个新的值。得到一个新的抗对吧，最后更新状态。对不对，好，那其实就是三步。第五得到选择的增加数量，对吧，能懂吧，第二个啊，OK，得到啊原啊原本的状态，原本的啊。Count状态值count状态啊，并更新啊，并计算新的值，计算新的count，但是我还没更新吧，最后是个什么更新状态。

这个什么呢，就在三部。那我们先做第一步，第一步的话，这个地方就涉及到，其实这就个表单输入框对吧，选择框，那我们有两种做法，一种叫什么受控组件，一个叫非受控组件。非社会主义是不是写轻松一点，那我们就用非社会主义写什么非社会主义简单点啊，社会主义麻烦一点，Iff等于固定的。啊，固定的这个时候啊，我们就去啊写一个括号，写一个它这不是这里面有一个不是input，这个意思是什么？是select，最好写select。能看到吧，记住了this.select等于select select是不是当时有个value，这个value就是我选择的的value，嗯。

有不懂。那接着看到我啊，我们现在能做的事情就非常简单了，得到选择增加的数量，也就是说来我们要指定个名称叫蓝吧，好吧，增加多少？OK，等于this select.value但是它是一个字串呢？吧，他这个字符串。能不懂？好，下面得到原本的状态，计算出新的，你就说我最终要产生一个countt吧，等于this点，干嘛加上number贝。认题吧，下一步啊，固定的this set state传一个对象。

一个看。能看到吧，好，来下面。啊，稍微刷一下啊，我免得他诶。啊，这是出啥毛病了，不管了啊，好来看一下啊，先看一下有没有错，假设，假设有些时候你看的不太正常，你先要看一下有没有报错，没有啊，那就不用管它，好来我要选择一个。上吧。找你。各位可以啊，大你选的。是不增加的呀。后面呢，就很好搞了呀。其实你做完第一个以后，后面的极其简单，看着我这一个啊，我下一个我就一次性把这三个都写好啊。This的对应的是什么？

认了吧，啊，一个E一个D，好下面。啊，OK，来一个克。对吧，This时间increment啊C啊，Increment if order。名之意是吧？好，再来一个thiscment是吧？A sick啊，记住了，看到这些大小写，注意。有没有看到，嗯，下面我要定义几个号，三个啊把这三个。搞过来。啊，搞过来以后，来一个一个改，首先来改第一个。第一。对吧，我其实非常的简单，就把这个加变成解。

对吧，好，那下面呢，我们另外一个。要判断一下，看是什么概念啊，哎，是这个吧。啊，体会这个。是吧，那这一个的话呢，是这样一个事情，我们进行加，但是有一个前提。对不啊，一个前提，那前提是诶这个还这不对啊，因为他要去判断一下原有的状态吧，所以我这个做法就不这么做了，大家看着我，我是这么整，先得到以前的状态。对吧，来来这在干嘛。是判断吧，啊要判断这满足条件啊，是不是才增加呀，才更新啊满足条件才更新状态能懂不好来吧。

啊，If，它如果是个奇数。模拟二等等于一。对吧，我下面是不是更新状态去。对吧，那更新状态大家看啊，更新状态，我这个地方状态值是多少呢？Count。应该是加一吧。啊，不能加一，应该加什么number加一都不对。能不能看到。啊，OK，好。那第三个要搞定了，最后一个。I think。是吧，Think是一个什么事呢？啊，OK，看这里啊。

呃，Think就是我们这一个更新的操作是什么，是不是义务的啊，我改一下啊，我这这个。这里面啊，异步更新这样写吧，这样写会后面更好一点，更新状态，看到我这里写一个，写一个什么set timeout哪一个什么，诶建函数，先写代数再说。指定一个啊1000对吧。这个里面再去更新值。这样会更好些。写什么跟刚才一样的count，加上什么number。能没能看到啊，这里面是啊，是不是启动定时器啊，启动啊延时定时器看了吧，启动原始信息，最后去更新状态。能看到吧，啊OK，把这个也稍微的把这个啊，这个也稍微的改一改，就是改成这个样子。

把这个去掉。都统一一下啊，只是这个是什么解，这样能更加统一点，能看出吧，啊OK，好，这个也是一样啊，只是这个是什么。加。更新状态来，这个怎么写了？Can注明什么呀？Cant加什么number，这风格统一。能看到吧，嗯，好。来吧，看一下我们的有没有效果呀，是吧。来选择三走走。见。行吧，现能不能加，因为它奇数嘛，现能不能加，不能整数肯定加不了，现在能不能加，但是是等一会才加。

是吧，啊。很简单的事嘛，这就是说并不仅仅是我的那个那个语法熟练啊，其实语法熟练没，其实只能是有一个更好的一个效果，但是更重要的是思路很清晰啊，这个非常关键。就有一个有一个流程感啊，这个流程感一旦有了以后，其实做任何事情都差不多。