07_尚硅谷_组件三大属性(1)_state.avi原创

好，我们继续往下看啊。我们先来看一下，我在这个render里面打印一下this，这个this应该属于。谁是不是组件实例对象吧，啊，这个我们称它为组件内对吧，那组件的实例对象呢，平常就简称为组件对象。懂不懂啊，这是组建，对啊，这是组件对象，我们来看一下这个组件对象啊，先刷一下就可以。这不打印输出来就组建对象吗？啊，它里面呢，是不是有一些属性结构，有些方法啊，这里面有三个，我们后面要研究的。Pro是什么意思？应该是多个属性的集合对象。对吧，标签是不是有属性的，那我现在写了吗？没有，那当然里面是空的了，看懂吧，啊大家可能现在不知道啊，后面我们也要说。

State怎么翻译状态现在也是个什么那？我们先来去研究它，这个东西很重要，这是最重要的一个属性。啊。好。我们来看一下。我们后面呢，需要涉及到讲到我们组件的三大属性。第一个啊，我们就是要去说啊，这是一啊。这个是二。最后一个是什么呢？三刚才看了三个属性了啊，我们来先看第一个。好，这里面呢，有一个我们要写的一个主件啊，叫like组件。就是一个什么样的效果呢？其实非常非常简单，就是它开始显示的是啊，我显我喜欢你，就是你点一下以后就会进行切换。

明白这个意思吧，嗯，明白。行啊，那这个简单的组件如何来做呢啊。我们来看一下。先别干这么多，我们先把我们能写的先写一写是吧，啊，能写的有部分是能写的。还说过我们主计划编码两步。第一步啊，定义组件内啊定义组件，第二个渲染组件标签啊，一定要说到不渲染组件，是渲染组件标签。那里吧，好，定义组件有两种方式，我们说过了是吧，一个是用工厂函数，一个是用内。啊，这一次我们要用类，等会我们再跟大家说，为什么要用类啊，来第一个类class。

你的组件要根据你的组件的意义取一个名字啊，我们刚才就叫什么like，就叫like组件啊，继承于react里面的什么啊，Component就是它内部的component，现在react是个对象，它里面是不是有个属性呢啊OK。能看到吧，啊，写一个什么固定的人的，写上来一个什么return，好里面的先不写，来把这个第二步先写了。啊，react.re写一个like标签啊，记住了啊，这个地方因为它是标签体，没有内容，所以尽量这么写。如果没有指标，先尽量这么写。能看到吧，其实你你不这么写，你就是怎么写，再写一个这个。

那跟能懂啊，没有缺乏，缺乏精简的思想，能少写一个字符是一个字符。为什么多写字不赖？啊。没问题吧，啊没问题。啊好，下面啊，我们就要去说了，我们最终啊返回的，嗯，这应该是个H标，大概是一个HRHR吧，好吧，那就是HR标签，那关键是有个问题啊，大家看到我来写个HR内容是什么，是不在变化，是不是有可能变了两种文本对不对。那我这我该怎么做嘞。是吧，OK。那也就是说啊，这两种文本是不是有可能是第一种，也有可能是什么第二种，我是不是应该有一个标识啊，这个标识应该什么类型比较好。

布尔类型，为什么是布尔类型？因为我就两个状态。能懂吗？我就要显示两种文本嘛，两种情况那不用个不标识就能搞定吗？当然你用数字能不能行，一个用一，一个二嘛，不也可以吗？对不对，但那样不好。那么理解啊，OK，我们说过啊。JS你就是在里面，你不用亲自去操一动，你只要去操作数据，数据一旦变。你的界面就应组件的界面就应该变，而这个数据指的就是什么呢？指的就是状态。有个概念叫什么呢？啊，State。啊，OK，我们来看一下啊，稍微看一下，因为现在写到这里我们写不下去了，我们得看一下新的语法是怎么回事啊。

