00:00
好了同学,说完挂载呢,咱再说说更新,其实这块呢就叫做挂载啊,这个蓝色的呢就叫做更新啊,说老师那这叫什么呢?那你读一读吧,Component view mount,这其实呢就是卸载组件的一个过程,说老师那刚才这没测试出来啊,那写一下呗,嗯,在这儿呢,加个按钮走,叫做卸载组件,那咱就不说那个不活了啊,卸载组件。那还叫这个名字death啊,上边呢,定义一个death走,写好注释啊,这个叫做卸载组件按钮的回调走里边干嘛?大家还记不记得了,我要卸载这个组件react DOM,哎,不是叫做什么来着,首先是卸载component at note,呃,Did test。
01:03
啊,来,那我就得匹配一个钩子呀,哎,Component will mount consolo,走,把这一堆呢,给它复制过来放在这儿,这儿改一下啊,不叫做data amount,叫做view amount,就你这的输出得跟这个匹配啊,要不你不就看错了吗?是吧,来,回头我们试试啊,这是初次见面对不对?哎,第一次挂载构造器view mount render mount好清掉,现在组建,你看view on mount是不是帮你调了呀?好嘞,刷新之前那个关掉,我们接下来呢,看图说话啊,同学走着。这个蓝色框子里的东西啊,就是更新过程了,那么是这样啊同学这里边呢,其实有这么几条线啊,首先第一条线我用红色的给你画啊,第一条线走。从这走走走走,一直来到这儿对吗?这是红色的,我管它叫做第一条线,然后这里边儿还有一条线,我用橙色的给你画啊,稍微粗一点,其实就是这条线走走箭头是不是也往下走啊。
02:17
走诶也来到这儿好,这是第几条线的第二条线。那其实这里边还有一条线对吧,大家也看到了,那我用什么呢?我用一个粉色的吧,给你画从这开始走,哎向下的箭头,然后呢,最后也来到这儿,那这是第几条线呢?第三条同学咱先走一个简单的走一个正常的流程啊,谁是最正常的呢?其实是二,为啥说呢?那你看这同学他是不是掉了set state,你掉了set state是不是在更新状态。你一更新状态,那咱之前说什么一更新状态就得重新调render,其实不仅仅是重新调render,它还掉了一点别的东西,同学先把二搞明白,我们再去搞一,然后再去搞这个三,好吧,哎,或者说咱们这样也行,以最简单的开头,以稍微复杂点的结尾,先说二这条线,再说三这条线,再说一这条线,OK,好了,先说二走,同学从这里出发,你得怎么着,是不是得调set state呀?同学回到我的案例当中,我调没调set state呀,掉了在这儿的吗?对不对,我有对状态更新的这个动作存在的,这个是吧?有,那么往下看,同学A来,他走这了。
03:38
同学,你读读这个名字,然后你猜一猜它是什么意思,Should component update should这词呢,有应该啊,被允许的意思对不对?哎,Should component呢,那叫组建,Update呢,那叫更新,那你说这词什么意思呢?老师,那就直译呗,应该组建更新,这么说不太合适,润色一下叫做组件是否应该被更新,我直接跟大家讲啊,同学,这个should component update呢,它是个阀门。
04:11
咱之前怎么说,哎呀,你掉了set state react就帮你更新状态,更新完状态之后就帮你调render,其实之前咱说的都有点儿跳跃性,因为你忽略了两个环节,一个是这个环节,一个是这个环节对吗?那接下来呢,我们就给它慢动作回放,同学,其实你调完了set state之后啊。他掉了这个钩子,他问一下这个钩子说你看呀,那个程序员写了set state,那我应不应该重新更新页面呀,我应不应该去更改状态呀?同学都靠这个钩子。在决策,如果这个钩子返回的是true允许,那么这些流程就都能走下去,如果这个钩子返回的是布尔值false,不好意思了,你本次更新状态动作到这儿就停住了,不能再往下走了,因为阀门关闭了,阀门返回false就是关闭,返回戳那就是开启。
05:18
说老师那之前我也没写过这个东西啊,那我调了set state,那页面不是能更新吗?老师,那你看回到你写的页面,我在代码里面压根没写那个东西啊,Should component update,那我点加一的时候,你看这不也能加吗?哎,那说一下同学。回到图里面,这个钩子如果你不写,它也有一个默认的返回值,它永远返回的是针,永远返回车。如果这个钩子你亲自写了,并且返回的是false,不好意思,所有的状态都不能进行更新,也不会掉render。所有的事情到这个箭头这就全都停下了,那我们试一试啊试一试,回到代码当中往下走,那写好注释吧,这个钩子是组建什么的钩子呀?哎,叫做组建将要卸载的钩子。
06:12
来,那叫什么名字了,刚才咱看的should啊,然后呢,Component,然后呢,Up data update啊,一定不要写错,Should component update。同学,Conslo如果能进入这个里边,嗨,那就证明呢,那图没毛病对吧?走count的什么should component update,我说如果我不写,其实它默认呢也有一个返回值,说老师那咱就不写吧,我说的不写不是这个意思,说你不写返回值,我说的意思是同学,如果你连这个勾字你都不写,其实底层它也会给你补一个,而且返回值为真的布尔值。啊,那如果说你写呢,那就以你写的为主,同学,那你说我要这么写,我有返回值吗?这个should component update。
07:08
其实返回的是安find对吧?啊说老师那安de find,那就那你试试吧,来回到案例当中清掉啊,点我加一,我还没点呢啊,我说123,我再点一二三点走同学,现在有一个问题啊,页面更新了吗?没有,那我再问你掉没掉那个数的component update掉没掉,掉了说我这警告啥意思呢?告诉你的明明白白,请确信你返回的是true or false,那你咋瞎返回呢?你咋返回个undeend呢?你看你returned undeend,你不能这么玩,老师,老师就是我得写好啊,写一个不值对喽,Return返回什么呢?老师,我返回个针吧,返回针回到图里边,阀门就是开启的,这条线是可以走下去的,那所以说你要是写它是true啊,那就有意思了,你看着走是不是正常?哎,你看再走再走,说老师那怎么还掉render呢,那更新当然得调render了呀,那你发现每一次它。
08:08
执行更新的时候,是不是都得问问这钩子呀?好,回来那同学你说如果我返回的不是true而是false呢?同学,阀门就此关闭了,这条线不可能再走下去了,所以说什么component will update这钩子啊,什么render这钩update update就都不走了。同学,你说render都不掉了,你页面能更新吗?当然是不能,那所以说回头我们看一下,初始化是没毛病的,清掉,当你去加一的时候,同学们无论你怎么点页面不敢动,因为render没有机会被调用,说老师,那这怎么还不断的输出呢?你每一次点更新,马上就要更新的时候,人家是不是得问一下这个呀?那人家既然问,那你说掉不掉这钩子呀,掉。是吧,那一定那不就输出了吗?好诶,那给这儿呢,给大家写一个注释,那叫做控制组件更新的来叫阀门,嘿,OK。
09:09
好,那我们顺着这个图往下走,同学,那这个钩子呢,已经验证了是吧?来同学对这个竖的component update进行一句话总结,这个勾子如果你不写,底层也会给你补一个,而且补的那个钩子默认返回值为真,如果你写了竖的component update,必须要求你得亲自写一个返回值,返回值必须是不尔值好,不尔值为真,阀门开启可以走,为假,阀门关闭不可以走。好,往下再读,这个是什么呢?先别看这啊,先别看这,咱们不是说好的吗?先走橙色的这条线嘛,对吧?好了,再往下是谁呢?Component will update什么意思?组件将要更新,哎,回到代码当中,我们测试一下,在下边写好了,我就复制一个这个啊,走,就把后边那个on mount呢给它改成update哦,组件将要更新conslo输出还是这句话放在这儿,当然了,你把这个改一下对不对?哎,是count这个组件的component view update,写好注释组件将要更新的钩子,好再往下看图说话啊,那接下来呢,那咋更新呢,是不是得掉render啊,啊,那再往下呢,那就更新完毕了呗,那所以说你看它这个名字叫component did update同学,你觉不觉得其实这个东西是有规律可言的,都是component will怎么怎么地,Will怎么怎么地,然后都是date怎么怎么地,Date怎么怎么地,对不对?哎,那我们验证一下,这个叫做component date update回到代码当中来,那咱写一个。
10:51
Component,对的,Update好来,在这输出复制走,名字改一改,好嘞,来吧,整体捋顺一下啊,我去调set state的时候,目前我所写的是阀门开启就能往下走,这个得掉,这个得掉,这个得掉是吧?哎,来吧,那咱看看啊,回到案例当中,一刷新肯定是这四个对吧?构造器将要挂载render,挂载完毕,清掉,接下来我点加E走,你同学十的component update是不是执行了?哎,那些怎么没走呢?啊,回头来看看吧,那阀门啊,多半是让我关了是吧?哎,TRU这回给它开启,这回咱再试试。嗯,回到这儿呢,刷新一下,这是刚开始了哈,哎,清掉来,点我加一走的同学问一下阀门让我往下走吗?阀门说true可以往下走,那我就将要更新喽,那我就调render去更新呢,那我就更新完了呀,好了,哎,那这是。
11:51
什么呢,一个更新的过程,对吧,把这个注释呢,也给大家补好了,走组件更新完毕的钩子,什么什么的钩子,那就是在什么时候去掉,对不对?好同学,那我问一下,我就偏偏要把组件更新完的钩子提到最上方,我就写在这儿,难道它就掀掉吗?当然不是,你就算放在这儿,咱之前也说了,同学。
12:20
咱俩上来就掉,不会的,你只管去定义它什么时候掉,不由你,那谁在操控呢?React好给这呢剪切走,咱还是按照顺序把它呢放到这个里边,好,那咱就把哪个流程演示完了呢,就是set state这个流程A就带着大家走完喽,那你要说卸载,那当然那不用说了,那你清掉这儿,你卸载组件,那肯定是view mount嘛,啊好了,同学,那这小节呢,我们听一下我们走的哪条线呀,走的这条线对吗?哎,刚才画的是橙色的,来再来一下啊,诶,是这条线对吗?好,这小节停。
我来说两句