00:00
在对state有了一些基本的了解之后,我们来写一个小案例啊,通过这个小案例来使用一下state,那写一个什么案例呢?来看一下,哎,就是写这样一个案例,今天天气很凉爽,在我点击它的时候,它会变成这个天气很炎热,哎,就是这么一个案例,再点的时候,它又变成了这个两少。好,那我们来开始写我们的代码啊,我们已经把这个文件夹,还有这个代码都,哎,基本的一些用的东西都创建好了啊。来,首先我们要写一个啊类的一个组件啊。一。啊,天气组件啊,哎,我们使用类的方式,哎,只有我们这个类啊,它才有这个实力嘛。才能使用啊,State这个属性定义一个。啊,Whether的一个组件,哎,要继承。它里面的这个。
01:00
Comp。好。来里面要有一个render方法。Render方法,哎,要返回我们页面的这个数据啊。返回一个H1啊,今天天气很凉爽,接下来啊把组件。渲染到页面,哎,使用react on。Render方法,第一个参数是我们要渲染的组件啊,V组件。哎,第二个参数是我们。要放到那个容器上面啊,放到这个T容器里面。来在浏览器中运行看一下。哎,我们这个数据啊,基本就有了啊,啊,只不过我们现在还不能点,那我们想要通过这个,呃,这个点击去改变页面呈现的一个效果的话,这时候我们就要借助这个space对吧?当这个space,比如说我们可以定一个标识,当这个呃有一个标识啊,比如说是否炎热啊,当这个变量是是的时候,我们可以让它是炎热,对吧,当它是否的时候,可以让它是这个凉爽,哎,所以我们要往这个state里面去放这个数据。
02:29
好,那接下来看一下啊,我们先在这个render里面去输出一下这个this啊。打开这个调试工具。看一下这个this啊,这个this是谁呢?就是我们这个天气组建这个实例对吧,它上面有这个state,只不过现在它没有数据,那么我们现在就是想办法往这个里面去放数据,我们来想一想这个speed,它是不是这个天气组件实力的一个属性。对吧,好,那回想一下,我们之前在复习类的知识的时候,我们要改变这个呃类的啊,这个实例的一个属性的话,我们可以通过什么样的方式去给他进行。
03:10
是这。是不是可以通过这个构造函数?啊。来,我们把那个构造函数写上。呃,也可以去在。啊,看一下我们这个类的复习的知识对吧,我们如果想要啊,对这个类的实例的这个属性做改变的话,哎,是不是可以通过这个构造函数,哎,传一些参数对吧?传一些参数之后,哎,我们让这个类的实例的这个某个属性等于我们传的这个参数是不是这样的啊,那我们先把这个构造函数给写上啊。Construction。啊。因为我们继承了啊这个类,所以这个super啊要写上,好,那接下来我们来思考一个问题,这里是我们自己定义的这个类,哎,我们这里在调用的时候,我们new对不对,New的时候我们传的这个参数,然后我们这边接触到这个参数之后,哎,可以给这个类的这个实例去设置我们传的这个参数对不对,但是哎,我们的这个组件。
04:05
是我们掉的吗?我们有没有去用它。对吧,我们没有去用它,那这个我们应该传什么,要怎么传。啊,这个组件我们想想是不是react帮我们调用的,对吧,那这里我们到底要传什么,这时候哎,我们去看一下react的这个手册啊。找一下。啊,它的这个例子啊。来刷新一下。我们往下看啊,这个是简单组件,也就是说我们之前讲类似组件的时候,哎,给大家看过这个例子,来定义这个简单的这个类的一个组件,接着我们再往下面看,哎们这里并没有用到这个构造函数,哎,我们往下面看,这里用到了构造函数对不对,然后它这个换成了什么,换成是有状态的这个组件,你看他在这里去使用了啊,这个this this去进行了这个状态的一个设置,是吧?哎,这也是印证了之前我们说的,哎,我们有状态的组件就是一个复杂的组件,否则的话就是一个简单的一个组件,是不是啊?
05:03
那接下来我们看一看它的这个构函数怎么用,它是不是传到一个purpose对不对,而且把这个purpose传到了这个so里面。哎,我们也要传这个参数啊,关于这个purpose是我们接下来,哎,在学完这个state之后要学的这个组件的另外一个比较重要的一个属性啊,这里我们大家先知道,哎,这个构造函数里面我们要传这个purpose。把super里面也传一下,哎,我们就按照这个。官网的这个例子来写就可以了啊,那接下来呢,我们是不是就可以对他这个state进行一个设置。我们知道啊,这个this this是谁?This是不是就是这个组件的这个实例对象,而我们的这个purpose就是说state,它是挂在的哪上面呢?它是不是也是放到这个,哎,组件实例的这个对象的属性上面是不是,所以我们用这个this就可以进行设置啊,这个this就表示这个Y组件的实例对象啊。类的好,那我们怎么设置呢?我们来看一下啊,这里你看它都是一个一个的对象,哎,那这里是一个no。
06:09
那我们怎么设置,你总不可能说啊,这里你设置一个处,然后下面你这边判断,哎,如果是处的话就是凉爽,如果是false就是这个颜色。啊,这样可以吗?嗯,那如果我们还有其他的数据呢,比如说这个啊,有这个有这个大风啊,那这个大风这个数据你往哪放。所以说我们这里直接把它给设置成出和可能不合不不合适的,这样我们很多其他数据没法用了,那如果要支持多个数据的话,哎,这里是是不是要设置成对象这种间值的方式。对吧,好,那我们来看一下这个浏览器啊,这里给闹,而他们呢,都是给的这个对象,其实在呃的几个版本以前啊,这里state它的默认值如果没有的话,它给的也是一个空对象,哎,只不过到现在这个16.8以后,它就给成了这个这个now啊,但大家记住就可以了啊,这里它是可以设置成这个对象的啊。
07:00
好,呃,那我们来定义一个变量,定义一个标识。啊,来标记这个天气是凉爽还是炎热,好吧,那们定义成标识,定义个鼻子hot啊好来我们把它写成处,也就是说如果它是出的时候就是热的,如果是false就是凉爽的,好吧,那这里我们给这个实例去设置了这个属性之后,我们再来去刷新一下啊这个this,看看我们的组件实例对象,它这个属性有没有给设置上来,现在重新刷新一下。再点开可以看到这个这个属性是不是已经有值了,好。那这里已经设置上了,已经有值了,那我们怎么使用呢?哎,这里其实我们已经打印出来的这个ZZ是谁,是不是这个天气的这个啊组件这个实例的一个对象,我们是不是可以直接从this里面去取出来这个里面的这个属性。是这样的吧,啊,那我们哎直接用就可以了,在这里,哎,因为这是GS差的这个语法,所以这里我们要使用这个GS表达式的话,要加上这个画括号,对不对,好,This state。
08:02
点什么点它的这个is hot是吧,Is hot我们来写一个三元运算符,哎,如果这个is hot你看如果是真的话,真的话就是炎热,是不是咱们这输出个炎热好,那如果是假的话,就否则的话,哎,就是一耗的是force的话,那就是这个凉手。哎,这样。我们就,呃在这个构造函数里面去设置了这个state,呃,在这个runner里面,哎,使用这个this state去获取了这个我们定义的is hot的一个值是吧?哎,用通过这个对象的方式去设置啊,如果我们有多个的其他的一个属性可以继续去写,比如说这个呃,大风啊,还有其他的一些属性,哎都可以去写好,接下来我们先看一看这个效果我们有没有取到。来刷新一下。是不是很炎热,哎,因为我们的这个states,它is hot是true,所以是炎热,好,那接下来再来看一下,我们把它改成这个force看一下啊。
09:03
是不是很凉爽,哎,这里它是这个force,那通过我们的这个组件的这个工具啊,我们的开发者工具也可以看到我们天气这个组件,它的这个is hot。是不是他有这个,现在有这个了啊好。这个就是。哎,我们去。如何去设置这个state,哎,如何去使用这个state,诶当然大家如果感觉这样写比较长的话,还可以做什么,我们提前把这个变量给给定义出来啊一套的,然后这个使用这个结构从啊这个里面我们结构出来。哎,这个is hot这个字段啊,Is hot,哎,等于。累点。啊。好,这样的话我们就可以直接去使用这个变量了,就不用写这么长了,来接下来看一下效果。是不是一样的啊,比较爽,来,我们再改一改,把它改成处。
10:04
是不是炎热和我们之前那个写法是一样的是吧,只不过是,哎我们通过这种方式从这个对象里面结构出来这个属性啊,哎接下来的事情可能哎大家就猜到要怎么写了,哎无非是啊,那你现在都有这个状态去控制我们这个炎热和凉爽了,那我是不是要给他一个事件,哎点击就变,哎点击就修改它的状态,点击修改的状态啊,因为我们的状态修改会驱动的这个页面的一个修改,哎是不是只要通过这个事件去修改这个state就可以去改变它了。哎,是这样的,但是它的这个情况比我们这个之前原生的GS会有点复杂,这个我们在接下来的课程里面一一去嗯了解,哎这个例子呢,就是先写到这里啊,我们通过这个一个简单的例子先了解哎怎么去设置这个state,以及哎怎么去使用这个state状态里面的一些数据。
我来说两句