这个state是组件对象最重要的一个属性，刚才已经看到了是吧？啊OK值，它的值是一个什么类型对象，那四个对象是不是就可以包含很多状态值啊，啊OK，那组件呢，有时候也称为什么呢？状态机，什么叫状态机呢？就是我根据我的状态来显示啊，OK。来看到这里面有几个操作，关于状态的操作，第一个操作呢，叫什么呢？初始化状态，因为开始没有吗？还记得刚才SP的值等于什么，那因为我没有付出值。所以他说让。还有一个叫什么呢？读取某一个状态值，就是读取那个state内部的某一个属性的值。再一个叫什么呢？更新状态，一旦更新了状态，你的组件界面就会自动的什么呢更新。这句我说过了，我们不要去直接操作动，我们只需要更新状态就可以。只是它更新状态用一个方法叫什么？在this.section是谁用。

组建对象。能懂吗？这个z.state z是谁啊？组件对象啊，在这个里面也是this点是对的，等于一个什么，是不是给状态赋初值。在哪个里面付。是不是？好，那这三个操作我们都要去做。首先上来我们要去啊，给状态付出值，在哪个地方付了，看chapter。好，这个里面说一下啊，看这个里面说一下，它要去接受一个属性啊，接收一个参数，这个是固定的，我给大家写一写啊，嗯，讲述。啊OK，你看你你不这么写，他还报错啊，必须这么写，是固定的写法，这个参数，这个属性后面再说啊这个这不是我们第二个数要研究的东西吗？对吧，这什么意思。

嗯，这个是相当于调用类型的构造函数，把这个pro传给他。能不懂，说白了就叫pro，交个负类型去，能懂吧，啊，OK，这个是个固定的，先写好，下面我们要做件事情，叫初始化状态，一定要知道自己在干什么。啊，初始化状态写法，它是固定的，就Z时间，什么是state，等于一个什么固定的，它是什么类型对象，它是一个对象类型对象里面再去写，你想给他添加什么样的属性，你想添加什么样的具体的状态。我们要去添加一个什么类型的状态布类型，下一步是不是要给这个数据要取个名字啊，啥名字呢。比如说叫is like，什么is like me啊，对吧？啊，More呢，是什么first，我点一下就反过来了。

大家能懂这意思吧，好。来有了这个状态，那后面我就显示就应该可以做了。那我不就根据这一个值来去显示吗。那这里面就涉及到我是不是要读到这个状态值显示啊，这有第二个操作看到不是吐槽的呢，这是什么读起状态。那读起状态是怎么读，我是读这个状态值吧，看到啊，比如说我最终啊，最终要得到一只什么like me的值叫怎么的this识点，我们那个当前组件对象里面有个什么属性，有个state啊。开始是不让啊，但现在我是不是已经给他付了一个对象了，记住了，够了吗？不够是不是点他呀。

对吧，好，我不想点。加中框。结构赋值吗？可以吧，是不是加这个大号结构副词能不懂，这种写法是非常常用的啊。一页是六七吧，啊到了后面我们就每天都在用。好。有问题啊，下面我们最终是不是要显示一个文本啊，显示一个文本来。写个大括号，这写什么？你是触吗？如可以写个商务表的是吧？可以不可以问号接着了。啊，OK，就是你喜欢我呗，对吧，否则。啊，我喜欢你啊，反正结果都一样，不一样是吧。嗯。

好。能看到吧，啊OK。那现在应该有一个效果了吧，而且现在效果应该是啊，OK，看一下。能不能看到啊，OK，那我现在的需求是我的，这实际上实现了我们这个组件的初始化显示。对吧，那下面是不是相当于要做交互啊，交互就是我一点它就变啊，就自动切换，这个切换我需要去改文本吗？不需要，你唯一要更新的是谁状态。做交互从哪做起？大家觉得？从那学习？加监听学习绑定事件监听学，我所有的交互都在样的。能懂不？你要你想想看，你在你要去做交互嘛，所说的交互就是用户对这个你的界面做一个什么操作，你就会响应变化，那你想啊，你不绑定监听，怎么能响应用户的操作呢？至于怎么响应，那是另一回事，先你要先听住。

