00:00
好,我们继续讲下一个扩展点是组件优化相关的,大家呢,先别看这个笔记啊,我们回到代码当中,用一个例子把这个问题引出来啊,新建一个文件夹,这是我们写的第六个了,是吧?那优化这词呢,我们选择叫这个optimize啊,本身就有优化的意思,好,新建一个组件。好,用快捷键呢,去生成RC,好名字呢,给它改一下,我叫这名字啊,叫parent,哎,你就听这名字同学是不是有副组件的意思呀?好,那我把它复制一份,我在下边呢,再来一个组件,这个组件的名字呢,叫做child啊,一听这名字大家都知道了,这是子组件对吧?好,那么父组件里呢,我先写一个H3标题,首先说我是parent的组件,把这句话呢复制来到这个里边来写上叫我是child的组件。
01:02
好,那么在parent里边呢,我要把这个child组件啊渲染出来。哎,那我问各位,他俩是不是就形成一个父子关系了,同样的,为了能让大家看出这个效果呢,我就新建一个样式啊,CSS,然后呢,写第一个样式的类名parent,首先来个背景啊,让它是橙色的,然后呢,再给它来一个这个宽度,哎,宽度让它撑开吧,我给一个攀顶得了啊,10PX啊,不给宽度是不是就横向都充满啊,那再来一个just child,颜色我就换一下啊,Just green灰色,好,我引入这个样式,我就不写那么多的样式了啊各位主要是想把问题演示明白啊,要是引入了,那他呢追加一个类名叫做parent,同理呢,他也得追加一个叫做child。
02:02
好,那回到APP里边,我们就不能引入第五个了,对吧,我得引入第六个OPT啊,优化的名字我还叫DEMO啊,在这儿呢,引入的名字是可以随便起的,稍等等着它编译。完事了,打开这个3000。哎,这就是我们想看到的样子,控制台呢,我也给大家开好啊,来刷新啊,这是父组件里边包着一个子组件,好了,那注意了啊,回到代码当中,回到我们的这个父组件里边,我呢给父组件呀,准备点状态,各位state等于比如说呢,这个副组件啊,有一台车,有一台车车的名字car name写上叭如说叫做奔驰C63啊这个车还是不错的是吧?哎,奔驰463。然后呢,你注意看这里有一个按钮啊,Button叫做点我呀换车。哎,点我换车,这写好了,叫做on click this.change car换车,嗯,那就得有这个方法是吧,Change car,那换成什么名字呢?来写一下啊,this.site state,走还叫car name,比如说换一个这个再好一点的哈,再好一点的,比如说来一个这个迈巴赫是吧,好。
03:27
那同学你看啊,我有状态了,而且我点击按钮呢,可以对状态进行切换了,那我想展示一下我这台车,那怎么办呀,在这我写一个死板标签,这可以吧?啊,那这怎么写呢?叫做我的车啊,名字是写上吧花括号this.state点是不是car name呀?缩紧调一下好保存,那回头来看一下效果啊刷新啊,我part组件我的车的名字是这个啊,我让这个换车的按钮啊,往下落一下啊,那所以说这儿呢,我先加一个这个B2这个换行符好了,刷新一波。
04:10
诶,好了,就这样子啊,但是这个换车呀,和他离得有点近,那就这样吧,我调整一下样式吧,给这个孩子来一个margin top,比如说是30PX吧,保存回到页面刷新,诶,好了,这回差不多了啊,同学来试试啊,看看点击换车能不能换呀,走,能换是吧?诶,没问题是吧,好,回到这儿啊。同学,我想把这个车呢传给我的孩子做展示。那你说我得怎么办呢?这是不是得写car name呀,等于this.state点是不是car name呀?那你看你一直在这this.state this.state这不太好吧,哎,所以说在这这么做同学啊,我提前呢把这东西拿好,this.state拿出谁呢?这个car name好嘞,这呢删掉。哎,那这儿呢,删掉好同学注意看啊,我现在是不是把这个车的信息传给了子组件呀,那子组件也想展示,那所以说这儿来给它也写一个SPA标签,叫做我接到的props,或者不说吧,我接到的车是写个冒号,那这怎么写呀,This prop点对吧,嗯,哎,好。
05:28
咱看一下效果啊,回到页面刷新啊,父组件说我的车名字是奔驰463,哎,那子组件说我接到的车呢,是奔驰463,好了,那我问各位一下,你说如果此时此刻我点击换车,首先第一个事儿啊,同学,父组件的奔驰463是不是得变,那你说子组件这变不变呢?我们之前就说过这事儿,同学你看啊,我点击了这个按钮,是不是换车呀,那你换车里边是不是触发了更新副组件的状态呀,副组件的状态只要一更新,那么react就会帮你重新调render对吗?一定要render,那这是不是一个新的了呀?那一定要render child的这个东西是不是得重新传呀?哎,那所以说肯定孩子把这个子组件里边的这个车呢,它也要换来,那我们一起看一下啊,来刷新,目前是奔驰四六三点,我换车走起,是不是迈巴赫呀,那这是不是也是迈巴赫呀?OK,说老师这不挺好的吗?哎,你注意了,有一个地方啊,它就不好了。
06:33
回到代码当中,我把这删了。同学,请问一下我的子组件child有没有用到父组件的任何东西,你就观察第19行什么也没用到吧,各位啊,说老师那这儿那什么也没用到,这句话我是不是可以注掉啊?哎,我给他注掉好说老师那你看那页面就是这个样子的呗,一换车那就副组件自己换呗,那这就不展示了呗。
07:01
呃,不展示呢,是不展示,我想问各位的是,它这个render还掉不掉。诶,什么意思呢?父组件的render掉不掉,子组件的render掉不掉,首先我们来一个验证啊,同学,如果父组件的render调用了,我就输出这么一句话,Parent杠杠render。如果子组件诶。它也调用render了,那我就输出child render。好,那这样我先传着啊,我先传着同学副组件有状态哈,嗯,点击按钮能改父组件状态哈,嗯,父组件状态传给了子组件哈,嗯。子组件做没做展示,做展示了哈,嗯,好了,同学分析第13行代码和第28行代码都执不执行,一上来我先说必须他得执行,他得执行,你觉得呢,对吗?
08:00
那我不调render,我怎么展示父组件,不调子组件的render,我怎么展示子组件啊?好,来这刷新怎么样?Parent render child render对吗?这没啥的,这没啥稀奇的啊,那我想问的是啊,各位,我把刚开始的这个初始化的清空掉,我接下来点按钮啊,请你告诉我,Parent的render还掉不掉?然后child的render还掉不掉。肯定得掉吧,各位是吧,你不掉我怎么给你做展示呢?我不掉render,这怎么更新,我不掉render,这怎么更新好。走,你是不是render了?是不是render了?好,那你注意看啊,回到代码当中,同学注意了,Child什么也不用,甚至在这儿呢,我都不读取。你说如果这个时候各位我换车啊,你想想,你说副组件render还掉不掉。你再说子组在那软还掉不掉吧。首先我必须得说,副组件的render它真得掉,你说对吧,因为什么呢?
09:01
毕竟啊,你是不是更新了副组件的状态,那人家肯定得调副组件的render吧,那你看嘛,原来是奔驰463,现在是不是换成了迈巴赫呀,那你东西变了嘛,人肯定得掉render对不对?好,那现在我想问的是当子组件。什么都用不到的时候,没有用到父组件的任何东西的时候,请问子组件还掉不掉render?啊,你可以给一个答案啊,你可以自己放在自己的心里哈,来接下来验证这事儿,子组件啥也没收啊,子组件啥也没用啊来,回到页面刷新一波,刷新一波初始化的这两次那咱都知道,肯定得调来清掉,注意了,各位点我换车来吧,什么问题出现了呀。嗯,同学子组建的render是不是又掉了一次?同学,你觉得这事儿是不是不太好呀?同学你想一下啊,如果说呢,我的子组件我真的是用到了你父组件的东西,那确实你这调render的时候呢,我这怎么办,我也得重新render一下,因为我用到你的东西了嘛,但是它明明没有用到啊,这也不做展示啊,所以说这一次呢,调的就不那么太合理。
10:12
虽然不太合理,但是也能说得通,怎么能说得通呢?同学你想嘛,你毕竟是不是掉render了呀,那各位你想一个问题,你这RENDER1调用,那里边的这些虚拟盗标签是不是都得解析一遍呀?那解析到child的时候,那人家也不知道child里边有没有什么东西发生变化了,可能他也得调一下child的render,对吧?啊,就咱这么说,虽然不太合理,但是还有情可原是吗?那你看着同学接下来这东西啊,他就不太合理了。我把这删了,这啥意思啊。同学,觉没觉得这个用接地气点的话来说,就是我晃了他一下。你理解理解,你看是不是这么回事儿啊,首先自己是不是有状态,嗯,有没有车的名字,嗯,有,然后呢,啊,点了按钮就点我换车啊,那你换成什么了呀?嘿嘿嘿,什么情况,同学,我是不是给了一个空对象啊,我这对象里边写什么是不是就改什么呀,但是问题是。
11:11
我这个对象里是不是什么也没写呀。哎,那同学你觉得他接下来怎么做呢?他无非两种做法啊,第一种他很聪明,你玩我。你传了个空对象,你晃我对吗?你没有改任何东西,好,我状态也不改,我render也不掉,因为你确实没有改东西嘛,还有第二种做法啊,第二种做法那就是你虽然传了一个空对象,他也傻傻的去帮你更新了一次状态,发现谁也改不掉,然后他也傻傻的帮你调了一次render,对吧?你说是哪个呢?其实啊,各位,如果呢,你之前仔细的听了我们的课,你会知道它的结局呢,一定是二。就是虽然你什么也没传,他也会帮你,哎,再去尝试着修改一下状态,发现谁也没改了,然后呢,他其实还会帮你调render的,因为之前我们在讲这个Rex的时候啊,各位你想一想,为了能让这个组件发生一次render,我是不是就这么写的,写了一个空的set state啊好,那我们验证一下是不是啊,来到页面刷新一波。
12:19
这是初始化的,是不算呀,好了,清掉来,我点按钮,点我换车走,同学怎么样,其实这没变,你觉不觉得同学parent的render不应该再掉了哦,那你觉没觉得child啊,这个子组件的render也不应该再了呀,好,那所以说我们同学回到我们的总结当中,Component呢,是有两个问题的。老师,什么component?对,回到代码当中,同学,你这是不是继承了component呀,嗯。那你这儿呢,是不是也是component呀?哎,这个component呀,就你每天都在写的这个人呢,他是有问题的,他有什么问题呢?我们回到总结里读一句啊,只要执行了set state,即使不改变状态的数据组件也会重新render,那你说这一句话呀,形容的是不是这个家伙呢?
13:11
只要掉了this.set data,我都不管你的状态更没更改,我是不是都会帮你调render啊,这是一个不合理的地方。还有就是如果当前组件重新render,就会自动render子组件,效率低。其实啊,咱得这么说,同学,父组件如果render了,它的子组件就应该render,对吧?但是有一个情况它就不应该render。什么呢?就是子组件没有用到父组件的任何东西,你说对吧?同学这句话呢,其实咱得这么说,那你说当前组件render的,你子组件re不render,你就应该去render嘛,但是有些时候就不应该,就比如说我们用到你的任何东西,那这呢,咱补一句啊,叫做纵使啊,啊这个子组件呀,没有用到父组件的任何数据,是吧?那你这样做是不是效率有点低呀,那其实同学你说这么做效率是不是也是有点低呀?啊好了,那怎么去解决呢?同学效率高的做法,那看看效率高怎么做吧,说只有当组件的状态或者是prop数据发生改变的时候,再重新调render,同学你用心体会体会,你品一品,你看是不是这么回事儿。
14:29
你品你品一品,说只有组件的state,同学们,你想组件的state是干嘛的?咱说过一句话,叫做状态驱动着页面的显示,对吧?各位,那大家就考虑考虑吧,你说我状态都已经发生变化了,你能不能不render?那不可能吧,你肯定得render,对吧?你再考虑这儿,如果一个副组件给你传递的props发生变化了,那你看同学,人家给你传的props都发生变化了,难道你不应该重新render一下,接到一个最新的prop去展示吗?所以说同学只有这两种情况是吧,我们才应该去render啊,那怎么造成的上面这两个问题呢?那说一下原因呢,就在这儿。
15:12
同学,你还记不记得了?Should component update呀,这个生命周期勾是干嘛的来着?同学,我们之前是不是说它是一个阀门啊,是不是控制组件更新的阀门啊?那么大家还记不记得这个阀门?如果你不做特殊的处理,它是不是永远的返回处啊?哎,只要你不写默认的返回值呢?它就是戳,所以说原因是在这儿呢?这个控制组件更新的阀门啊,它一直返回戳,这是不太合理的,所以说呢,我们可以改造一下来,我们慢慢来啊,各位回到代码当中走,我们一个一个解决,反正问题啊,现在有两个,一个是执行的set state,即使不改变状态数据组件也会render,这效率低是吧?我们先把这问题解决好,怎么解决呢?回到这儿,同学啊,我先做一件事,我先不考虑子组件怎么怎么地,我先把这个删了去,同学,我这要删了去,你觉不觉得子组件就不奏效了啊?好,那回到页面呢,就变成了这个效果刷新。
16:22
子组件是不是没了呀,同学,我们先把这个问题解决,哪个问题呢?就是如果我写了一个空的对象,哎,空的对象也就是说我不对状态进行任何的更改,你就别掉砖底儿了,那么目前呢,是这样的,来,你看着啊,刷新。一上来是不是得render啊,点击的时候走。我没有改任何东西,它也掉了对吧?这就不太对,那怎么做呢?非常简单啊各位,我们写上这个生命周期钩子说老师呢,我明白了,我就直接return false不就得了吗?哎哟,你这么玩可挺危险的哈啊你这么玩啊同学你想你想一下啊,好诶迈巴赫哈诶迈巴赫好,那你看着你这么玩啊,就把自己玩废了,同学你刷新一波是一上来有这奔驰463了,来点我换车同学组建为啥不更新呀?
17:17
你阀门同学你处于长,咱说常开不行,你常闭是不是也不行啊,对吧,那以后就不行了,说老师那怎么办呢?那跟大家说一下,其实啊各位我们的15的component update呀,它是能接到参数的。啊,他接到的第一个参数呢,我们用这个行参去接,我给大家写一下啊,大家看这个名呢,自己就也能明白,Next props next state。同学,我问一下这个next啥意思呀?这个next是有下一个的意思吧?啊,那这直译过来什么意思呀?啊,下一个props,那这是什么意思呀?啊下一个状态说老师那这俩什么东西我咋不知道呢?行,我给你lo输出一下,我分别输出next props,还有next state。
18:11
然后呢,我再给你来一个输出,输出谁呢?this.props还有this.state啊,先大概说一下他们都是什么,这个z props啊,就是组建实力自身目前上的props,这个就是组建实力自身墓前上的state。那么这个N啥意思呢?就是接下来它要进行什么样的更改啊同学,也就是说接下来可能我的props要变对不对啊,接下来可能我的state也要变,对不对啊,然后你在这儿呢,拿到的就是下一个props,拿到就是一个下一个即将要改变成的那个state,你这儿拿的是啥呢?就是目前的什么呢?哎,Props和谁啊,State,那你这儿呢,写好了叫做接下来啊要变成的结果啊,或者说接下来变化的目标props还有谁呢?目标state,也就是说变了吗?还没变呢。
19:21
啊,还没变呢,这是目前的,这是接下来的,我把它俩调整一下顺序,大家可能理解的会更好,我拿到目前的props,拿到目前的state,这是接下来要变的目标props,接下来要变的目标state是吧?好,那我们看看分别输出什么,但是你别忘了啊,同学,这个数的component update呀,我问一下各位,你是不是必须得有返回值啊,哎,我先写一个叫做true TE true,我不写返回值,一会儿会报错的对吧?我的阀门并没有说开启和关闭,好了,来,那接下来看效果哈,来刷新走,这是初次渲染的render,对吧?好了,把控制台清掉,注意了各位,接下来我点这了啊,三二一点,同学,那你瞪大你的眼睛看吧,这个props呢,由于我没有传,同学你回到代码中,你看parent组件是不是在这儿呢呀。
20:20
那同学我问一下这个parent组件你是不是暴露出去了呀,那你是不是在APP里边这么引入的呀,你这么写的吧,我就问各位一下,我传prop了吗?我传了吗?没有,所以说同学就没有说什么当前的props啊,这块没有什么当前的props,什么下一个props,我压根儿就根本没传props,所以说我们先不关注这儿对吧,这儿呢,一会儿我们放在这个组件里面去研究啊,就下边这个child,好,那来同学那你看一下吧。我当前呀,是不是奔驰463,那下一个是不是迈巴赫呀,你捋顺一下,同学你刷新一下,我问你目前车叫叫什么名。
21:02
是不是奔驰四六三点我换车,那你看看你拿到的当前的汽车名,是不是就是奔驰463呀,然后呢,同学你看这儿由于你改了状态对不对。然后呢,由于你的阀门返回的是true,我问一下各位,所以说组件是不是更新了呀,对不对?哎,那你说如果返回的是false,那我问一下各位,那这问题就也很清晰了呀,你刷新一下,稍等,目前是不是奔驰463来321走,同学你原来是不是奔驰463,然后你拿到最终要变成的是不是迈巴赫呀,对吧,你看同学当前的奔驰463拿到了要变的迈巴赫拿到了它咋没变呢?他咋没变呢?啊明白了,老师,因为我的阀门咋的了,关闭了,那同学你觉得一个合理的做法,你应该怎么做呢?这个人你看见了对不对,哎,这个人你也看见了对不对?那你觉不觉得同学你应该做一个判断就好了。如果。
22:01
谁呢?比如说咱想判断那个车名啊,那就来。This prop,谁呢?对吧。Car name,如果你跟下一个,哎,不是pro啊,是state啊,对吧?哎,拿到当前汽车的名跟下一个状态里的对吧?啥叫下一个?就接下来要变的那个状态里的car内,如果它相等,请问怎么做?是不是return false对吧?嗯,就错了,False是吧?An else呢?嗯,同学,如果它俩不相等呢。那是不是就return true了?同学,您觉不觉得这样的话,我的阀门就很智能啊,我有一个状态啊,这个汽车的名字是奔驰463,你要改好啊,你可以随便改,但是如果你改完的那个东西和我之前那个是一个名,都叫奔驰C63,不好意思啦,阀门关闭。
23:07
那如果不一样呢,那就return true好了,来,咱先这写着啊,先这写着,我知道这还有优化空间啊来回到这儿咱刷新一波啊同学,你说目前车是不是奔驰463呢?好,那你点了换车呢,是不是改成了迈巴赫呀?好嘞,试试啊,来321走。是吧?迈巴赫是不是render了?哎,那同学,我测试他一下,你说如果我晃他一下呢?这就有意思了,你晃他一下之后啊,同学你觉不觉得那个汽车的名字其实没改呀?嗯,那来我们再试一下啊,刷新321走,同学,是这俩玩意儿得输出,它不输出就怪了,这个东西不是写在竖的component update里边呢,对吧?那我问一下同学,Render有在调吗?是不是没有在调,为什么呀?诶,你的判断是不是奏效了呀?
24:03
嗯,说老师行,那我知道了,这得做优化,但是有一个细节上的问题,同学你说如果我状态里的东西特别多怎么办呀?有A1B2,还有C是三,还有D是四,同学那我要是在这儿就一直这么判断的话,哎呀,你这名字一不一样,你A1不一样,B1不一样,C1不一样,B1不一样,同学们你的判断是不是就太多了呀?啊,这那怎么办呀,有办法啊,有别人帮我们去做了啊,谁呢,你别急,一会儿再说,还有一个问题,我们还没有亲自去处理呢,啊,哪个问题呀,同学你别忘了呀,这个child呀,我是不是还得用啊,这玩意儿对吧?咱开玩笑说这日子还得过吧?啊那你这child还得用,那同学,那你说child这里边儿我得怎么去调整呢?来,他说老师不调整,我觉得这就行,行吗?那咱试试吧,啊,同学,车的名字你是不是还得给人家传进去啊,哎,好嘞,传进去,那你这儿是不是还得用啊?哎,那就解开好了,你看看有啥问题啊,划到这儿,我这得正常写了哈,我不能晃它了,同学,我现在要是晃他的话,那就有意思了,我问你副组件的render是不是都不掉了。
25:20
那你告诉我各位父组件的run点都不掉了,那子组件是吧,那子组件那就更别提了呀,所以说我得让父组件正常的变好吧,哎,正常的变好了,写好car name啊,然后冒号,那怎么写呢?比如说叫做迈巴赫好能改名哈,来看一下效果啊,刷新。两次软点是吧,清掉321走看效果啊诶。因为你确实改东西了,对不对,那父亲是不是得render啊,哎,那孩子是不是也得render啊,诶好了,那回到代码当中,同学你看这么一个场景,就是孩子呀,啥也不用,孩子啥也不用。
26:02
啊,那孩子这儿呢,也不做展示,这是不是属于典型的子组件,没有用到父组件的任何东西啊好,那这回呢,你再看一下来刷新,哎,清掉好了点,我换车走你。同学,咋样?孩子是不是还在掉啊,那怎么办呀?回到代码当中,同学,孩子里边我们也需要这一堆,把它拿过来放在孩子的里边,那么孩子是没有自身状态的,同学你觉不觉得其实这个n state我都不需要去用啊,因为孩子本身没有状态吗?孩子更关注的是父亲给我传过来的propose怎么怎么样,对不对?那所以说你告诉我这怎么办呀?同学,State其实咱都可以给他删掉了,对吧?哎,但是我不删,留在这儿,我还是给大家输出props,还是给大家输出这个state,那但是我就得把上边的临时助调一下,要不东西太多了,干扰大家,这会儿已经研究完了,对吧?好,往下。你说接下来这怎么办呀,同学。
27:01
是不是得输出看一下props长什么样啊,是不是得看一下state长什么样啊,同学,State你都不用看,他是不是都没有自己的state呀?哎啊,好了,那再看这next props是不是接下来的next it,那接下来的状态,所以说你能知道这俩状态肯定是没有的。因为我没有自身的状态,我也没有对身的状态进行任何的更新,你说对吧,啊说老师那这怎么办呀,来先别急,写好了,写死啊,先写死。好了,来我们见证一下啊,刷新清掉。啊,注意了各位,我要换车了啊,321走,你这是什么呀?空这是什么呀?空那这呢那这呢now那就对了,因为他没有自身的state对吧。但是同学你觉不觉得这个z props和这个next props它俩是一样的呀,他俩是不是都是空对象啊,对吗?各位。
28:01
哎,那所以说你在这儿是不是也就可以写一个判断呀,啊,那你比如说同学我这样写,我给child呀,传了car name,我确实传了,但是我传的永远是奥拓。那同学我这儿可以用一下,那我想问的各位啊,同学,你说我要这样写,你说子组件是不是收到了父组件传递的数据,但是副组件永远传的是不是都是奥拓呀。那所以说你觉不觉得同学就等下一次再渲染child的标签的时候,他发现你之前是奥拓,你接下来的还是奥拓,那你觉不觉得render就不要再掉了呀,是不是?哎,说老师,那我就这样写什么后果呢?那你看一下吧,你把这也注掉,来阀门不写它,那你看一下现在的效果啊同学,孩子接到的是不是永远都是奥拓,这辈子不可能变了,是不是都叫奥拓呀?那你看一下吧,来孩子这儿,哎也读着呢,是吧,来刷新。是不奥拓清掉同学,我想问的是父组件无论怎么改,这台车子组件是不是不应该再去render了,因为你没用到父亲里边状态的那台车,你用到的是一个程序员写死的那台车,是不是叫奥拓呀?那你看现在你点的时候,各位321走,它是不是也render,那你觉得这次合理吗?是不是不合理?哎,那所以说咱是不是得判断一下啊,嗯,来吧各位,那怎么判断呀,就得借助这个阀门。
29:26
你把阀门打开,先让它永远返回错,我们再观察一下,看看孩子每一次更新的时候,这两行它输出啥来,回到页面刷新初始化的清掉321换车,是不是叫奥拓,是不是叫奥拓同学,他俩是不是一样啊,那你觉得一样的话,它是不是没有必要再render了呀?那所以说怎么办嘞。我是不是可以来一个对比,如果咋的。These their props。点car name,你真的等于了我的next props.name那我怎么办呀?
30:09
对吧。你俩相等,那怎么办?那你就别render了呀,好写一个else else written什么呀,那就说呗,是吧。哎,好了,来,咱试试啊,回到页面刷新走,传的永远是奥拓哈321换车走怎么样?同学,副组件确实得render,因为你确实把这状态变了,但是子组件呢,是不是没有render?哎,这样做是不是挺合理的呀?哎,咱其实还可以更简单点,同学,一个return是不是就搞定了?Return什么呢?This props是否它俩全等,这是不是就解了?那这两句话是不是可以不写了?来,再试试啊,来刷新。那他俩都得render来换车走诶,那这有问题让他看一下吧,哎,那parent render return this car name是否等于它啊,那这得取个反是吧?哎,得取个反,那俩相不相等啊,对吧?它俩是相等怎么办?它俩是相等,你得返回是吧?哎,所以说咱取个反来回头刷新一下,那初次渲染肯定是正常的来清掉,那接下来呢,点我换车321走同学,怎么样,Child是不是不render了呀?那你说你这儿能做出这种改变,那你上边这儿呢,是不是也可以再精简一点啊啊,那怎么写呢?直接瑞取一个反对吧,然后呢,把这一堆给它粘过来复制往这一放,这两行撤掉是不是就可以了?来咱试试啊,各位,咱晃它一下,诶,我骗你,我没有更新任何的状态。好了,回到页面刷新。
31:46
呃,初四俩人肯定都得render对不对?好了,我晃他一下,321走,同学是不是副组件也不render?你觉不觉得这样做才是最合理的呀?啊,那但现在有一个问题,就像刚才咱说的,同学我一堆咋办呀,我有个A是一,我有一个B是二啊,对吧?啊,我还有一个C呢是三,那咋办呀,那如果你不嫌麻烦,同学你在这儿就得一个一个一个一个自己去判断,对吧,但是其实没这个必要了,同学我说一下啊,就刚才呀,你自己手动的去写阀门,这里的逻辑呢是可以的,但是真正开发的时候呢,我们不需要自己手动的去控制这个阀门啊,真的是你自己那么的实在,自己去一点一点对比是不需要的,所以说真正开发的时候注意看好了各位阀门其实不写。
32:34
这个阀门呢,其实也不写,说老师那你这不写的话,那肯定就出问题了呀,那也确实是,我要是只是暴力的把阀门删掉,那不信你瞧这同学,我这是不晃了他一下,回到页面刷新321,等会儿啊,321我换车同学咋样,俩人是不是都软?你需要做一个事儿,同学就是以后啊。咱不用component,咱用谁呢?同学在react里边给我们提供了一个新的人,叫做pure component,这个pure什么意思呢?纯粹的纯的啊,这个纯组件就有这个优势,它能帮你重写阀门里的逻辑。
33:12
就正常来说啊,各位阀门里的逻辑得你自己来写,判断,谁变谁没变,但如果你使用了pure component,他自己就去帮你判断了啊,那我们试一下啊,你比如说pro component来到这儿,那这是不是也得改啊,Pro component你只需要做这么一个改变,阀门里的逻辑已经有人给你写好了,来我们看一下能不能行,首先验证第一个事儿,在副组件里边,我晃他一下,我不改任何的状态,我看你敢不敢掉render来回到页面刷新,初次渲染肯定得这样清掉321换车。321换车同学,Render是不是没掉?哎,他这个pure component已经帮你写完了,这个数的component,这个阀门里的对比逻辑啊,OK,那我们在测试另外一个问题,就是说呢,我这儿如果永远传的是奥拓啊,我看看你这儿呢,还帮不帮我调render了?那首先第一件事儿,我得让副组件先发生render是不是才能处罚?哎,这句话呀,好了,那这样咱老老实实的写,让这car name呢,咱给他改一下,咱说叫什么玩意来着,叫买巴赫是吧,好了保存。
34:27
同学们,你看我这回可是真的改东西了,所以说掉不掉render啊,父亲的掉,那这块掉不掉呢?那就不得而知了,咱就不知道这个pure component做了怎么样的优化对不对,我传的不奥拓呀,我第一次传的是奥拓,你再render,我再传是不是还是奥拓呀?嗯,那咱看一下啊,来刷新注意了啊,清掉321,我换车你确实换了,所以副组件得render,但是你发现子组件非常的稳啊,各位是不是没有render了对吧?哎,那所以说呢,这就是a pure component的优势,其实同学a poorre component,有人读poorre component,有人读pure component啊,两种发音都对啊,这个pure component啊,同学他也没有做什么太高大上的事儿,它只是重写了数的component update给你进行了一个比较啊,进行了一个比较,但是啊,同学你要注意它这个比较呢,稍微的呀,有点点小问题或者说小瑕疵怎么的呢。
35:24
同学,你看着啊,你注意看啊。我这原来车是不是叫做奔驰463呢?好,各位你再往下看,我把车改成什么名字呀?是不是叫迈巴赫呀?那同学你看着我,不用第九行这么改。我不这么改,你注意看,同学,你看我怎么改啊,你注意了this.state。啊,然后呢,我这样结构赋值呢,我先把这个car name呀给它拿出来,好,Car name我是不是拿出来了,或者这样写也行,同学来这么写,我不解构赋值了,不绕大家了啊,这是不是z.state呀,OK,我把什么拿出来呢?你注意看,我把这个我就直接命名OJ同学,这OBBJ什么意思呀。
36:10
OBJ是不是就是代表一个对象啊?Z star state,请问我是不是拿到了这个对象啊?OK,好,接下来我这么改,看着OBj.car name等于注意看啊,我写一个这个迈巴赫,然后我在this.site state,然后我再走。然后呢,我直接把这OJ写进来。同学,你看这啥意思,你你你分析啊,首先我是不是通过this.state这条线找到了状态对象。是不是改了状态对象里的一个属性叫迈巴赫?然后同学你注意了,我没说我不掉set state,大家都知道我要不写这句话是不行的,咱早就说过那句话,同学,状态的更新是不是不能直接找状态对象,完了点我就改啊,是我知道啊,不能这么写,但是我补上这句话了,你看好了,各位,我掉没掉set state?哥们,我掉了,我掉了,那我传没传一个对象,传了我对象里的名字改没改,改了。
37:21
哎,所以说同学这和咱讲基础的时候呀,说这个状态不能直接更新,那不是一回事,知道吧,咱之前说直接更新状态是咋回事,同学是没写s state,哎呀,我拿到状态对象,状态对象点卡内卡,我改成迈巴赫,你这是不行的,这谁都知道,都学到这这个这个程度了,谁都知道不能这么写,但是同学你看我这么写你看。拿到状态对象吧,我改名了吧,我赛类的OBBJ吧,好,那你看看能不能变成迈巴赫啊来回到这儿刷新321走诶321走诶同学什么情况。是不是没变呀,同学们,你觉得?
38:02
我用红色框的set state和蓝色框的set state有什么区别吗?嗯,各位有什么区别吗?有区别还很大。你用第九行的set state,您觉不觉得你传递的是一个新的对象?用心体会这件事儿,同学,我蓝色框里写啥呢?老师,你写对象呢?这我是不用字面量的形式构建出来的一个新对象啊,对吧?我问一下这个对象和红色的状态对象,它俩在堆里边是一个对象吗?不是,它俩的地址值是不是不一样?好,但是你可要注意了,各位。你第11行干嘛的?同学,那是一个引用地址的传递吧,啊,然后呢,你写的好像挺好的,OBj.car name等于迈巴赫,那我想问各位的是,这个OBJ和z.state是不是一个对象,是你在原对象上做出修改,说老师,那我改了,但是我调set state呀,你注意pure component底层做了一个浅对比,啥叫浅对比?我不去看你对象里边的东西变没变,我只问一句,这个obj还是不是原来那个state?
39:13
如果说哎呀,你这OBJ,就是原来那state,不好意思那个阀门直接返回false,也就是说验证一遍conlo OB BJ到底等不等于这玩意儿state同学其实都很无聊,都不用验证,你这一步干嘛呢?你这一步干嘛呢?对吧,那可能基础好一点的同学马上就知道了,老师都用验证,但是咱还是验证一下啊,来好嘞,刷新。清掉走怎么样?各位啊,兄弟他俩是不是一个对象啊,一个对象阀门永远就返回什么来着啊,这让我删了,就是那个false对吧?所以说同学你用的pure component,你一定要注意,当你进行set state的时候,一定不要再跟原来的对象发生任何的关系,如果你写的OBJ这个东西啊,注意了各位跟原来对象是有点儿关系的,那么不好意思,它不能更新了。
40:07
啊,它就不能更新了,我给大家举这么一个例子,就是为什么之前呢,我不太推荐大家用push,用什么on shift是吧,同学来看这么一个东西走,呃,叫做STU。S就是一堆学生。一堆学生啊,看好了,比如说写生叫小张,如学生啊叫小李啊,小李,比如学上叫小王是吧,啊小王。好同学,我想展示这一堆人,我就想做一个非常简单的展示,我是不是可以这么写,画括号this.state点谁呢?SS同学,我也不做啥样式了,就直接咔,全都摊在这行吧,好看效果。刷新啊。来各位小张小李小王对吧?啊,这我车的名字是挨在一起了,这不太合适啊,写一个这个啥NBSP,走,刷新一波啊。
41:06
好,小张小李小王对吗?好了,回到代码当中,同学有一按钮啊,注意看了啊,有一按钮叫添加一个小什么呢?小刘吧?啊,添加一个小刘,那就叫做爱的刘是吧?哎,就就就写一个爱的刘不行,这太low了啊,来,还是写爱的STU啊添加一个学生同学不能太low啊,不能太low,好写在这儿走来,各位您瞧着啊,如果你这么玩你就废了,哎呀,我解构副值,哎呀,挺好的,我拿到了state里的谁呢?啊,这个。按这个啊Su,哎,行了,点on shift加一个小刘好了,z.side stay写谁呀?啊,咋写啊,这里写一个啊说花括号是吧?啊来那写什么呢?ST啊,那然后里边呢,写谁是不是TS呀,你原来是不是叫这名,那你现在是不是叫这个好简写了是吧。
42:13
同学,你看看这小刘呢,能不能添进去啊,来刷新是吧,添加一个小刘走走走小刘是不是进不去,哎,所以说同学你觉不觉得你这么写就不对了。你是不是拿到它了呀。你是不是做了on shift呀,同学,我想问一下这个sts和你this state点那个sts是不是一个人,所以说人家不给你动了,人家一判断,哎哟,一个对象啊,得了阀门关闭,所以说同学不要这样去添加一个人,那你告诉我正确的姿势是怎么添加呢?拿肯定得拿,但是咱是不是得这么玩啊,各位this.science data咋写呢?怎么写来着,大家还记得吧?点点点是不是他呀,你是不是想加一小刘啊,走着小刘写在这儿,逗号是不是完事了,我这么写跟刚才写有什么区别,刚才写就是stuss还是刚才那个stuss,他俩是一个对象啊,一个数组,那在在这儿呢,不一样了,同学,我还是sts,但是我在这是不是用一个字面量的形式构建出来一个新的数组啊,那所以说这个时候刷新注意看啊,添加一个小流,小流是不是就进来了?哎,就这回事。
43:32
啊,回到我们的笔记当中啊,我们简单读一读,有两个办法解决对吧?各位,一个呢,是我们亲自重写这玩意儿对吧?比较新的和旧的state以及props啊,你变我就你没变我就false,那还有第二种办法比较先进是吧?用pro component啊,重写了这个东西是吧?诶,然后注意的是per component呢,只是对state和props进行了数据的浅比较,如果只是数据对象内部数据改变了,返回false啥意思?就是你如果还是那个对象,你只是改了一个名,改了一个age,只要你还是之前那个对象,不好使false对吧?哎,还有就是啥呢?同学,我们发现了,不要直接修改state的数据,而是要产生新数据,咋理解啊?这句话回到代码当中,同学读一遍。
44:18
不要直接修改数据,要产生新数据就怎回事?哎,回到我们的总结当中,最后一句话,项目中一般使用pro component呢进行优化,好这小节呢,我们停一下。
我来说两句