013_尚硅谷react教程_初始化state

好的各位，在你对state啊这个状态理解了之后呢，我们开始真正的去用一用它，我们做这么一个案例双击。页面上显示今天天气很炎热，点击一下这个文字变成凉爽，再点击变成炎热，随着你的点击，它不断的在炎热凉爽之间进行切换。OK，好，来，开始实现这个。先别想太多啊，怎么简单怎么来，先让页面上展示一句话，今天天气很炎热，剩下的事儿以后再说。二、打开走啊，文件夹文件我都准备好了，开始编码。第一步，创建组件。同学，我一会儿要用组件实例的三大属性之1STATE，你说我用什么去创建这个组件？能是函数吗？不可能，肯定得用诶类这种形式给组件起个名字吧，我呢就用weather了，由于我们展示的确实是一些天气相关的信息，你可以随意的写啊，来点对吧，得继承它走render，必须写返回值，必须有H1标签，今天天气很炎热，组件创建完了，渲染组件到页面，哎，你先别急啊，同学，哎，这还有交互呢，老师，别急嘛，先写来走react do render渲染往test里边放，右键打开。

OK，页面上出效果了，那接下来怎么办呀？想想啊，同学，一会儿页面上有一个东西在变，就是炎热这两个字，它有几种变法呢？无非两种，一就是你现在看到的炎热，二那就是凉爽，那你觉不觉得其实我可以定义一个标识，对吗？

非黑即白这种东西是不是可以用布尔值对吗？嗯，非黑即白，非真即假啊，不是炎热就凉爽，OK，所以说我定义一个标识，这个标识呢，我起这么一个名字叫is hot，就是热不热。它的值如果为真，OK，炎热，它的值如果为假，OK，那就是凉爽。对，哎，这是我的一个设计思路，好吧，开始写，同学，那么我在render里边再给你输出一波this，右键检查控制台刷新输出的是谁组建的，实例对象哪个组建的，这组建的身上有没有那个state，有，但是没有我想要的那个hot，对吗？你得想办法把你的a hot那个值放在状态里边，然后呢，你从状态里边把a hot的值读出来进行判断，然后决定展示的是炎热还是凉爽，对吗？同学，OK，接下来怎么办？

想办法往这个state里边放点东西对吗？分析state是谁身上的呀？这个类的实例对象身上的对吗？你想对类的实例对象进行一些初始化的操作，比如说增加一个属性，或者说修改一个属性里的值，那你就得借助谁了呀？同学，是不是类里的构造器呀？OK，那接下来呢，我就开始写构造器了。朱老师，之前为什么不写呢？之前不需要啊，对吧，我也不需要对这个组件实例进行一些什么初始化的操作呀，但是这回需要了，因为人家给我写好的这个state值为no，无法满足我的需求，我要把我的is hot放进去，那当然这不就是一个初始化的动作吗？所以说构造器写不写写写上constructor走，同学，我想问你constructor能接到什么？

打开我之前带着你复习类相关知识这一块，这是构造器对吗？谁的构造器呀？Person，那我问你他能接到什么呢？取决于人家去给你new这个person的时候，当然那段代码我删了啊，来，我写一下Costa PE等于你有一个谁呢？Person同学，穿吧，你叫汤姆，你多大呀，18岁，我想问你的是，你这能收到什么，是不是取决于人家new的时候给你传的是什么呀？那现在一个有意思的事儿发生了，你这写什么老师，要不我也写这个吧？诶，你可得同学组建，还有年龄呢。删掉，这儿呢，我用一些问号写，我不知道写什么。到底接什么得取决于new whether的那个人，人家new的时候传递了什么，对吗？但是可惜了同学，New whether这个动作我想问，是你拗的吗？

嘿，不是你，你只负责写了whether组件标签，有react帮你new的，你觉得呢？OK，说老师那我写不下去了。同学开玩笑的说啊，如果react是你一位好朋友，那你可以问问他说哥们，就是当时你拗的时候，你都传什么东西进来了，对吧，那人家告诉你了，但是诶编码的时候，咱不知道人家new的时候传什么了呀，那怎么办呢？我们只能去参考官方的文档，好了，我们打开react官方文档。打开都不用点别的地方，我们往下滑动，当时用这个案例跟大家解释的说，构造器其实完全可以省略掉，对吗？因为我不做什么初始化的事儿了，我就展示一个，嗯，Hello react什么，我是一个什么组件，就那一句话，你再往下滑，这就属于简单组件。再往下有状态的组件，那也就是我刚才给大家说的什么复杂组件，同学注意观察，就看绿色框里的东西，他写没写，构造器写了，不仅写了构造器，你发没发现构造器能接到一个参数，这个参数它叫做什么呢？Pro，而且不仅接到了，它在调super的时候给没给这个props传递过去，传递过去了说老师那个pros是谁呢？