就所有都这样。嗯。OK，那也就是说我现在要给谁绑定什么监听呢？呗是吧，绑定监听呗，是吧，那我们平常以前怎么样？On这个地方，在那个react里面绑定事间监听跟我们原生动物的很像，但是它的名字不一样。看到了吗？哪里不一样大写，因为它并不是用的原生的事件啊，它是自己封装的事件，所以他要跟原生的事件什么呢区别开来。听懂吧，啊，OK，好。而这个里面写什么，是不是写我这个处理点击的一个回调函数啊，这一个啊写法非常有意思，这个里面不能用这个词，不能用字符串了，得用大号，为什么呢。

里面要写GS代码，懂吗？这些相当于都是页面的代码。那么呢？不是纯JS代码，我们要写纯JS的代码。这怎么写啊，我写啊，我写了再说叫hand什么意思，叫处理这个点滴事件吗？可以吧？而这一个Z是谁？不是组建对象啊，组建对象。啊，OK，不是，这个HR是组件对象，也就是说我们去告诉他调用组件对象的这个方法。这里面还有一个事情，不，你不能掉，你不能加固化掉。得他去调，你只告诉他记住这个事情，你只是告诉他你去调了一个方法。

能懂吗？啊，这比较特别，跟我们以前的不太一样，好，那我是不是要给我的组建对象添加这个方法呀。那添加在哪添加了啊，OK，就在这一个组件类里面添加。Let me know。看懂吧，啊OK，好，在这里面干嘛去啊。叫更新状态，我们一共有更新状态有三个操作。这个是大，必须计算，你语法不要记。初始化状态、读取状态，还有什么更新状态？把这三个操作给他记住了，下面更新出来。它组建对象有一个固定的方法，叫set state，设置一个新的状态对象，设置一个新的状态对象。那也就是说这个里面必须传对象。因为我们的状态是对象啊。

懂不懂只是我的这个值是多少的问题。是不是等于以前的取反呢？不能等于数，也不能等于负，是取反对吧，那取反我得先什么得到以前的状态才行，这个还比较麻烦的，对吧，先要得到原有的状态板得到啊，计算出。得到状态，到状态怎么的？这个好整啊，刚才写过呀，第四题，state.is like me，再取反对吧，得了B看吗？取反就是我们想要的新的状态吧啊。并示范。好，那取反就产生一个新的状态呗，来看到我这里面就写一个。

Is like me，走。看到吧，但是啊，你千万不要写成这个样子了。能不懂千万不要写这样的啊，好，接着我这个写法就非常固定了，就这OK，这也是ES6的啊，新语法。啊，本来我应该这么写嘛，冒号。对吧，这个右边的跟左边的是不是相同名字啊，所以这个右边的可以什么省略，这看起来多舒服啊，你说老师我看起来太别扭了。习惯就好，我看起来很爽。就确实ES用的很多语法都让你，呃，用了一段时间以后就爱不释手啊，你觉得以前那写法都太low了。他因为他他的思想就是省代嘛，就省省一个字符是一个字符。OK。

大家能不能看懂，好来，但是这里有些有一个问题啊，现在的功能是没法实现的，我来我来去在这里写个打印输出啊，我打印一个什么呢？打印一下this，我们看一下我们的功能。把这一个空台了，也不要打开。开始是没报错了，没问题是不是，接着我点它吧，点。报错了，来看我的打印。也就是说我这个里面的意思是什么，不是主见对象，这后面的不都报错了吗？I find的点，那不要报错。对不对，好这个地方都要说，哎，这意思都对是吧，那就为啥就你不对了。你要知道这个方法跟这个方法有什么区别。

对吧？OK，这一个是重写组件类的方法，说白了，主心内里面本来就有这个方法。能不能懂，而这一个呢？什么新增一个方法对吧？啊，新添加方法，新添加方法有一个什么样的问题呢。新添加方法，它内部的认识默认不是什么。组建对象。是什么而什么啊你。那这样的话，我想去更新状态，我想去取状态，能做到吗？后来。那怎么样才能解决这个问题，是不是想方设法让这个认识什么指向主见对象才行？怎么样让一个方法它的认识能强制指定为某一个对象呢？呃，什么办？

