00:00
好的各位,在你对state啊这个状态理解了之后呢,我们开始真正的去用一用它,我们做这么一个案例双击。页面上显示今天天气很炎热,点击一下这个文字变成凉爽,再点击变成炎热,随着你的点击,它不断的在炎热凉爽之间进行切换。OK,好,来,开始实现这个。先别想太多啊,怎么简单怎么来,先让页面上展示一句话,今天天气很炎热,剩下的事儿以后再说。二、打开走啊,文件夹文件我都准备好了,开始编码。第一步,创建组件。同学,我一会儿要用组件实例的三大属性之1STATE,你说我用什么去创建这个组件?能是函数吗?不可能,肯定得用诶类这种形式给组件起个名字吧,我呢就用weather了,由于我们展示的确实是一些天气相关的信息,你可以随意的写啊,来点对吧,得继承它走render,必须写返回值,必须有H1标签,今天天气很炎热,组件创建完了,渲染组件到页面,哎,你先别急啊,同学,哎,这还有交互呢,老师,别急嘛,先写来走react do render渲染往test里边放,右键打开。
01:45
OK,页面上出效果了,那接下来怎么办呀?想想啊,同学,一会儿页面上有一个东西在变,就是炎热这两个字,它有几种变法呢?无非两种,一就是你现在看到的炎热,二那就是凉爽,那你觉不觉得其实我可以定义一个标识,对吗?
02:09
非黑即白这种东西是不是可以用布尔值对吗?嗯,非黑即白,非真即假啊,不是炎热就凉爽,OK,所以说我定义一个标识,这个标识呢,我起这么一个名字叫is hot,就是热不热。它的值如果为真,OK,炎热,它的值如果为假,OK,那就是凉爽。对,哎,这是我的一个设计思路,好吧,开始写,同学,那么我在render里边再给你输出一波this,右键检查控制台刷新输出的是谁组建的,实例对象哪个组建的,这组建的身上有没有那个state,有,但是没有我想要的那个hot,对吗?你得想办法把你的a hot那个值放在状态里边,然后呢,你从状态里边把a hot的值读出来进行判断,然后决定展示的是炎热还是凉爽,对吗?同学,OK,接下来怎么办?
03:11
想办法往这个state里边放点东西对吗?分析state是谁身上的呀?这个类的实例对象身上的对吗?你想对类的实例对象进行一些初始化的操作,比如说增加一个属性,或者说修改一个属性里的值,那你就得借助谁了呀?同学,是不是类里的构造器呀?OK,那接下来呢,我就开始写构造器了。朱老师,之前为什么不写呢?之前不需要啊,对吧,我也不需要对这个组件实例进行一些什么初始化的操作呀,但是这回需要了,因为人家给我写好的这个state值为no,无法满足我的需求,我要把我的is hot放进去,那当然这不就是一个初始化的动作吗?所以说构造器写不写写写上constructor走,同学,我想问你constructor能接到什么?
04:09
打开我之前带着你复习类相关知识这一块,这是构造器对吗?谁的构造器呀?Person,那我问你他能接到什么呢?取决于人家去给你new这个person的时候,当然那段代码我删了啊,来,我写一下Costa PE等于你有一个谁呢?Person同学,穿吧,你叫汤姆,你多大呀,18岁,我想问你的是,你这能收到什么,是不是取决于人家new的时候给你传的是什么呀?那现在一个有意思的事儿发生了,你这写什么老师,要不我也写这个吧?诶,你可得同学组建,还有年龄呢。删掉,这儿呢,我用一些问号写,我不知道写什么。到底接什么得取决于new whether的那个人,人家new的时候传递了什么,对吗?但是可惜了同学,New whether这个动作我想问,是你拗的吗?
05:06
嘿,不是你,你只负责写了whether组件标签,有react帮你new的,你觉得呢?OK,说老师那我写不下去了。同学开玩笑的说啊,如果react是你一位好朋友,那你可以问问他说哥们,就是当时你拗的时候,你都传什么东西进来了,对吧,那人家告诉你了,但是诶编码的时候,咱不知道人家new的时候传什么了呀,那怎么办呢?我们只能去参考官方的文档,好了,我们打开react官方文档。打开都不用点别的地方,我们往下滑动,当时用这个案例跟大家解释的说,构造器其实完全可以省略掉,对吗?因为我不做什么初始化的事儿了,我就展示一个,嗯,Hello react什么,我是一个什么组件,就那一句话,你再往下滑,这就属于简单组件。再往下有状态的组件,那也就是我刚才给大家说的什么复杂组件,同学注意观察,就看绿色框里的东西,他写没写,构造器写了,不仅写了构造器,你发没发现构造器能接到一个参数,这个参数它叫做什么呢?Pro,而且不仅接到了,它在调super的时候给没给这个props传递过去,传递过去了说老师那个pros是谁呢?
06:26
细心看课件的同学就会发现,其实pros是我们一会儿要讲的组件。三大属性二。说老师,那接下来,那你告诉我,我这怎么办?同学,人家怎么写,咱们就模仿着来,虽然这一块我们还不知道什么叫pros,但是你知要不写你进行不下去了吗?所以说接哎,就模仿着来,说老师要不不写super了,你还记得吗?同学,在复习类的时候,我特意给你总结的,如果A继承了B,且A写了构造器构造集中B掉super对吗?好了,关掉super掉不掉啊掉,其实同学你说掉不掉super这个事儿好像不是react规定的,是类本身就是这语法,对不对?来吧,写,那其实呢,我跟大家讲啊,其实这个动作呢,也不是说哎,就特别有那个必要回头呢,关于构造器里的super以及这个props,我们会单独开一个小节去给大家说,那么现在呢,我只能这么写,同学,你不这么写,你就进行不下去了。
07:28
那你看一下你是不是写了构造器,OK,接没接props接了,掉没掉,Super掉了,传没传props传了,那你看你的东西就相安无事。如果你要是不调用super,那你看吧,直接告诉你missing super,你好像忘了super,那所以说同学咱们就这么写的,那写这些其实不是我的目的,我的目的是想在这个类的实力身上。我去做一些初始化的事儿,对吗?React已经帮我们写好了,这个state值是什么呢?No,但是满足不了我的需求啊,所以说我得自己改一下啊,this.state老师,那我明白了,就直接写一个布尔值,它为真,意思就哎,天气炎热,你这么写不合适,同学,你想一下,如果我的组件里边还有别的数据。
08:24
除了说今天天气很炎热,那我再补一句,今天有大风,那同学你说这个大风可能还分为小风,中风,大风是吧?哎,那你说你直接,哎把state就用一个布尔值来表示,那我问你一会儿封的数据你怎么体现呢?哎,也就是说一个组件可能是有多个数据的,对不对,OK,那怎么办呀,所以说别直接写这个值,那么react官方要求我们注意人家的要求,要写成一个对象,其实啊,同学现在呢,咱们用的这个版本啊,我目前带着大家用的是不是REACT16.8版本啊,他直接把这state呢,诶写成了no,其实你要再往前翻几个版本,人家写的非常到位,这个state直接就给你那个值,不是闹啊,那个值直接就是一个空对象,等着你往里边加东西就得了。
09:24
说老师那这它是no,那你自己改一下不就得了吗?OK,那回到这改吧,this.state点得是一个对象对吧?对象里边呢,可能有很多的值,你比如说其中有一个我想要的就是it hot来标识天热还是不热,一上来为true,啥意思呢?啥意思呢?天气很炎热,那如果以后你还想表达一些风的信息,那可以呀,Wind,然后写上啊,叫做大风就得了呗。以后可能还有什么呢?温度对不对,路面是否湿滑等等这些,OK,好了,我们只需要这个天气热不热。
10:01
那那这儿呢,来咱给它,诶杀下去,同学,那我再问你今天天气炎不炎热,是不是得看这个东西啊,对吗?那我怎么读到它呢?说老师你这么写了之后,它奏不奏效啊,那我们看一下吧,它是谁?Whether的组建实例对象打开,同学注意观察,诶东西是不是来了,你已经成功的把表达天气炎不炎热的这个数据维护到了状态,接下来你就差一步了,从状态里把东西读出来,然后做判断就可以了,是吗?好同学,那我问你怎么读出来分析state在谁身上。在whether的实例对象身上对吗?也就是说whether组件实例身上对吗?好同学,这是render吧,它里的this是谁呀?你刚才输出的吧,Render里的this就是whether的组件实例对象,那所以说非常简单了,你在这儿别写死炎不炎热,那我们可以用一个三元表达式,哎,或者叫三目运算符是吧?都可以怎么写this.state点来读出那个热不热,做一个判断,你为真吗?为真就炎热对吧?啊,那如果你为假呢?那就是凉爽呗。
11:21
哎,不知道这块你能不能理解好,这是往组建实力身上放东西,人家之前写的闹不符合咱们的胃口,对吗?哎,咱们不要那个闹没什么用,我想要的是一个对象,里边标识着天气热不热,好了,你放进去了,那这儿呢,就是读出来,对,就这么简单好了,那我们看一下啊,同学走的炎热,热的原因是因为它为真,那你把它调成假,那你看一下,那就是很凉爽呗,OK,那这个就写完了啊,那所以说我们刚才完成了什么呢?初始化状态以及读取状态做展示,那同学我问你接下来的事情呢,就很简单了,我通过一些办法来动态的调整它为真或者为假,那你说状态里的数据是不是就变了,那数据一变,咱说状态驱动着页面显示,你这一变,人家这儿是不是就开始给你,哎动态的切换,炎热还是。
12:21
凉爽了呀,可能有些同学感觉老师我都跃跃欲试了,我自己好像都能往下写了,别急,接下来的事情可能会有所繁琐。啊,但是在这儿呢,我们这一小节先停一下,这小节我们只说了一个事情,借助构造器初始化状态以及呢读出来使用啊,那当然呢,你也可以做的更到位一点,同学你也可以这么玩,就是在最上方,你用结构赋值的方式呢,你从this.state身上提前把谁取好呢,这个A字hot,诶,然后到这儿呢,你就能省心一点了,不用写的这么长,就是热吗?诶热那就怎么怎么样,OK啊好了,这一小节呢,我们。
我来说两句