00:00
好了各位,那接下来呢,我们学习react中最为重要的一个概念叫组件的生命周期,可以这样讲啊,同学,如果说你学了react,但是你对他的生命周期一无所知,那约等于你没有学react,所以说特别重要,那接下来呢,我用一个案例去把生命周期这个概念给大家引出来,大家诶知道了这个概念之后,我们再去探讨一下它的生命周期都分为哪些环节,所以说在这一小节呢,我们只是把生命周期这个概念引出啊,所以说大家呢,也不用有太大压力啊,我们看一下这个案例啊,我先说一下啊,页面上呢有一句话叫react学不会怎么办啊,然后下边呢,有一个按钮叫不活了啊,这咱开玩笑的说啊,同学梆,听了这课之后呢,发生一些这个人身安全问题啊,同学,首先啊,这个红色的文字啊,在逐渐的变淡,其实我们在更改它的透明度,刚。
01:00
开始透明度是一,然后逐渐的呢,哎,减一点,减一点,然后往零去靠近,当它变为零的时候,那它就完全透明了,就从你的视线中消失了,那这个时候啊,同学,它会瞬间再把自己变成一,然后再逐渐逐渐逐渐往零靠,如果到了零就会再一次的瞬间把自己变成一,然后再逐渐逐渐往零靠,也就是一到零的过程呢,是一个递进的过程,但是零往一来是瞬间就回来的,OK,就是这个文字,那咱再说点按钮啊,同学,这按钮呢,就不活了,不活了什么意思呢?就你点这按钮啊,就把当前这个组件从页面上干掉了。哎,整个这是一个组件,同学注意看啊,这整个是一个组件,哎,当你点击不活了,整个蓝色框,这个组件呢,就被你从页面上干掉了,诶就这么一个简单的小效果,我们整体看一下啊同学,这是干掉之后的,来哎,变淡诶再变蛋,点击不活了,走东西就没了,哎,就这么一个简单的小效果,来吧,把这个关掉,回到我们的代码当中,这文件夹啊,文件呢,我就都已经建立好了啊,这文件的名字就叫做引出生命周期,因为咱不讲别的,就引出啊来吧,走第一步呢,肯定是创建组件,好同学,你觉得这个组件叫什么名字合适呢?
02:22
在掩饰生命周期相关的,对吧?其实同学咱叫DEMO是不是也行,那我叫这个词儿吧,Life啊,有生命的意思,因为我在掩饰这个生命周期嘛,啊,那固定的结构呢,也得写上啊,是不是得继承啊,react.component render也是要有的,Return得有返回值,一个多级的结构吧,那给它包裹一下呗,走,里边包含着一个标题,我就用个H2吧,啊,叫做react。嗯,学不会怎么办?那这再来一个按钮把它啊叫做不活了。嗯,好,组件呢,就定义完了,先别考虑那些交互的事儿,先写一个静态的走第二步呢,就是渲染组件,Black do,点软点,渲染的是这个组件,往容器里边放好右键。
03:23
打开看一下效果。OK,哎,出来了,React学不会怎么办?哎,这又不活了,我把控制台呢也打开来吧,接下来加交互,老师先加哪个呢?同学,先不做复杂的,先做简单的就是点击这按钮啊,能把这组件从页面上干掉就没了,把这个组件从页面中移除了。诶,那首先呢,回到代码当中,你肯定会得考虑到给按钮加点击事件啊,On click等于那不活了,我就用这词了,Death啊,死,这听起来有点可怕哈,哎,定义一个死,嗯,那得是复值语句加减的函数,这就不说了,同学这要干嘛呀?
04:05
你得编写一些代码,是不是把这个组件从页面上干掉啊,同学,好像咱们一直在学这个,就如何把一个组件渲染到页面,是不是得用react到点render啊。哎,同学,那你说从一个页面上移除某个组件,那这得怎么写呢?是吧,渲染式叫render,那移除好像还没教过大家呢,对吗?哎,那同学别急,接下来呢,说两个词儿,你说这个组件呀,是不是放在页面上了,咱总说渲染组件到页面啊,把组件放在页面上,其实还有一个说法能说的更官方一点啊,叫做把组件挂载到页面上,挂载同学,那打开我的白板,跟大家说一下这个词啊,这么一个词儿叫做挂载,诶挂载它的英文单词呢,叫做mount啊,那有挂载,其实就还有一个概念叫卸载。
05:06
哎,咱就咱刚才说的说把这个组件从页面上干掉,其实你所谓的那个干掉呢,如果官方点说应该叫卸载,卸载呢,就是在这个词的前边呢,加个UN表,否定mount就是卸载。周老师,这概念是你说的,不是官方有打开react文档找到这儿,呃,核心概念state与生命周期,咱先不看它官方所描述的这个生命周期这些案例啊,我们往下找,主要是让大家看那个词儿,嗯,往下往下往下往下,诶在这儿呢,你看啊,这clock他写的不是life啊,他写的是clock,说当clock组件第一次啊被渲染的时候,怎么怎么地说开启了一个计时器,咱不不看这个啊,这在react中被称为挂载。哎,所谓的组件放到页面以后,别说放到了,说组件挂载英文单词mount,那么同时当do中把这个clock组件移除的时候,我们不说移除,说什么呢,说卸载,哎,叫做on amount,哎,同学就是俩词儿啊,就换了一种说法而已,OK,好了,那给这个呢,给它关掉啊,这个留着一会儿咱还得看啊,所以说挂载叫mount,卸载叫ARM amount,好了,这个概念直接过了,说老师那这儿,诶写上应该叫做卸载组件,那怎么卸载呢?同学直接说啊,因为咱没学过,我也不让你猜了啊,React do渲染叫render,那么卸载呢,就直接写UN mount卸载。
06:37
但你要直接这么调啊,不行,同学,那你想如果我页面里边有十个容器呢,十个容器里边分别放着十个组件呢,你这一卸载到底是卸载谁呢?对吧?所以说他那API不叫amount,它的名字稍微有点长啊,同学叫amount component component啥意思啊,组件啊,说老师那叫这个卸载组件也不是,同学你想想你有这么多的容器,是我现在只有一个,那如果你的页面复杂,你有很多的容器是不得,你说明白是哪个容器里的组件要被干掉啊。
07:14
因为容器是多个的对吧?哎,所以说还得接着写,叫on amount component at node,在哪个节点里的组件要被卸载?哎呀,说老师,这么长啊,同学,你发没发现它长归长,但是挺好记的,卸载组件在哪个节点里?OK,是这个方法哈啊,说老师,我得刻意去记,不用写多了,自然而然就记住了啊,等我们切到脚手架去编程的时候,有非常棒的提示,OK啊,同学,哪个组件里的呀?啊,哪个节点里的是吧?哪个节点里的test?那那你就需要来告诉人家啊,那是test,诶,别这样写,写的完整一点对吧,你得拿到这个节点嘛,Test,诶,就跟你在这一样,别直接写test嘛,对吧,告诉人家到底是哪一个好,说老师,那这就行了,试试呗,回到页面中点击不活了,OK,组件是不是没了?哎,同学,截止到这儿呢,你学会了一招,就是如何卸载一个组件,好了,接下来我们把那个交互给它加上来,刷新一下它就出来了。
08:14
这叫挂载,这叫卸载,好了最后说一遍走,接下来呢,让它的透明度不断的发生变化,同学,我问一下啊,页面里有没有东西在变啊,有也就是页面有更新,对吗?同学,谁能驱动着页面的更新,或者说页面的显示啊,是不是状态中的数据啊?哎,只要页面有东西在动,你肯定得是状态中的数据驱动的,对不对?那所以说回到代码当中,接下来我得定义状态了,状态里边有一个东西持续在变,是不是透明度啊,那所以说我就直接用这词了,OBS啊,那一上来呢,它得是一对吧,完全显示的,那怎么能让这个状态中的OB能控制这个HR呢?那非常简单,在HR里边是不是可以写一个样式style,是不是得用双划括号的形式,之前咱聊过对不对?哎,改它的OB复制过来走,OB说老师我写个0.5,你这就写死了,你得从状态里读出来,所以说this点。
09:14
state.op好,我们试试啊,能不能读出来,你先给个0.5,看看它是不是变成了半透明的样子,回头确实半透明,你要给个0.1呢,那肯定是特别特别淡了,但是微微能看出来一点,对吗?好,那刚开始呢,肯定是一,接下来我们干嘛呀?哎,我得让它不断的发生变化,对不对啊同学,我给你出道数学题啊,这个东西呢,刚开始的透明度呢是一,最后呢,它的透明度变为了零是吧,那变换是不是有时间啊,看一下课件啊,同学走课件上说呀,从完全可见到彻底消失。一共耗时两秒钟。你思考这个问题啊,从完全可见到彻底消失耗时两秒钟,那么完全可见是不是一,那么彻底消失是不是零?好了,这道数学题呢,出来了,刚开始是一,最终呢,变为零,总共耗时啊,两秒钟,那你说我是不是得开启一个循环定时器,每隔多长时间?哎,让它减少那么一丢丢,那如果我告诉你了,是每次都减小0.1。
10:29
那你告诉我定时器那个时间我得怎么给?再给你说一下啊,刚开始是一,最终是零,由一到零总共耗时两秒钟,而且每一次都减小0.1,请问循环定时器的时间我怎么给?这道题可神奇了,同学在线下讲课的时候哈,就讲这个案例,咱同学都得算一会儿,同学你说循环定时器的时间是不是应该给200毫秒啊是吧?你自己下去琢磨琢磨这事儿啊好了,同学说老师那就行了呀,我就写一个循环定时器不就得了吗?啊,每隔200毫秒让这一呢,就减小0.1,那不就得了吗?啊,那倒也是哈,来写吧,写一个循环定时器,哎呀,他咋报错了呢?同学,什么情况?
11:15
朱老师,是因为这个变量它找不见啊是吗?那我写上200毫秒他咋还报错呢?哎,同学再次强调,你是在类里边写代码啊,类里边不能随便写代码的,同学还记得吗?类里边都能写什么呀?来打开类的基本知识,同学,类里边是不是能写构造器,OK,类里边是不是能写自定义的这些方法,OK,类里边是是能写赋值语句。OK类里边是不是还能写static声明的这个复制语句对吧?别的还能写吗?不能啊,它不是你的函数题,你怎么能随便写呢?哎呀,所以说这个定时器好像我不能写在这儿对吧?啊,那咋办呀,带走呗,反正写在这儿他不让了,那你说反正现在摆在你面前。
12:02
一个这个一个这个,同学他俩是不是都是函数啊,那函数题里面是不是能写随意的代码啊,那我问你,你说你把这定时器你放哪儿了,你放这里,同学那你就琢磨琢磨这个death是干嘛的,你执行death的时候,肯定是你点了这个不活了这个按钮,同学你都点不活了,这个按钮是不是已经这东西就看完了呀?啊在他不活了的时候,你把定时器开起来,那还有什么意义啊,所以说好像不能写在这儿对吧?那逼着你没办法,是不是得写在render里啊,说老师那我就写在这儿吧,写在return的下方,同学你写在return的下方可不行,那函数都遇到return了,后边的代码还能再执行吗?不能了,哎,那所以说同学目前我们好像也没有别的办法了,那是不是也只能往这儿写了呀?对吧?哎,好了,那缩进呢,我们调一下,哎,来吧,同学,那你说在这里边干嘛呀,每隔200毫秒你都要去状态里边取一下现在的透明度是多少,把当前透明度减小0.1,然后再利用set state,把减完0.1的值再复回去是不是就可以了?哎,所以说来慢慢写着,第一步就是获取原来的啊,或者原状态走,那怎么写呢?Cost,然后z.state获取谁OB走拿到了吧,那接下来呢,哎,减小0.1呗,减小0.1,那咋减小啊,OB减等0.1是不是就可以啊,但是你要写出这种代码就会报错,因为cost声明的变量不能再改了,所以说这呢,咱别用cost,咱用谁啊,咱用like OK,那再往下,那就最后一步了,是不是设置新的透明度啊?哎,设置新的透明度啊,或者说呢,设置状态,哎。
13:49
或者是那个更新状态都行是吧,啊来走呗,嗯,This点儿set state,那么你要修改的状态是啊,OB,那你那值是啊这的,那你觉不觉得同学。
14:05
对象里的K和保存这个K所对应Y值的那个变量啊,它同名了,是不是就触发的对象的简写形式,我是不是这么写就行了呀?OK,同学,你这么写有点小瑕疵,你这么写就是10.90.8,它确实一点一点一点在减,同学,但是它会出现负值,也就是说到了零之后,它还会继续的减下去,你说是不是不太合适啊,那所以说同学们,我们这是不是得来一个判断呀,如果怎么的我就做什么。如果有一天你的OB说老师这么写它等于零了,然后你就把这个OB啊,就给它变成一,这么写不太好,为啥呢?同学我们都知道啊,在GS的世界里,0.1加0.2呢,其实它是不等于0.3的,所以说G操作小数的时候,理论上啊,10.9 0.8肯定能到零,但是有些时候它不一定到零,可能呢是直接就小于零了,所以说这呢,别写这个啊,你怎么写呢,小于等于零。
15:08
啊,如果你的透明度等于零或者比零还小了,我就重新瞬间把你打成一,然后呢,诶,我再给你付回去。啊,同学来捋顺一下定时器是不是在这开的呀,说老师我觉得在这开也挺合理的,你看啊,老师第一次组件是不是得挂载,那组件挂载就得出现一个life的实例对象,然后react,就通过这个life的实例对象点render就调用到了render,然后呢,诶,定时器就开启了,你看每隔200毫秒呢,拿到透明度减小一丢丢,再放回去,那你看页面不就开始变化了吗?嗯,分析的都可对了是吧,那我们看一下效果啊同学注意,现在我还没保存呢啊看这我还没保存呢,我一保存页面就有效果了哈,我先把这页面关掉,同学来我保存,这个时候呢,瞪大你的眼睛,咱们仔细去观察啊,来打开这个页面走。
16:01
逐渐变淡。但是啊,同学。这东西有意思了,你觉没觉得它的频率越来越快,越来越快,已经不是你想要的那个样子了,同学我刷新一下,刚上来还是正常的走,哎,变带哎,然后就开始逐渐逐渐逐渐频率就加快,哎哟,这什么情况啊,其实同学如果你好奇呢,现在你打开温度监测软件,你电脑的温度应该是一路飙上去的,你看呢,我先把浏览器关掉,嗯,那我这个监测软件呢,诶在这儿,同学你看一下啊,目前我的CPU温度呢,是89度,那你稍等一会儿,同学咱不差那几秒钟啊,现在是不是82了好。再等会儿呢,应该还会降一点啊,虽然我现在在录屏讲课,给大家录这视频,但是也不至于电脑的温度就一直八十多度,正常的待机可能就60多度啊,等等,可能今天不给力了哈,70多度行,就这样同学啊,注意观察我打开页面,好打开我什么也不做啊,就是打开页面,这些东西不断的在闪,不断的在闪,你观察CPU的温度是一路飙上去的,现在是81等着啊同学,等等85你再等啊,它就直接奔着90去了啊,看一下那效果啊,走87,哎呀,再等会儿啊,这也心疼自己电脑对吧,但是得给大家演示这个问题,89了,你再等这个温度会一路的就飙上去啊。
17:24
89,诶,再上一个啊,行了,咱就这样吧,啊反正哎看上90了,那赶紧关掉啊,赶紧关掉,同学,怎么就产生了这种类似于鬼畜的效果呢?什么情况呀,同学你引发了一个无限的递归。哎,我给你捋顺一下,同学,我问一下render什么时候调用啊。第一次挂载是不得调用,以后只要你修改了状态,Render是不是也会再次调用,所以说我们的总结是render掉几次,是不是一加N1是哪一次初始化显示哪一次N呢?那我得看你改几次状态对吗?你只要改状态react就帮你重新调render。同学们你想吧,Render不调页面怎么能出现一个最新的效果呢,对不对?
18:15
那你这么写就有意思了,同学来分析一下,页面一上来react帮你扭了一个life的实例,然后通过这个实例点render就调用了,然后一个定时器呢就开起来了,注意定时器每隔多长时间执行200毫秒,随后呢,就有return了,然后呢,哎,就拿到了一些结构就展示到页面了。同学,你千万不要忘了,这个定时器是循环定时器对吗?是不是每隔200毫秒执行一次呀?你注意啊,你在定时器里边做了一件事干嘛呢?同学我就问你37行代码在干嘛,是不是在改状态啊?哎,同学你改了状态会怎样啊?哎呀,老师他调render啊,所以说你分析吧,你第一次调render的时候,开了一个循环定时器,循环定时器每隔200毫秒执行一次,每隔200毫秒执行的那个函数里边又包含着更改状态的动作,你一改状态,同学你觉不觉得又一个定时器就开启了呀?
19:14
所以说同学你注意看,我在render里边给你来一个consolo,我输出render,你注意观察看看这render输出几次,右键打开切到控制台来,同学这个render调用的次数疯狂的在增长,而且是一个指数形式的增长,就是那种指数大爆炸那种形式,这是一个坐标,就是诶一直就到后期都逐渐趋近于直线了,就直接就往上去了,同学你看谈笑间就8000多次了,就奔着1万去了,那就是因为呢,同学定时器里边你特别不和谐的,你又写了一个诶更新状态的这一个动作,你只要更新状态,我就调render,一调render就开启一个定时器,定时器每隔200毫秒怎么办?掉回调,那回调里边又更新状态,同学不多说了,你觉不觉得你引发了一个无限循环的递归呀,而且这个递归是越来越快的,对吗?所以说同学一句话,定时器放在这儿合适吗?不合适那怎么办呀。
20:15
同学,你刚才为什么想到要把定时器放在render里呢?是不是因为你考虑到了一个事情,页面想呈现效果?我是不是就得掉render,那你掉render正好我就开一个定时器,那这不就得了吗?但是万万没想到render它不是掉一次呀,同学你说刚才产生轨畜的效果,是不是因为render是调用多次的,那所以说定时器放在这不合适,那怎么办呢?剪切走啊说老师那放在哪呢?哎,我先把这个监控软件呢给它关掉,我说那放在哪儿呢?同学你说我这么弄一下能不能行呢,就在这儿再来一个按钮就开始变化。啊,然后这呢,Action对吧,哎,动作开始是吧,Action,然后说老师我在这来一个action,就把刚才那些代码我都写在这。
21:08
人家老师你看我一点开始变化,我就保证我只点一次,对吧,老师刚才他产生鬼畜不是因为render掉了多次吗,就开了多个定时器吗?那这回呢,我的手能忍住,我就点一下就开始变化,就点一下,所以说定时器开了几个一个。哎,说老师这不就结了吗?那你看一下效果呗,右键打开。现在是不是不变呀啊,你打开控制台啊,看万一他有什么错误啥的呢,同学点啊,开始变化123走你看哎,逐渐变淡。淡出你的视线之后迅速的再回来,是不是正是我们想要的效果呀?那你看render同学,你看频率非常200毫秒一次,200毫秒一次对吗?但是你这么写不太对,我的意思是一上来他就能自己开始变化,而不是说我非得自己点一下开始变化,同学你说现在咱们好像要一个时间点,你觉不觉得这个时间点是只要组件一挂载到页面上,注意以后别再说放了,说挂载我想要的时间点,同学你说是不是这么一个情况,就是只要这个组件挂载到页面上了。
22:19
然后呢,就去开启这个定时器,你说是不是在这个时间点呀,其实同学你想想你自己啊,手动去触发这个是不是也是这个逻辑,一刷新组件,同学你说组件你能看得到,是不是组件已经挂载到页面上了,只有组件挂载到页面上了,你是不是才有机会点这按钮啊,哎,同学我能不能不点呢。对吧,React能不能帮我们去做呢?我能不能找react聊一聊,我说兄弟我想麻烦你个事儿,就一会儿呢,你把这个组件挂载到页面上之后呀,就你如果确定你挂载完了呀,你帮我开个定时器呗。能不能有这个动作呢?它有没有这个设计呢?其实是有的,同学,那接下来呢,回到代码当中,Render啊,我们都说正是因为它掉的是一加N次,所以说定时器不能往这儿开,那同学我跟你讲啊,Render呢,有一个兄弟。
23:16
这个兄弟呢,他只掉一次,而且什么时候掉呢,就是你所期待的组件一挂载到页面上,哎,就去钓说老师,那谁帮我调呢,React帮你调。Render咋掉的,他那兄弟就咋掉render咋掉的呀,是不是通过life组建的实力对象点render啊。同学,你还记不记得了,我当时在给你讲组件的定义的时候,这有一个类似组件,同学你记不记得,我们说了一下这个流程,就是说react解析标签找到了my component组件,随后呢,发现是用类定义的,然后又出来了一个该类的实例对象,通过这个实例对象调用到原型上的render方法,然后咱就说页面有东西了,哎,呈现了是吧?同学们,我给你讲啊,就在第二步啊,他做的事其实很多的。
24:07
同学,他确实通过这个实力点render掉了render,其实他还通过这个实力点掉了一个别人,就是render的一个兄弟。而且他调render兄弟的时候只掉了一次,而且咱说的那时间点就是在组件挂载到页面上之后,那说老师来吧,Render那兄弟叫什么名字呀?是不是叫做RENDER2啊,不是你就笨想他怎么可能设计出这么low的API呢?RENDER2是吧,也就只能出现在咱们的测试代码里了,同学,定时器带走按钮写吗?不要写挨症要吗?不要,接下来我给你说说呀,他那兄弟叫什么名字?他那兄弟俩名字可挺长的,嗯,我先写着,Component啥意思?组建来个词儿叫date date啥呀,是不是英文单词这个do的过去式啊,Did是不是完成的?哎,已完成的吗?啊,有同学说老师你这英语读的不标准,应该叫做did啊,行,哎,Component did。
25:09
然后后边再来个词,Mount mount啥意思呀,挂载直接走,同学说老师啊,你犯错误了,你不对,你这自己定义的,你得写赋值语句加箭头函数的形式,就像这个代一样。不,我不用像death这么写,因为它跟render是兄弟,因为这个函数后期是通过life的实例对象点调用的,我根本就不用这么写,他说老师,那当时我们为什么这么写这个呢?同学,那我问一下你这个death怎么用啊,是不是作为一个事件的回调在用啊,你作为事件的回调在用,那this指向是不是肯定丢,那所以说是不是得写赋值语句加箭头函数的形式,但是我这个东西跟render是同一个级别的,是由react弄出来这个life的实例对象之后,直接借助这个实例对象点render,然后之后再点component amount去帮我调的,所以说呢,我不写复制语句。
26:09
我也不写箭头函数,直接这么写就可以说,老师那它什么时候掉呢?你就听这名啊,同学组建完成挂载。所以说同学们render调用的时机呢,是两个啊,Render render调用的时机是两个,初始化渲染,还有什么呢?就是状态更新之后是不是得掉render,那么这个呢,同学它只调一次,Component data amount,那就是组件挂载页面之后调用,但我们精简一下这个代码啊,我这么写叫组件挂载完毕是调用,那么render什么时候调用呢?我也不在前边写这个了,就是两个时机,初始化渲染和状态更新之后。
27:05
说老师,那也就是意味着这个东西它只叫一次,对不信你看一下,我在这个里边进行一次conslo输出,输出一个艾特服务,这时候你回到页面里看同学,哎,咋样,艾特符是不是输出了,而且只输出了几次一次,好,那你就应该把定时器是不是写在这个里边呀,走定时器来,同学你看你捋顺捋顺组件,只要跑到页面上去了,React说哎呀,兄弟,你看我把这个组件给你挂载了,但是你刚才不是写了这个吗?Component did mount吗?那好了,我帮你调一下这个函数。说老师里边的this不会有问题,不会的,因为是实力点调用的对吗?所以说保存回头悄悄同学来对吧,你看一点一点变淡,Render的频率非常稳定,200毫秒一次,同学你觉不觉得你好像get到了一个新的时间点,对吧?哎,好说老师,那我就完成了呗,不是不是不是。
28:05
现在有一个问题回到这儿,接下来你点一下不活了。同学,组件确实被卸载了,但是一个错误出现了,我希望大家呢,好好的读一下这个错误,以后在你开发的时候呢,会经常遇到见他说呀,我不能够执行react里边状态的更新。为什么不能执行状态的更新呀?Unwanted component。这还写了一个on,啥意思,翻译过来,我不能够在已经被卸载了的组件里边再给你执行状态的更新了,那就说白了,哥们儿组建都没了,被卸载了,那你还更新什么状态呀,对吧?哎,开玩笑的说,同学啊,地球都没了,你说咱们是吧,你说老师这咋办呢?同学,本质原因你说是不是这么回事儿,你这定时器啊,自打开就没关过,对不对啊,组件一旦挂载到页面上了,你在这个呃,函数里边写了一个我要开定时器,是定时器开了,我问一下这定时器你关过吗没有,后期你点了不活了,我问你组件是不是都被卸载了呀,定时器还在这跑呢,定时器还在这更新状态呢,那所以说同学是不是得清空定时器啊,那问题是什么清空最合适啊?
29:29
对吧,什么时候轻松最合适啊。说老师我觉得呢,就是我点那个按钮的时候,在我卸载这个组件之前啊,我先做一件事就是清空更新状态那个定时器,诶确实是这样的,来写一下清空啊,或者说这个清除是吧?哎,定时器来吧,清除咋写呢?说老师那clear对来走clear interval,那主要是你得拿到定时器的ID,你是不是才能清除这个定时器呀,老师那我那你说你这怎么办吧。
30:01
哎,同学慢慢来,我问一下啊,这个是不是叫做component amount,这哥们的级别跟render是不是属于同一样同样的级别,因为他俩是兄弟吗?对吧?同学我问一下component data amount咋调的呀?刚才跟大家说了,是不是它的实力点调用的,说以说里边的this有问题吗?纸箱没有,哎,那我这么写什么意思呀?this.r等于就把这个定时器的ID挂在了组件实力自身上,对吗?好,那你说我在清除定时器的时候,由于这个是事件的回调,而且你还写成了赋值语句加箭头函数的这种形式,里边的this有问题吗?没问题。那也就是意味着这个里的this是life的组件实例对象,这个里边也是呗,啊对呀,那所以说我同样可以拿到这个东西,对吗?Timer,那这回呢,你再来看一下来走学不会怎么办?开始发生变化,走不火了,诶同学怎么样是吧,组件被卸载了,而且定时器呢也停了,其实你还可以换一种方式,同学来,刚才我写了component data amount这玩意什么时候调啊,组件挂载完毕之后是不是调用?
31:10
那render什么时候掉呢?还说初始化的时候啊,还有状态更新的时候,同学你说如果有这么一个函数。这个组件呀,知道自己啊要被卸载了,在我马上就要被卸载之前,我帮你调那么一个函数,那你觉不觉得你在那个函数里面可以做一些收尾性的工作。哎,就有点像人临终前那种感觉,有同学你猜一下呗,你眼睛瞄着32行,你告诉我44行那个函数它可能叫什么名字,就是组件将要被卸载了。直接写component will代表将要mount呢叫挂载,Mount呢叫卸载,好那么这个函数就是组件将要被卸载的时候调用,注意啊,还没卸载呢,是将要卸载view吗?将要组件将要卸载啊,将要卸载view amount吗?所以说你可以把清除定时器这个动作呀。
32:20
放在这儿它也是可以的,好,那我们试试哈,同学来到这儿啊,学不会怎么办?点击不活了,定时器是不是也停了?有些同学呢,可能会纠结,老师为什么非得要写它,我在这里边儿关闭这个定时器,它不香吗?你写在这完全可以呀,同学我没说不行,但是我为什么要写在这儿,我不是要给你讲这个函数的。调用时机嘛,对吧,不要给你讲那函数嘛啊,OK,所以说同学你觉不觉得其实事情并没有我们想的那么简单,调用render直接展示组件,确实,但是调完render之后,它还会再调data amount,而且在组件马上就要被卸载之前,它还会帮你调谁呢?
33:11
同学,你注意啊,如果你把这单词写错了,你比如说unt,你写成了T。极其有可能出现这种情况,那这个时候你发现说老师那估计也能用吧,不可能的。同学,你看不变了,老师,为啥呀?同学react给你的承诺是组件挂载完毕了,我就帮你调用component data amount,人家帮你调这个你写了人家就找到了,人家就帮你调了,但是如果你名字写错了,同学,那你觉不觉得就跟你在这儿自己定义一个哈哈函数是一样的效果呀。咋的?React还帮你调一下,哈哈,不是的,名字不能写错,React的承诺就是我能帮你调这些特殊的函数,但是名您别写错呀,你写错了我怎么找呀,是吧?啊,还有这view amount,大家在这儿常犯的错误就是这个M大写了,M不要大写啊,M是小写的,Amount是一个单词小驼峰嘛,对吧?哎,那同学你觉不觉得其实除了render还有很多细节上的问题,你觉不觉得同学这两个人我讲完了之后,你或许能猜得到,老师好像明白了,在这个组件整个哈往页面上放的这个过程当中,好像react一直在一个合适的时间点。
34:30
去干一些合适的事儿,你就比如说同学页面想出现组件,想挂载到页面上啊,这个组件是不是得叫render,那么只要组件挂载完了,React自己心里明白,哎呀,我挂载完了是不是帮你调data。哦,当这个组件马上就要被卸载的时候,React心里边也明白是不是帮你调了一下component,有呀,同学,你觉不觉得这就是组建的一生啊,来到页面,然后呢,将要离开,对吗?哎,同学,那你觉不觉得这就是人的一生啊,也是。
35:07
我们给大家写了一个例子,来到这儿,我其实呢,偷偷的放在下边了,我把这个呢剪切走,同学,你觉不觉得人的一生也是这样的呀?诶,你将要出生了,那干什么事儿啊?啊,不说你啊,就说一个人将要出生了,那你说父母是不是得,哎琢磨一下起名字呀,男孩叫什么,女孩叫什么,那你说你都出生了,那是不是得买一些哎婴儿用品等等这些呀,然后你就很多是你的这个整个一生,一生中啊,你这些关键的时刻了,你比如说你会说话了呀,会走路了呀,上小学了呀,你父母可能给你写一个成长的日记,是不是都把咱们的信息记录在里边啊,哎,哪年哪月哪日是吧?哎,我姑娘哎或我儿子第一声叫我爸爸,叫我妈妈是吧?哎,同学,你觉没觉得同学这些都是你人生中的关键时刻呀,在关键时刻我们是不是一般做一些事情啊,那当然还有一个就我们都不太想面对的,就是哎呀是吧,不说你说我是吧,还病危了,你就不得交代点后事啊,同学你觉不觉得啊,这个出生了就相当于刚才我写的那个什么东西,Component,那你觉不觉得同学这个病危了,同学注意啊。
36:20
可没说凉了,就说彻底玩玩完了啊,我可没说这个啊,我说的是病危了是吧?还没那个啥呢是吧?啊,还没乘风归去呢,来,是不是有点像我刚才写的component will amount呀?哎,同学组建的生命周期呢,其实就是人的这一生,哎,在关键的时间点,人去做一些事儿,那么react的生命周期就是在一些关键的点,我帮你去调一些特殊的函数,让你在这个函数里面完成一些特殊的事情,你比如说一挂载的页面开定时器,你比如说即将要被卸载清空定时器,我们就把生命周期给引出来了。
37:05
啊,OK,那么关于生命周期呢,有一些说法,我跟大家呢强调一下,标准来说应该叫做生命周期回调函数,同学,你不觉得是这样的吗?你只要写这个函数,你只要写就行,React会在一个合适的时间点去帮你调这个函数的。啊,所以说我们叫做生命周期回调函数,因为这个函数是你定义的,但是你没有调用,React帮你调了,最终它执行了,是不是回调函数啊,有的时候呀,我们也不说这个概念,有一个概念呢,跟它是等价的,有可能呢,人们还这么说,叫生命周期钩子函数,说老师为什么不叫回调叫钩子呢?就说的形象一点,React会在一个合适的时间点把这个函数勾出来执行一下,React每天都在干活是吧?哎,很忙,组件帮你挂载到页面上了,哎呦喂,组件挂载完了呀,那就把component data mount这个函数勾出来执行一下,所以说我们也叫做生命周期钩子函数,那还有这么说的就更简单了,叫生命周期函数啊,也是一样的概念,那还有最后一种叫法,叫做生命周期钩子以后有。
38:31
有人说这些东西的时候,那全都是一个意思,那我们就把生命周期呢给大家引出来了,那么大家可能会好奇了,说老师那只有这三个吗?挂载完毕,将要卸载和初始化,不是还有很多,我们在课件里看是不是在这儿呢?哎,那么在下一小节我们就详细的探讨一下这些时间点,以及这些时间点分别调用哪些生命周期钩子,OK,那这一小节呢,我们停一下。
我来说两句