怎么懂，要用band？办的，不是用来强制10%吗？啊，我这个事情在哪做了，在这里做。在这里做啊，OK，将新增的方法。嗯，新增啊方法中的this强制绑定为什么组件对象，组件对象是不是当前的this，好，那这个怎么做呢？先得到这个方法啊，得到这个方法倒是可以得得它是可以this点它。这个是得到这个方法，但是啊，你认识能得到这个方法并不代表它里面的this，执行的时候是是组件内向啊，默认是个案例find。

能不能接着啊，我要干嘛办了办了谁this。好了吗？好了，没有没有，现在就要说这个方法本身有变吗？这么写啊，我跟他说过办的方法那几个字还记得不？第一个它返回一个新的函数，对不对，新的函数指定的。对吧？原来的函数变了吗？没有，所以我要做这样一句话。说白了，我这么做以后，真正运行的还是它吗？是还是不是，也就是我点击的时候运行的还是它，不再是他了，其实本质上不是他。对不对，是我通过半的方法，是不是产生了一个新的函数。

只是那个函数的函数体。跟这个函数是什么一模一样的，就感觉你现在执行这个函数。但是吗，不是。啊。在啊。在啊在这里绑定是吗？那也可以。他说的有一个意思啊，这是可以的，因为上面这种写法是比较更常见一些，就在这绑定也是可以的。看懂吗？也就是说这个时候也是啊，这是其实是一个意思，没有什么区别，也就是说我这安利我这么写，你想想看还是它吗。保定的是它吗？也不是，他是什么？是半是不是产生新的函数。能看到吧，啊OK。但是这种写法效率低。

这种写法效率，因为每一次重新渲染都会重新办呢，产生个新的函数，每一次渲染是不是都会执行办呢？看到吗？就是这个re是调用很多次的，就是我一旦更新它就会重新调用。那是不是又去办的？看懂吧，右半的话，是不是一次半的就产生一个新的吧，再次半的是不是又产生新的，而我上面的这种写法呢。大家知道我是不是在construct里面指定的执行指示。那肯定一致嘛。因为实例对象只要一个就够了嘛，我是渲染我这个里面，我这个里面是不是就写了一个标签嘛。No，不，No。为什么都用这种写法？就是因为它的效率是吗？高明显现在是不是比较麻烦一些？其实这都不是最好的写法。啊，后面我会跟大家去讲一个东西，就大家有没有还记不记得线头函数，线统函数有个特点，没有自己的类。

啊，但是我们现在这个里面，它不支持进函数啊，现在我们不是测试的方式嘛，就这种写法。这些话不是真实的，项目开发的方式，只是测试的方式。我们真实项目开发的方式呢，那时候就可以利用上建筑函数了，先把这个搞懂啊，这个很重要。啊，主要对半段理解，这很关键啊，就为什么要赋值。对吧，我不赋值行不行不行，不赋值根本也说白了，你产生的新的函数用上了吗？有没有。这一步可能是这里面最难的一个，没别的好，来看一下我们最终的效果。走，你。可以了吗？是不是可以啊，So easy。嗯，OK。啊，你做了这么多，我们写了这么多代码，大家要记住什么，首先第一个大家知道啊，状态的三个操作。

对吧，初始化状态。还有什么读取状态，还有一个什么更新状态。再一个就是如何将新增的方法强制绑定，认为组件对象用什么办的，而且我告诉你啊，写的位置永远一样，就是初始化状态在这写。对吧，绑定也在这里写啊OK，读状态一般在re的方法里面去读，为什么在re的方法读状态。那很自然嘛，我要去装来写是吧？对不对，好在一些事件回调函数里面去干嘛去更新状态，但更新状态先要什么。是不是堵状态？其实我告诉你这些东西就是说白了你要搞清楚它的有一个，因为任何的项目，任何的框架，它的一个东西叫套路。真的就任何东西，任何的框架，它都有自己的套路，你只要把他的套路搞清楚，那你就很轻松了。

但是这个套路呢，需要一定的理解和练习啊。好行，那这个就完了。