细心看课件的同学就会发现，其实pros是我们一会儿要讲的组件。三大属性二。说老师，那接下来，那你告诉我，我这怎么办？同学，人家怎么写，咱们就模仿着来，虽然这一块我们还不知道什么叫pros，但是你知要不写你进行不下去了吗？所以说接哎，就模仿着来，说老师要不不写super了，你还记得吗？同学，在复习类的时候，我特意给你总结的，如果A继承了B，且A写了构造器构造集中B掉super对吗？好了，关掉super掉不掉啊掉，其实同学你说掉不掉super这个事儿好像不是react规定的，是类本身就是这语法，对不对？来吧，写，那其实呢，我跟大家讲啊，其实这个动作呢，也不是说哎，就特别有那个必要回头呢，关于构造器里的super以及这个props，我们会单独开一个小节去给大家说，那么现在呢，我只能这么写，同学，你不这么写，你就进行不下去了。

那你看一下你是不是写了构造器，OK，接没接props接了，掉没掉，Super掉了，传没传props传了，那你看你的东西就相安无事。如果你要是不调用super，那你看吧，直接告诉你missing super，你好像忘了super，那所以说同学咱们就这么写的，那写这些其实不是我的目的，我的目的是想在这个类的实力身上。我去做一些初始化的事儿，对吗？React已经帮我们写好了，这个state值是什么呢？No，但是满足不了我的需求啊，所以说我得自己改一下啊，this.state老师，那我明白了，就直接写一个布尔值，它为真，意思就哎，天气炎热，你这么写不合适，同学，你想一下，如果我的组件里边还有别的数据。

除了说今天天气很炎热，那我再补一句，今天有大风，那同学你说这个大风可能还分为小风，中风，大风是吧？哎，那你说你直接，哎把state就用一个布尔值来表示，那我问你一会儿封的数据你怎么体现呢？哎，也就是说一个组件可能是有多个数据的，对不对，OK，那怎么办呀，所以说别直接写这个值，那么react官方要求我们注意人家的要求，要写成一个对象，其实啊，同学现在呢，咱们用的这个版本啊，我目前带着大家用的是不是REACT16.8版本啊，他直接把这state呢，诶写成了no，其实你要再往前翻几个版本，人家写的非常到位，这个state直接就给你那个值，不是闹啊，那个值直接就是一个空对象，等着你往里边加东西就得了。

说老师那这它是no，那你自己改一下不就得了吗？OK，那回到这改吧，this.state点得是一个对象对吧？对象里边呢，可能有很多的值，你比如说其中有一个我想要的就是it hot来标识天热还是不热，一上来为true，啥意思呢？啥意思呢？天气很炎热，那如果以后你还想表达一些风的信息，那可以呀，Wind，然后写上啊，叫做大风就得了呗。以后可能还有什么呢？温度对不对，路面是否湿滑等等这些，OK，好了，我们只需要这个天气热不热。

那那这儿呢，来咱给它，诶杀下去，同学，那我再问你今天天气炎不炎热，是不是得看这个东西啊，对吗？那我怎么读到它呢？说老师你这么写了之后，它奏不奏效啊，那我们看一下吧，它是谁？Whether的组建实例对象打开，同学注意观察，诶东西是不是来了，你已经成功的把表达天气炎不炎热的这个数据维护到了状态，接下来你就差一步了，从状态里把东西读出来，然后做判断就可以了，是吗？好同学，那我问你怎么读出来分析state在谁身上。在whether的实例对象身上对吗？也就是说whether组件实例身上对吗？好同学，这是render吧，它里的this是谁呀？你刚才输出的吧，Render里的this就是whether的组件实例对象，那所以说非常简单了，你在这儿别写死炎不炎热，那我们可以用一个三元表达式，哎，或者叫三目运算符是吧？都可以怎么写this.state点来读出那个热不热，做一个判断，你为真吗？为真就炎热对吧？啊，那如果你为假呢？那就是凉爽呗。

哎，不知道这块你能不能理解好，这是往组建实力身上放东西，人家之前写的闹不符合咱们的胃口，对吗？哎，咱们不要那个闹没什么用，我想要的是一个对象，里边标识着天气热不热，好了，你放进去了，那这儿呢，就是读出来，对，就这么简单好了，那我们看一下啊，同学走的炎热，热的原因是因为它为真，那你把它调成假，那你看一下，那就是很凉爽呗，OK，那这个就写完了啊，那所以说我们刚才完成了什么呢？初始化状态以及读取状态做展示，那同学我问你接下来的事情呢，就很简单了，我通过一些办法来动态的调整它为真或者为假，那你说状态里的数据是不是就变了，那数据一变，咱说状态驱动着页面显示，你这一变，人家这儿是不是就开始给你，哎动态的切换，炎热还是。

凉爽了呀，可能有些同学感觉老师我都跃跃欲试了，我自己好像都能往下写了，别急，接下来的事情可能会有所繁琐。啊，但是在这儿呢，我们这一小节先停一下，这小节我们只说了一个事情，借助构造器初始化状态以及呢读出来使用啊，那当然呢，你也可以做的更到位一点，同学你也可以这么玩，就是在最上方，你用结构赋值的方式呢，你从this.state身上提前把谁取好呢，这个A字hot，诶，然后到这儿呢，你就能省心一点了，不用写的这么长，就是热吗？诶热那就怎么怎么样，OK啊好了，这一小节呢，我们。