00:00
课开始我们学习react最重要的一个概念,生命周期啊,可以这么说,如果我们不理解生命周期,那么等于这个没有学啊,所以生命周期在react中是非常非常重要的一个概念,那我们来通过一个例子来演示,也就这么一个例子啊,就是它这个字的这个透明度啊,会随着这个。这个时间哎,不断的从透明度从一一直降到零之后再变为一啊。这是一个效果,那还有一个效果什么呢?就是当我们点这个按钮的时候,诶,就会把这个组件从这个页面中给干掉,诶你看一点没了,诶我们接下来就完成这个例子来,首先啊准备一下我们的这个文件。新建一个。零七啊,组件的生命周期,哎,在里面我们新建一个零一。啊,引出生命周期,也就是说哎,这节课我们不对这个生命周期做更多的一个讲解,就是通过一些例子,我们把这个生命周期的概念给引出来,哎,来,接下来随便去啊,复制一个。
01:14
文件啊。啊,改改引出生命周期。把这个也改了啊。这些都不要啊,只要我们要引入的一些,哎,核心的库,那接下来去想一下我们的例子,那首先第一步创建组件对不对。来,我们来创建一个啊生命周期,我们用life吧,哎,创建一个life的组件来继承react。Component。Render方法。
02:01
啊,那我们给它包裹一个div。有一个H3,嗯,遇到烦恼怎么办是吧。哎,这下面有一个八寸。哎,忘了他好,最后第二步。诶,把这个组件渲染到页面啊。来,React。到点re,挂载我们的life组件。然后到。Test这个容器。右键刷新一下。诶,我们的例子有了对吧?好,但是现在它没有这个透明度,我们的透明度可以用,嗯,CSS的那个op那个属性控制是不是我们来写一下啊,但是它的这个透明度呢,它是可以去变化的,哎我们之前说过,那什么样能让这个组件就是说发生变化,是不是状态,哎状态驱动的页面的一个呈现。
03:15
对不对,所以我们要把这个属性呢,给它定义到这个状态里面诶。我们来定一个状态啊。哎,这个哎,我们先让它等于一,然后在这里面我们写style啊,Style呢要用双划括号啊,第一个划括号是这里面我们要写GS的表达式的,诶第二个划括号是它要接收就是style,它要接收一个什么呢?接收一个对象对吧?那对象就是KY6,也就是我们的这个塞的属性,KY6,那我们写什么属性呢?这个属性诶它等于谁呢?它的值就是我们S,这里面放的是this。点。好啊,接下来我们看看,我们把它先改成这个0.5啊。
04:02
看一下这个字会不会透明啊。刷新一下。哎,是不是透明了,那我们接着把它改成0.1,再看一下效果啊,0.1是不是更透明。哎,是不是更透明了,好,也就是说,哎,我们让它一开始是一对吧,呃之后呢,呃,让它随着这个时间的变化去不断的变淡,哎,这个我们先放一放,我们等会儿再写,那我们先写什么,先写我们点击这个按钮。哎,就把这个组件从页面干掉好吧?啊,那既然是点击按钮把这个组件从页面中干掉,那么这里是不是要给一个点击时间啊,可立克。来,This第二。Forget。接下来定一个这个方法啊。用赋值语句啊。键复制一句加箭头函数,哎,在这里我们要干什么?是不是卸载这个组件,就是销毁这个组件,哎,卸载这个组件对吧?那我们为什么用卸载呢?因为官方也是这么去说的啊,其实我们这里一直在说把组件去渲染到页面,那其实官方的说法应该是把组件去挂载到某个容器上面。
05:24
清楚吧,啊,我们来找一下这个官方的这个概念啊,在这个核心概念里面。嗯,找到stay和生命周期啊,这个我们先不看,我们先往后去找啊。找到哪儿了?找到这里啊。大概在这儿。诶,在这儿你看。哎,这个例子它是桃例子刃,我们不看,我们就看后面啊。这个哎,就是说第一次渲染的时候,这在react中被称为挂载,看到了吧,哎,如果当这个组件被删除的时候,这个时候就是被称为什么卸载。
06:03
清楚了吧啊。来我们来看看代码,也就是说我们这里是把组件其实是挂载到这个页面上,对吧,那有挂载就有卸载。对不对,好。那我们这里啊,挂载我们使用的哎,Record do,哎render方法,那卸载我们来使用什么方方法呢?哎,肯定有一个方法能让我们去卸载这个组件来想一下啊那。这个都是在和谁交互,和这个页面和do交互对不对,所以是不是这个方法应该也在他身上,哎,Relax do,那卸载卸载的用单中嘛,是不是啊moment对吧,那卸载谁卸载组件。对不对?好,我们一个页面有很多组件,那要卸载哪一个,是不是艾特node在哪个节点上的一个组件,哎,当然这个编辑器有提醒你如果用的不是这个编辑器,可能没有没有这样的一个提醒啊,诶at node哦,卸载组件在哪个节点上的组件呢?哎,我们里面传一个do对吧?啊,传哪个节点,那你不可能直接传T子对吧?你看下面我们挂载节点的时候都是传的这个DOM的节点对象对不对?所以这里也是一样啊,卸载这个,呃,指定这个盗墓节点上的啊,我们挂载的这个组件好,那好不好使呢,我们来。
07:15
刷新一下页面去试一下啊。啊,重新打开一个吧。好是不是好使的对吧。诶,这个我们卸载组件就写完了。接下来哎,写另外一个效果,哎,是不是我们这个字。来刷新一下啊,这个字它要随着这个时间的变化不断的去变段,对吧?我们把该准备的已经准备好了,因为能驱动这个页面,它的这个改变的话,只有组件的这个状态是吧?所以我们把它的这个样式已经放到了这个组件的状态里面,现在那我们要写的一个内容就是说啊,随着时间哎不断的去改变它的这个值对不对,那这时候我们可能会想到一个这个哎,计时器,哎,每段毫秒哎让它的值去哎进行一个减少,好,那我们现在一个要求,哎就是说啊,在这个两秒内啊,减少到零啊减少到零,对吧。
08:17
好,到零了之后,哎,到零之后再变为一,变为一啊,大家想一想啊,两秒内从一到零,哎,两秒内。从一到零对吧,那这个计时器我们这个单位应该写多少?哎,是不是写这个200毫秒对不对?哎,因为你要从两秒的时间,从一到零计时器,哎,每一次的这个时间执行时间,哎就是200毫秒,好接下来看一下我们计时是写在哪,我们能写在这吗?我们来写一下看看that。因此过是吧,好这么一个计时器里面一个三个写,哎直接可以看到,哎已经报错了啊,那第二个参数是单位,我们及时给上它还是报错,说明我们代码不能写到这里。
09:09
是吧,那我们写到哪里呢?哎,因为这个是类啊,这是class,这是类,Class这个类里面我们能写什么,能定义我们自己的这个方法是吧?能呃定义方法,然后还能什么,能直接啊赋值,哎,作为呃类实的这个属性直接赋值,但是不能直接这么去。呃,调这个系统的这个函数啊。所以说我们得有一个位置去放我们的计时器,那放在哪呢?你放到这儿,哎,你放到这那个函数题里面,那是可以写随便写代码对不对,你看也不报,也不报错了,但是这个方法是什么时候触发的,是我们在点这个哎忘记的时候才触发这个方法,那这个计时器明显就不生效啊。对吧,好。好,好像是没有什么地方写了,哎,这时候我们发现这个render是不是,哎,我们知道当。啊,这个react,它把这个组件去挂载到这个页面的时候,它会掉一次这个render。
10:04
是这样的吧,好来,我们把这个计时器放在这里,然后在这里面,哎,输出一个呃,一啊,随便输出一个一,这时候我们来看一下我们的这个计时器,哎有没有生效。打开浏览器刷新一下啊,打开这里可以看到啊,一直在走是吧,计时器生效了,那接下来的事情就比较简单了啊,那就在这里面去开始写代码,哎,写什么呢?也就是说呃,先获取。这个状态啊,原来的这个状态,然后我们去让它的这个值不断的去减少就可以了,是这样的吧,来获取这个原来的状态啊。嗯,从this.state去解释出来啊,啊,这个this肯定是没有问题的,因为这个render呢,它是这个left实例调对吧,This可以指向这个left这个实例,哎,所以可以用到这个啊,这个就不说了。
11:01
的,哎,之后呃,把注释给里面写清楚啊,获取原状态。哎,第二个啊,让它减少啊,0.1对不对,减少0.1。OB。减等于0.1,嗯,那接着呢去,呃,更新这个状态啊,更新状态,更新状态用这个this set state。啊,Op city让它的值呢,等于这个更新后的op,诶大家可以看到啊,这个属性和这个我们要用的这个变量,哎,值是一样的,那么就可以直接去简写对吧?啊那。设置好之后呢,嗯,这时候还没有完,还有一个问题什么呢?就是它一直在减减减,它是可能成这个负的,对不对,所以我们要加一个这个判断啊if。
12:10
嗯。C哎,等等于零的时候,让它等于一。啊,加了这么一个判断,但是这个判断哎,有问题啊,就是说它减等减这个零点一一直不断的减,因为这是一个浮点数,它有可能说不等于零,对吧,我们知道这个0.1加0.2不等于0.3是不是,所以这个浮点数它一直在减的话,它有可能不等于零,哎,所以我们用小于等于零。的时候就让它等于一,哎,这样就可以了,好。那接下来我们来。看一下啊,刷新一下,看看是不是可以达到我们的这个效果啊。来这里啊。呃,现在刷新啊。好。诶,可以看到啊。一开始还是正常的,对吧,但是后来越来越快,越来越快,越来越快,越来越快。
13:02
对吧。好。那这个我先都关掉啊。这是为什么呢?啊,我们在这里面你去输出一个东西,你也看一下啊,比如说输出这个一好。再来看一下刷新啊,这个已经关了啊,重新启动一个。打开这个可以看到,哎,这个速度越来越快是吧,从这个指数式的往上跳。看到了吧,我们把这个关了啊。来分析一下为什么会产生这个原因啊,首先这个计时器它是在哪,在这个render里面对不对?好,那这个render我们之前讲过,它会执行多少次,是不是一加N,也就是当第一次组件去挂载到页面的时候,会执行一次,对吧?好,这时候启动一个定制器,哎,定制器还在执行,好,接下来,但是定时器里面又做了什么事,是不是更新的状态。而这个状态的更新是不是又会触发这个温,就是我们的这个N对吧?好,那你一旦触发N,又启了一个定时器对不对,又在更新状态,又又启动定时器,又在无限的递归对不对,而且是呈指数式的一直在往上涨,无无限的在这递归。
14:15
对吧,所以就造成了这个问题。好。也就是说,那我们这个计时器你放到这里肯定是不合适的,哎,大家也看到效果了。我们想要的效果是什么?是不是只让这个定时器执行一次对吧?好,那你说哎,简单,我在这儿再给一个事件啊,This这个。哎,把这个先改了,比如说变淡。好,那这里就先随便写个DEMO来,我在这里写个。DEMO方法。那我在这里来这个方法里面,我去执行这个计时器是吧?啊,那我点这个变大执行这个计时器,这个计时器开始就是执行这个函数计时器开始执行是不是执行一次了来。
15:03
哎,运行一下啊,你看看。啊。是不是效果有了对吧。是这意思,好这个呃,是达到了这样的效果,但是我们呢,要写的例子是什么,让这个组件一挂载完,它自动去执行,而不是你去点这么一下。清楚了吧?啊,那所以这么写不合适。对吧,好,那现在我们就要考虑问题是我怎么办,让它自动去执行。这个我们就先删回来啊,那事件这个肯定就不合适了,哎,把代码还放这。这也删了啊好,我们来想一想啊,既然这个组件,哎,它去挂载到这个页面的时候,它执行了这么一个方法,那我们能不能,哎,拜托这个还说你这个组件,你你挂到页面之后,你再帮我执行一个方法,哎,让我好放我的这个代码。哎,对吧,你看react它。
16:03
把这个组件去挂载到页面的时候,它会执行软件对不对,哎,那我们可不可以去说,哎,告诉组件来你你页面你挂载好之后,你再帮我,帮我执行一下这个。那有没有这样一个哎方法这样一个API让我们去使用呢?哎,我告诉大家还真有好,那这个API的名字是什么呢?哎,总不可能是让二吧,不会这么low吧,对吧?好,接下来我们来写一下这个API这个名字,我们来想一想,这个API它是呃,干什么用的啊,那我们想要什么效果,就是说呃。在这个组件你挂载完之后。帮我去执行这个代码是吧,那所以我们先用中文这个这个这个注释先写的啊组件哎。挂载。之后。哎,执行,嗯,帮我执行这个代码是不是,那组件挂载之后,那这个API的名字,我们就按照这个中文的这个翻译,我们来组件怎么写的是不是。
17:00
Component对吧?好,那挂载之后之后是不是有一个D的。哎,Did是什么意思,Did是不是do的这个过去式对吧,那已经过去了,是不是已经已经完成了啊,那组件挂载之后,那组件哎之后什么之后是不是挂载,挂载是不是这个moment。哎,是这么一个方法啊,好,也就是说啊。有这么一个API,这么一个方法就是组件,哎,挂载之后它会执行,那我们把这个set timeout去放到这里面,有没有问题。来看一下,先看一下效果啊。右键啊运行。是不是没有任何问题?这样这个例子就写完了是吧,哎,别慌,那现在我们来点这个,忘了它。诶,会发现他报错了。哎,可以看到这个计时器还在走。对吧,啊,那这里报错什么意思,你不能去更新一个状态,不能更新什么状态,在一个已经卸载在组件上面对吧,那我们点这个忘了它是不是把那个组件给卸载了,对吧?但是我们的计时器你看看还在走,还在更新状态,是不是就报错了。
18:16
对不对,你看我们这个计时器启动之后,它一直在去更新它的这个状态。对不对,但是我们点了这个之后,哎,点了这个忘了它之后,就把它给卸载了,页面上已经没有这个组件了,你还在不断的更新状态,那肯定就报错了,那所以说我们要在这个卸载组件之前,要把这个定时器给。给停掉对吧,好怎么停,那之前我们写原生键子是不是给它一个啊变量,然后我们用这个一个方法啊,用这个clear interval就可以了,是吧。啊,那这个变量我们怎么给,那我们是要在这里定义变量,要在这里面去用,对吧,那跨了两个方法了,哎,这时候我们是不是要借助一个东西做中转,那我们借助谁。好,这时候我们可以借助这个类的这个实例,哎,This,那为什么可以借助这个this,首先看这里啊,这个方法它和这个render方法它都是这个react它自己去,哎,用了这个组件的实例之后,它自己去用实例调的这个方法,那么用实例去调的这个方法啊,这个this指向这个组件的实例,This肯定没有问题,对吧?所以我们把这个this给它多加一个属性,也就实力本身,我们给它挂一个属性,挂一个time,让它等于谁等于我们的这个计时器可以吧,我给这个,呃,这个组件的实例上面,哎,多加一个属性,Timer等于我们的这个计时器,那么。
19:36
接下来在这个方法里面,我们要从这个呃,类的这个实例上面去获取到这个属性,进行一个销毁就可以了,是不是好,因为这里我们自定义的方法用的是赋值语句,并且使用的箭头函数,所以在这里面这个Z也会指向哎,这个类的这个组件的这个实例,这也是没有问题的。对吧。好,那接下来是不是就可以直接在这里去把我们这里去定义的这个,哎,计时器给卸载掉,来我们在这里写一下啊,清除定时器,哎不是定时器计时器啊,清除计时器,哎清除计时器那是用什么方法是不是?
20:16
Clear,哎,特Val,那清除谁清除哪个题是不是this timer来刷新一下再看一下啊。好,一直在走啊,这个都是正常的,那我现在把组电销毁,是不是就销毁了,你看计时器也停了,不走了吧,哎,那这样就。完成了啊,但是啊,我们来想一想。嗯,那既然你。React啊,你这个组件你挂载到页面的时候,你会执行这个render,对吧,你状态更新的时候也会执行这个render,好,我们把这个注释也给补上啊,比如说第一次挂载。啊和每次这个这个组件的更新啊,就是第一次挂载的时候执行,然后呃,组件状态的更新也会执行,对吧?组件状态更新,哎,这两个时机它会执行对不对?好,那当这个组件挂载之后呢,它会执行它那么有没有一个API或者说一个函数啊是当这个组件。
21:17
快要被卸载的时候去执行,也就是说卸载这里是卸载组件对吧,那有没有一个API,有个函数,就是在卸载之前,哎,就是在将要卸载还没卸载的时候去执行。哎,有啊,那我们先按照我们的这个注释啊,那我们列写写啊,组件将要卸载之前。来执行好,那接着我们就把它给翻译成英文来组件comp啊好组件干什么,将要卸载之前对吧,那将要是什么,将要是well对不对,那卸载是谁啊moment啊注意这个单词啊,这个驼峰啊好这是不是就是你看组件将要卸载。
22:00
对吧,江西的钱那执行它,哎,我们在这个里面去。清除这个计时器,好,这个就删了啊,哎,当然你真的你要放到非要放到这里面也行,没有什么问题啊,哎,只是我为了给大家去引出来又一个啊,我们可以这样react自动去执行的一个函数,来接下来去刷新试一下啊。伤心好呃,一切就是在变淡,正常啊,那我们。点这个,诶是不是也停了,是不是销毁了,好这个时候,哎,我们又了解了一个,哎,组件将要卸载之前执行的一个。函数好,那。你看我们再来总结一下,诶,组件挂载到的时候,挂载到页面的时候,哎,执行了它对吧?嗯,组件挂载之后执行了它,好组件快要卸被卸载了,执行了它。那这像不像组件的一生,对不对?从这个出生,然后哎,到这个出生之后,以及到即将离去的时候,是吧?像不像组角的一生,其实他和人的一生也很类似。
23:06
这里啊,我。写了一个矮人的一生的一个例子,给大家看一下啊,在这里,嗯,看看人的生命周期,将要出生,将要出生时候干什么,起名字对不对?那出生之后,呃,去用一些应用用品,好,接下来就是,哎,会说话会走了,上学了,一直到这个长大了,工作了,是不是都要记录一下,对吧?那病危了,哎,是不是要交代一下后事?啊,是不是那去世了,是不是要就入土为安了,对吧,那我们来看一看这个啊。出生了啊,就是说是不是像我们写的这个component。Ad的。我问他对吧,你看是不是像这个,就是挂载之后嘛,哎,页面就说组件挂载页面之后,好,那这个病危了啊,就说哎快要去世了,还没有去世,那像不像我们写的这个。Comp。
24:01
Well a moment,哎,像不像这个好。哎,这是我们这个人的生命周期那。换成组件的生命周期,它会也是一样,会执行一些特定的一些事情,对吧,就是在特定的时机去做一些特定的事情,是不是,那组件的生命周期也是这样的,就是在特定的时机去,哎,做特定的一个事情,当然要做什么事情,这个事情我们可以去。去写这个事情对吧?好,那我们来理解一下,那什么是周期,什么是生命周期,是不是就在特定的时期去执行一些。特定的事情。来看我们的代码,那怎么说呢?也就是说react,它会在这个合适的时间点去执行。对应的函数是吧?啊,那这个就是react的这个生命周期,哎,在合适的时间点做合适的一个事情啊,当然呃,换成代码的话,就是调用和对应的函数,好,那我们把这些来写一下啊啊,什么是这个生命周期?
25:05
好。就是这些函数,哎被称为什么被称为生命周期,哎,回调函数。对吧,啊,因为他会在这个瑞的自己的这个生命周期内,哎,在这个对应的时间点去。执行这个对应的一些函数嘛,对不对,你看这个函数对吧,是这个react自己调用的对吧。好,那有时候也被称为什么呢?被称为这个哎生命周期,哎钩子函数。哎,为什么叫钩子函数呢?哎,就是到了一定的时间点,我把你这个函数给勾出来执行是吧?哎,生命周期钩子函数来有时候还被称为什么被称为,嗯,生命周期函数,这是就比较简单的去描述啊生命周期函数。好啊,有时候还叫什么,还叫生命。
26:02
周期哎钩子哎,有这么几种说法。大家见到哪一种都一定要认识啊,生命周期钩子,哎,但是都是离不开这个生命周期这几个字是吧?也就是说我们这些函数都是处于这个react它的这整个生命周期中,哎,它在特定的时间点去哎执行的一些函数啊,但是这种说法都可以啊,啊,那react它就有这两个吗?对吧?有这三个吗?不可能啊,它会有很多很多,这也是我们接下来要学习的啊,这个生命周期啊,学习这个的整个的一个生命周期啊,这里只是为了通过这两个简单的例子给大家引出来这个生命周期的概念,最后来看一看啊这个笔记中的这个总结,哎,什么是组件的这个生命周期,就是组件从创建到死亡,它会经历一些特定的阶段,对吧?那原的组件中呢,它有一系列的这个勾函数,也被称为这个生命周期回调函数会在特定的时刻调用。
27:05
我们在定义这个组件的时候,会在特定的生命周期回调函数中去做特定的工作啊,就像我们这里去在组件挂载之后,哎,去启动这个定时器,以及在组件将要卸载之前去清除这个定时器,对吧?在它的特定的时间点,我们来做特定的一个工作啊,这就是react的生命周期。
我来说两句