00:00
好嘞,同学咱继续啊,说个题外话,大家觉不觉得学到这一章节呢?好像react对我们原生GS的能力要求比较高是吧?哎,所以说呢,也希望同学们啊,就是说时不时的呢,把原生GS的一些东西啊,你再适当的复习复习好吧,嗯,来,那我们收拾好心情哈,继续出发,来,走,我呢已经成功的在change weatherr里边取到谁了呢?这个组建的实力对象,来,我们新开一个网页吧,来。控制台呢,打开看着啊,我点的时候来走是吧,组建的实例对象,诶到这了,点开点state,诶点is hot是不是能取到值啊,那所以说接下来的事情呢,哎,感觉也挺简单的是吧,我们不想做Co log那这种无聊的事儿,我们只想做一件事,把它那个a hot的值改为原来的相反值是吧?啊那所以说来吧,怎么写呢?首先第一步啊,同学,你是不是得获取到它原来的值啊,对吧,原来真就假,原来假就真呗,那好了,咱写好注释啊,上边这些注释啊,我也不能往下删,都留在这儿啊,都留在这儿,我在这儿敲一个,诶回车走,获取原来的A字Co。
01:15
值。啊,那怎么获取呢?定一下呗,Cost is hot,等于这回我就敢写了this.state.a字hot拿到了吧?哎,拿到之后呢,那再改呗,this.state.a字hot啊,咱先这么写着,等于取反A字hot。对吧,我拿过来,我取个反,我给你付回去。说老师那这样的话是不是就能完成一个动态的切换了呢?嗯,那我们试试呗,来到这儿走点击啊。走诶。没效果,哎,再点走走走走同学,我这点的都把文字都选中了,你说他也没切换,这是怎么回事儿呢?分析一下。
02:06
咱这个代码也没问题呀,z.state拿到它啊拿到这儿,然后呢,我改一下。同学,他到底改了还是没改啊,对吧?那我们这样吧,改完了之后咱输出一下是不行,this.state.is hot。同学,看初始状态一上来啊凉爽,那你这一点是不是得改为针呢,然后就输出了这个针对不对,获取原状态取反复回去,然后在这我再看一眼是吧,那保存来吧试试啊。凉爽,那肯定是false,你点了一下,走同学呀,现在这个问题很恶心了,你看啊。改没改成改成。那这怎么还是凉爽呢?说老师你再点一下false,再点一下楚同学,你觉不觉得这个布尔值已经能完成切换了,但是页面好像并不理你,对吗?
03:08
那同学可能,哎就说老师啊,来吧,那咱聊聊吧,那你刚开始,哎,你讲react开篇这东西你咋跟我说的,哎呀,同学们,我们把数据放在状态里面,然后呢,我以后去更改状态里的数据,它就能引起页面的变化,就驱动着页面的显示,你这都是假的是吧,你个骗子啊,那我说一下啊,同学是这样的状态里的数据。你不可以进行直接的更改。说老师什么叫直接的更改,你这就属于直接更改,去找到那个属性,直接给它赋值,这就是属于直接更改,你这种更改react根本不认。就是从代码的层面上来说,你改没改,改了,但是react不认可这件事儿,React当做他没改。
04:05
舒老师,你这说的这个来,我们借助开发者工具去瞧一眼,你就都知道了。同学,我问你控制台上现在不断的输出true false true falsex,是不是属于从,就是你正常编码的程度,This state是个对象,里边有个is hot的值,你真给它改了对不对?它来回在这切换的吗?但是我说的是什么意思呢?你改是改了,但是react不认可。同学,React,要是不认可这件事,你做什么都是徒劳。我们来到这儿。Components。点击weather,我刷新一下,同学,一上来天气凉爽,A hot的值是不是false?同学我点一下是不是得切换成你发现它变吗?它根本不变。啊,所以说同学从这个正常的编码角度来说,你确实把一个对象里的值改了,但是react不认可这次更改,所以说react开发者工具也不给你呈现,这次更改,你控制台上确实是改了,对吗?
05:01
说老师心好累啊,这到底接下来咋办呢?就一个天气凉,这个凉爽和炎热,这个案例我就写了这么久了,这好几个课时过去了,同学,最后一步马上你就成功了,来吧,那我告诉大家,走,写好一句话叫做状态不可直接更改,我写一个严重注意啊,严重注意什么呢?状态也就是咱说的谁呢?State。不可直接更改,要借助一个内置的API去更改。那这API到底是谁呢?说老师那怎么就算作直接更改呢,我给你写的明白一点啊,这再补一句。下面这行就是直接更改啊好,那这会儿呢,一会儿我给你重新写一个吧,是吧?啊说内置的API1会就直接写吧,那个API是什么?随是在这儿删掉,哎,严重注意状态不可直接更改。下面这行就是直接更改,写个感叹号哪行啊,这行,所以说这行是错的,好,写好了,这是错误的写法,你可千万别记混了哈,直接学完了,把这句话记住了,那可不行啊,来这儿先删下去,在这儿巧回车获没获取到原来的A字号的值啊,获取到了,同学你得调一个API,这个API在哪呢?听我说啊,同学,我在这儿呢,最后再给你进行一次输出,输出this change whether里的this是谁?由于我写了这句话,Change whether里的this已经成功的修改为whether的实力对象,对吗?好了,我们看一下啊。
06:48
来到这儿点击一下输出的是不是Y的实力对象,对,走咱们仔细的分析,我现在输出的是不是YR实力自身上的东西,对不对?好,那你说接下来我打开这是谁的原型对象啊,是不是whether这个类的原型对象。
07:03
那你猜猜这个原型对象上会有什么呢?肯定会有一个人就是change weather,肯定会有一个人叫做render,对吗?我们打开来看,走起是吧,来注意观察啊,有没有render,有,有没有构造器也有,有没有change whether也有,好了,那这是whether的原型对象,我如果顺着这个再往下找,你说就找到谁了呢?你可别忘了呀,你的whether可是继承了这个人,所以说是不是就找到了他的原型对象啊,那好了,那你去看一下,来走,同学发现这里边有一个人叫做set state,好了,把它记住,我给你写一个大一点的文字啊,大一点把它记住,叫做set state,你就听这名set有设置的意思吧,State什么意思啊,状态,所以说同学一句话,在react当中,如果你想修改状态,不要自己直接改,要用set state这个API去改,好了,那所以说同学我怎么能调用到set state呢?
08:04
This点直接是不是就能找到了?好了,那来到这我们开始写,别输出这this了,This点儿set state啊走传入什么呢?啊,我们先用一个非常简单的形式去写,其实关于set state呢,还有很多的文章在里边啊,我们先用一个最简单的方式啊,写的比较多的一个方式就是直接写一个对象。说老师为什么要写对象呢?那你想啊同学,你想你这个状态里边是不是有多组KY6。你在这儿直接写一个true,谁知道你要把啥改成true啊,里边可能还有一些别的信息呢,对不对,所以说一定要写对象,你要把A字hot的值改成什么呢?别写死,别说是真,哎,就是假是之前的值,是不是取个反。对吧。
09:00
哎,好了保存,哎说老师状态得这么更新,对写好注释。也叫严重注意状态,必须通过set state进行修改。啊,或者进行什么呢?更新好了,那你试试吧,接下来见证奇迹了啊,天气很凉爽,点击炎热,再点击凉爽,随着你的点击开始发生变化了,我们借助react开发者工具来看一下,你炎热,这就热,你一点诶,它就变成false,它就变成凉爽,说一下啊,这个最新版的react开发者工具啊,这会儿可能会慢那么一秒半秒的,之前呢,是非踌快同学,你仔细看,现在是不是凉爽,我点一下它得往炎热变,对吗?但是这个false呢,它好像等了半秒钟左右,你看一下啊,走,其实页面已经炎热,哎,这会儿才过来对吧?啊,慢点没关系,好用就行,OK。
10:03
说老师那这就把诶关于更新状态这个就说完了啊是的,但是这里边儿还有一些细节上的问题,我们得拉出来聊一聊,首先聊聊什么呢?就是他进行状态更新的这个动作。到底是替换还是合并?老师什么意思没懂,来,我想问你的是。这里面如果还有一个属性叫做wind,叫微风。然后呢,我把这目录关一下啊,让大家看到代码的全貌,我在这儿呢,还想输出今天的这个风向的信息,比如说来个小逗号,我想输出那个微风,你说那得怎么办呢。你当年从状态里取东西的时候,不要光取一个it'hot再取一个人,谁呢?Wind,因为我这准备好了呀,你看你这初始化,你这就读吗?那这怎么写呢?画括号谁呀,Wind好。打开啊,注意看,今天天气很凉爽,微风,那同学我想问的是啊,当我去点击了change weather之后,你是不是把那个a hot的值改成原来的相反值了呀?我想问的是这个win的属性丢不丢?
11:19
也就是说,我点完了change weather之后,它是拿着我所传入的这个对象。直接把里边的这个对象直接改了。还是说他只是说动了这里边写的东西,你比如说it's hot啊,那这就是it's hot改这个是一个合并的动作,一合并,如果重名的那就覆盖了,但是没写的啊,依然给你保持住,这就叫做合并的动作,那替换就是我不管你原来啥样啊,反正我这你给了一个对象,我就直接把你替换掉,我想问的是合并还是替换,你觉得让你设计,你设计成合并还是替换呢?那我们试一下吧,点一下啊,看看这个威风呢,它丢不丢。
12:01
来到这儿。呃,借助react开发者工具在这也能看到对不对?It hot为甲wind微风来点一下凿。其实它是一个合并的动作,不是替换,哎,好了,那这呢写一个逗号,且呢更新的啊动作,或者这么说吧,且是合并且是合并。哦,而这写吧,且更新是一种合并,哎逗号再补一个不是替换对吧,哎同名的那我就肯定是哎就直接哎给你复写掉了,那不同名的那就维持住嘛。啊,是一种合并,不是直接替换,还有另外一个问题,同学我问一下页面。那个凉爽和炎热是不是一直在变,是不是一直在变啊。那么说几个问题。构造器。掉几次?写好注释,放在最上方,它是构造器,对吗?好。
13:06
调用几次构造器啊同学,是不是当你拗一个类的时候,会出现一个实例。那new的这个过程当中,如果你写了构造器,构造器是不是要执行啊,所以说你就观察同学页面上有几个YR组件的实例吧,有几个呢,你在这儿是不是就写了一次Y标签。你写了一次外标签,那么react就帮你拗出来一个whether的实例,那所以说构造器啊,也就执行了几次呢一次,哎,那我们看一下怎么证明呢。我在这个位置给你来一个conslo,输出constructor。走,还说老师super不得是放在最前方吗?啊,其实是这样的,关于this的操作必须放在super的后面,别的人呢,其实是可以放在前方的啊,来吧,那我们试试啊,回到代码当中,来到控制台,同学一刷新,怎么样?构造器是不是只掉了一次?
14:12
好,那我再问你render掉几次。我先给你答案啊,同学,一加N次,为什么是这个答案呢?一是初始化的那次,同学,你觉不觉得如果最开始不掉render怎么拿返回值,没有返回值页面怎么呈现东西,对不对?你告诉我,你说那N其实是谁呢?N是什么呢?同学,你每一次去修改状态。页面上都特别给力,就直接给你渲染出一个最新的结果,那你觉不觉得就是你每一次修改状态。人家都帮你再调一次render,重新拿到一个最新的返回值,让这个三元表达式重新再运算一下,然后再决定到底是炎热还是凉爽,所以说N是状态更新的次数,你觉得呢?
15:13
哎,好了,我们去验证一下啊,来到这儿。嗯,我得输出一下才知道对不对,所以说在这呢,Co log输出一下re render。好,上来构造器肯定先执行,然后通过实力,构造器掉完了实力才出来,实力出来啊,构造器掉完了实力才出来,实力出来了之后才能掉render嘛,对吧,然后你去改状态,你注意看了来走。只要状态一改,人家为了给你一个最新的展示,肯定得掉render,所以说render是一加N次,那还有一个问题,就是change whether调用几次。啊,直接说吧,同学,接地气点,说点几次。
16:08
调几次对不对啊,当然不是这个调哈,哎,调用的调对吗?你就看你怎么点嘛,你点十次那就是十次嘛,对吧?啊,那如果说你想验证行啊,在这来个输出呗,走lo,嗯,输出什么呢?Change weather好走来吧,瞧一下整体效果啊来。这是初始化对不对?走你看你得先调change weather,然后里边去更新了状态,然后呢,A render,所以说同学react给你承诺了一件事。只要你通过这种合法的方式。去修改状态。状态改变完了之后,React特别给力,他绝对不辱使命的帮你再调一次render,不调render页面不更新呢,对吗?好,那么在这儿呢,敲几个回车啊,让你对代码呢看起来清晰一点啊,这儿呢也敲个回车走。
17:07
那同学啊,我们慢慢来啊,说一个问题,能让大家呢,更好的理解set state,能把它记住,同学,你觉不觉得啊,如果那状态要真的是能直接这么改。那咱也别叫组建三大核心属性之1STATE了,来,我给你起个名字。同学开玩笑的说,组建三大核心属性之一佩奇是吧?你,你想来,那我这还什么this.state呀,佩奇。对不对,I is hot怎么怎么地爱在这儿,那我这也不从state身上取了,佩奇这是不是也能判断呀,那我这改的时候我也不set state了呀,我就直接this点配齐,那你看一下效果嘛,打开。今天天气很凉爽,为什么凉爽?佩奇里边保存的it hot是false,调成炎热啊,今天还炎热,所以说那同学你不觉得改朝换代了吗啊。
18:09
组建三大核心属性之一配齐,所以说嘛,同学由于人家有set state这个方法,所以说嘛,人家才让你叫做state。那他说如果啊,咱开玩笑的说,如果他有set佩奇,那好了,同学你可以写this点佩奇点了对吧,哎,就在这。没有配齐吗?哎,好了,撤回来,所以说同学们人家叫斯state也是有原因的,哎给它撤回来,走斯state,那我们就把这个诶小案例呢就写完了,同学我们总结一下啊,来一波小总结构造器,我为啥要写?我也不想写呀,其实有两件事是我必须要做的。第一件事就是。我需要在构造器里边初始化状态啊,那你没有构造器我怎么初始化状态吗?然后后来我发现,哎,构造器里还能做这件事,是不是能解决类似指向问题,哎,好,所以说构造器我也不想写,但是这东西你看是吧,哎,那就只能这么写着。
19:13
那回头我再教你怎么把构造器干掉,来,再往下,同学,Render这东西没什么可说的,对吧?你就需要记住render里的this,就是组件实例对象就得了。render里边一般做的一个最多的动作啊,就是从状态里边读东西,然后根据状态的值哎,做展示,那这个change whether呢?同学,你其实把注释都删掉,你觉不觉得代码其实非常简单,就是获取原来的值,调用set state更新,那在这就没了。哎,好了,那这小节呢,我们停一下啊。
我来说两句