00:00
好了,来各位,接下来呢,我们说两个简写方式啊,要把这些代码呢,精简精简,咱得这么说啊,你这些代码写的呢,挺符合要求的。也没有违背什么原则,功能也实现了,但是就是有点稍微繁琐了一些,如果你在公司真实干开发,你是不可能写这种东西的,可能构造器啊,你都看不见。哎,那我们得有必要跟大家说说,怎么去精简这些代码呢?我不想在这个里边呢,做出任何破坏性的更改啊,各种操作,各种修改,各种精简,回头发现把这个形式都改没了,一个标准的形式你都已经忘了怎么写了,所以说这些代码呢,我给你留着OK啊,我复制一份。我不在那个文件上直接进行修改,起个名字一下划线,State,这是一个标准的使用方式,接下来改名,这叫2STATE的简写方式的简写方式。好,开始,那我引导大家一波啊,这是构造器,这是render,这是你定义的change weather,这两个人呢,This指向肯定是没问题的。
01:11
因为对于构造器来说,本身里边的this就是该类的实例对象。那这个render里边的this为什么也是whether的实例对象呢?那是因为你写了组件标签,React里边一定做了这么一个事儿,他拗了一个whether,然后呢,握住了这个实例,你就比如说啊,人家呢,定义了一个实例叫做W1,然后呢,等于扭出来这个whether,当然这里写个小括号,人家就握住了这个W1,然后通过W1.render进行调用的,所以说render里的this呀,也没问题,哎呦喂,但是你的这是不是意思指向就出问题了呀,为什么呀,因为你的change whetherr根本就不是W一点调用的。你的这个change whetherr是作为一个事件的回调再使用,你觉得呢,等你触发了这个事件之后,人家直接把这个函数拉出来直接调用对吗?而且由于类里面的方法本身还开了严格模式,就导致你的this丢了。哎,那同学我问你另外一个问题啊,就是如果我在这里边写了一个DEMO1,你说这DEMO1一般是怎么用的呢?或者说你再写一个叫做二,你觉得DEMO1和DEMO2都是怎么用的呢?
02:29
绝对不可能是组件实例对象,点DEMO1DEMO2去调用。同学,React能做那种事吗?给你拗出来一个whether的实例之后发现,哎呀,这哥们还写DEMO1了呢,来,我帮你W一点DEMO1 W一点DEMO2那是不可能的,那你觉没觉得你在类里边写的这些自定义方法,基本上都是给事件作为回调去使用啊?Change whether是点击标题的时候更改天气,DEMO1很有可能是失去焦点的时候调用,DEMO2很有可能呢,是鼠标划过的时候调用,你觉不觉得这些东西都是负责整个组件跟人进行交互的呀?所以说基本上90%以上全都是作为事件的回调在使用。
03:19
那如果说作为事件的回调在使用,那你觉不觉得DEMO1DEMO2THIS都得是and find,你想解决这个问题,那你就必须得在这儿走。戴某一。DEMO1再来一行,这得叫做DEMO2啊,那这也得叫做DEMO2,那如果你的自定义方法特别多的时候,你觉不觉得你的构造器里面要写大量这种代码啊,所以说不太好,我们要找一种精简的方式,还有就是关于初始化状态也有一种精简的写法。说老师这我感觉挺简单的了,不用再精简了呀,哎,那我引导你一波啊,同学,我问你个事儿,当时我为啥要写构造器,我好像那个时候是这么引导大家的,我说同学你看哈,他原来给你准备好的那个state呀,值为no,不符合我的要求,我想让它是一个对象啊,对吧?然后对象里边呢,是一组一组的KY6,其中有一个K呢,是标识着天气热不热的。
04:22
由于我要对wiser的实例对象,就这个家伙的实例对象进行一些初始化的操作,所以说我才写的构造器,所以说我才借助构造器里的this对state进行初始化,对吗?有没有一种感觉,其实你真正想做的事儿是初始化状态,但是你没地儿写了,你只能借助构造器在最开始的时候,哎,行,我给你做点初始化的事儿吧,对吗?哎,所以说同学你觉不觉得你的构造器其实写的很被动,你不想写啊,对吗?来吧,接下来说说这种简写的方式啊,我做一个事情啊,我把这个文件里边所有无关的输出还有注释我都删掉,但你也别紧张,完整版的注释都在这儿呢,对吗?来开始删,先把注释都删掉,删删,诶这啊注释啊,先把注释删掉,走走走,这打开啊,这三行不要了,这个不要了,这个不要了,这个不要了,那这DEMO1和DEMO2呢,那我是为了给你演示问题嘛,这也不要了,走,再把无关的输出删掉,这行这行这行。
05:32
保存,还有这个也删掉,同学,那你觉没觉得其实我们的代码也没那么的复杂对吗?嗯,就在这儿了,老师,那开始精简吧,精简之前呢,我带着你回顾类里的一个小技巧,打开复习,找到类之前我定义了一个personal类,我又定义了一个student类,接下来呢,同学我这么的啊,我重新定义一个类,跟它俩都不产生任何的关系啊,Class关键字啊,那想想定义一个什么类呢?呃,你比如说咱们写这么一个吧,比如说c car汽车,一个汽车的类就定义好了,创建一个汽车的实力C1,那你就得拗一个car啊,说老师不写构造器啊,先不写。
06:14
我也不需要车有什么属性啊lo输出这个C一来咱瞧瞧右键打开。控制台上键刷新输出了car的实力对象,那么我想让这个汽车呀有名字,那你说我得怎么写呢?传一个吧,嗯,汽车名字,汽车一般说品牌什么的是吧?啊,那我这就这么写吧,比如说写成一个啊,我的dream car是吧,奔驰C63啊,如果有懂车的同学啊,可能这个知道,哎,这表情还出来了哈,来写一下C63是吧,这车那时候大家怎么形容他了,叫做穿着西装的暴徒是吧?啊,来回来回来回来啊,别扯太远啊,汽车的名字我传进去了,汽车是不是还有价格呀,比如说199。那这车要这么便宜是吧?来十个是吧?好了,同学传东西了是吧?那构造器写不写呀?哎,你得写上啊,走,接名不接,接价格不接,那你这怎么写呀?this.name等于name,那再走this.price等于price OK,说老师,那这会我看看吧,那你瞧吧是吧?名啊,还有价格,哎,这都有了。
07:22
那接下来呢,你听我说同学,汽车是不是都有轮子呀,假设说啊,我这个类创造出来的汽车,我都想让它是四个轮子的。那也就意味着。每一个car的实例对象上面都有一个属性,标识着轮子的个数。啊,那轮子那个单词来咱有道搜一下是吧?嗯,其实啊,跟大家讲,在公司干开发呀,最忌讳的是你用拼音去伦伦子子,哎哟喂,真是low到爆了哈,来写一个轮子啊,那叫什么呢?怎么读啊,叫做will啊will啊好了,来,那把它粘过来关掉。
08:01
再来一个啊,叫做view轮子的个数,你比如说都是四个轮子的,写个四。我不需要传嘛,这写死的嘛,都是四嘛,哎,那这时候你看一下是不是那四,我要是再创建一个车,你比如说呢,叫做C2,那这写一个什么呢?呃,随便再来一个吧,你比如说宝马啊,随便来一个,那价格呢,比如说要299,那你看一下。嗯,得输出是吧,嗯,走,那这是C2,你瞧一下吧,是不是也是四个轮子呀,同学,如果你想给每一个实力身上都追加一个轮子属性,而且这值呢,想让它是一个固定的,我也不需要外部传进来,哎,那我跟你讲啊,同学,其实你根本没有必要往构造器里边写。老师,那我怎么写呢?瞧着啊,同学类里边我直接写这种代码,A等于一。老师,你犯错误了没有?A,你怎么赋值呢?直接就能写写好,注释类中可以直接写赋值语句。
09:04
同学说老师不对,我总觉得你得前边let一个A,你let就错了,为啥呢?真拿类里边的东西当函数题了呀,哎,同学,函数题里边你可以随意的定义变量,Alert consolo都行,类里边不能随便写代码的,类里边可以写构造器,对不对?类里边还可以写什么呢?写方法,那还有一个就是类里边其实可以直接写赋值语句,说老师那这是什么含义呢?这给我绕晕了呀,这没有A,你就直接赋个值是一,我们观察吧,我写了A等于一,看看实力身上有什么变化呢来。有什么变化呢?一句话,同学,如果你在类中写了赋值语句,类似于A等于一这种形式,那么就是往实例自身上追加一个属性,名为A,值为一。好,写好,注释如下,代码的含义是给car的实例对象添加一个属性啊,逗号名为A,值为一。
10:17
对吗?OK啊,也就是说你未必非得要在这个构造器里边去做一些初始化的事儿,但是啊,咱得聊好,如果你初始化的那些属性的值是从外部传过来的,那你构造气质必须得写,你得接呀,对吧?那如果是一个死的值,你就可以这么写,那你觉不觉得轮子的数量70,我可以这么玩?来是不是都有。这块如果你懂了,那接下来呢,你也就明白了呀,看简写方式,同学,我是不是想把所有whether实例对象身上都追加一个state属性?然后它的值都是一个对象里边标识着天气热不热呀,微风啊啊还是没有风啊,对吧,那所以说呢,这行代码可以不写在构造器里边,直接拎出来写在这儿是不是赋值语句是。
11:08
啊,那就是往whether的实例对象身上添加一个属性,名为state,值为一个对象,是这意思吧,好,保存,回头瞧,东西依然可用来走走走控制台呢,也是没有错误的。好了,关掉,那咱们再继续说,老师,那也就是这行代码可以不写在构造器里了。行,那这行呢。那这行呢,这行也可以搞定。来瞧着啊,同学,我不写这个了。说老师那你怎么办嘛。说老师是不是不写好像也行啊,不行同学啊,你就写到这儿,那你自己去点嘛,还是曾经的那个错误来一点,你看啥不能够读取state在and find身上,This指向又丢了,又出问题了,又是and find了,那怎么办呀?同学注意观察我的写法哟。
12:02
这是不是属于在类里边直接定义一个方法,我问你一句话,Change whether放在哪了?是不是放在了他的原型对象上?OK,哎,你说我要这么写呢。同学,这么写什么意思呢?我问你啊,是不是赋值语句?这是不是就相当于那个A。这是不就相当于那个一呀,我要这么一写不要紧呢,同学,你这个change weather就放在哪儿了呀?是不是放在实力自身上了?那也就是说whether的原型上已经没有谁了,Change whether说老师真的没了吗?那我们试试呗,走whether点,输出它的原型对象走着。怎么样,没了吧,是不是放在自身了呀?啊,OK,舒老师是在自身吗?你在render里边输出一下this,你自己去敲。
13:01
打开是不是在自己身上呢?哎,好了说老师那这就行了吗。来这行删掉咱试试啊,试试看着啊,我开始点了走,完蛋。也就是说,你如果把这写成副词语句,那你仅仅是把change whether换了一个地方而已,原来在它的原型对象上,现在呢?放在了wiser所缔造的实例对象自身,对吗?但你这样做好像没有解决问题吗?但是你别急,接下来我再写,问题就解决了,我不写普通函数,我写箭头函数,这个问题一下子就解决,来,我们一起去试一试。可以实现切换,那就说说为什么同学箭头函数有一大特点,它是不是没有自己的意。但是如果你在箭头函数里边就使用了this这个关键字,它报错吗?不报错,它找其外层函数的this就作为箭头函数的this去使用了,那我想问你,红色框的这个函数是箭头函数对吗?我在里边用了this对吗?那我想问你。
14:10
红色框的这个箭头函数的this是谁?你是不是得找红色框这个函数的外侧?那么从代码的结构上来说,你说找外侧就找到哪儿了。老师找到render了,你可得了吧,Render和他从代码这个层次来看,他俩是不是兄弟呀,那要是找到外侧的话,应该是大概是这个位置对不对?哎,就仿佛是类里边这个空白这个区域对不对?说老师呢,也就是说我琢磨一下这块区域的this是谁不就可以了吗?那行,那咱看看吧,Klo this不好意思啦。类不同于函数体了,里边不能随便写代码了。我倒是想看看,你也倒是想看看,人家不让你写呀。如果这让写的话,同学那问题就都清楚了,一看,哎呦,V输出的这个还真是wiser的实力,但是他不让输出啊,说老师那怎么办呢?
15:04
同学,别把自己绕进去,你为啥要输出啊,你就想证明一下这块的this到底是谁,那我也跟你讲,箭头函数没有自己的this,所以说你这一写this,它肯定往外找,那所以说有没有一种感觉,你不要关注点,非得在这儿做个输出,你看看这个this是不是也行啊。对吗?我没有自己的this,那我肯定是外侧的this,那所以说那你试一下呗,Conslo输出this,我们瞧啊,同学们点谁呀。Whether的实例对象,所以说这儿呢,你也不用过于纠结,同学,他不让你输出,他不让你看,你以结果为导向不就得了吗?是吧?哎,好了,那所以说你都确定了,这里的this就是组建的实例对象,那你就解开它吧,那东西肯定就能用了呀,对吧,来吧,总结一波,同学,你说我都写到这种程度了,这也不要了,这也不要了,构造器还写它干嘛呀,删了去,所以说这就是一个精简的形式,以后我们初始化状态的时候,直接在类里面写复值语句state直接等于一个对象直接就搞定了,那写好注释,这叫做初始化状态。
16:16
啊,Render那就不说了是吧,哎,你的老朋友了,那这呢,Change whether叫什么呀,你觉没觉着它叫做自定义方法,不同于你的render,还有这个什么构造器那些对不对,自定义方法,那么也就是意味着以后。我们程序员在用类去创建一个组件的时候,组件里面所有你自定义的方法都要写成赋值语句加箭头函数这种形式啊,自定义方法写好了要用赋值语句的形式,你不能直接写小括号,得是赋值语句啊,然后加。加什么呢?嗯,箭头函数,OK。
17:00
哎,所以说以后呢,我们就都这么写了。啊,哎,你可能会说,哎,老师啊,那不对,那这为什么非得要写成这个赋值语句呢?老师,那我这么写不行吗?你看我这么写,我还把它放在圆形上,然后我让它是一个哎,箭头函数,同学,它不允许你这么写呀。不允许你这么写,如果允许这么写,那咱还说啥了呢,同学,我就自己写了一个change whether对吧?嗯,这个方法,然后呢,你帮我放在原型上,但是你帮我往原型上放的时候,你帮我改成箭头函数,它没这写法。对吧,你这么写它报错呀,那所以说我们只能借助哎,赋值语句这种形式,把它放在自己身上,然后给它改成箭头函数,这不就结了吗。啊OK,好想想啊,这就是一种简写的方式,那这种方式呢,肯定是我们干开发的时候要写的,没人写刚才这种形式,虽然它很标准是吧,嗯,但是你看这你看这对吗。OK,嗯,好,那这一节呢,我们停一下。
我来说两句