00:00
在上节课我们通过这样一个例子引出了生命周期的概念,然后还知道了啊,这两个生命周期钩子函数啊,一个是在组件挂载之后执行,一个是在组件将要卸载之前执行啊,但其实这个render它也是react的生命周期中很重要的一个钩子函数。好,那这节课我们就来学习一下完整的啊这个react的生命周期,先看一下。他的这个生命周期的图在笔记里啊,这个图就是react完整的一个生命周期啊,大家注意这里啊,我加了一个,就因为这个是呃,React旧版本的一个生命周期,那既然是旧版本的生命周期,我们为什么还要拿出来讲呢?诶,这是因为这个旧版本的生命周期它非常的经典啊,它和新版本的生命周期相比啊,或者说是新版本的呃软的生命周期。它只是比旧版本啊增加了两个钩子函数,但是呢,它废弃了三个钩子函数,所以说新版本的生命周期,呃,对比旧版本来讲的话,还是一个简化的一个操作,那么在学习新版本的这个生命周期之前,那我们有必要先把这个旧版本的这个生命周期给。
01:10
诶,了解一下啊,因为新版本和旧版本它的这个生命周期差别并不是很大啊,就是在一些不太常用的钩子函数上面做了一些调整,哎,这节课我们先来看一下挂载时候它的这个生命周期的一个流程,好,那按照这个图的示意,那如果是挂载时,它会先执行construct,对吧,然后接着执行嗯,Component VI moment对吧,然后接着会执行render,还有。下面就是执行这个component啊,Data,只有当我们卸载组件的时候才会触发这个component well on,对吧,这个在上节课我们也演示过好,那这节课我们主要来看这个挂载时的一个生命周期,那这个副组件啊,Render这个生命周期比较复杂,也是更新时候的这个生命周期比较复杂,我们放到后面再来说啊。来看一个案例,我们通过这样一个案例来演示这个挂载时候的一个生命周期,看一下浏览器,哎,就是这样一个案例,我们这里,哎,写一个数字,当我们点这个按钮的时候,这边数字会一直累加啊,从零到一一直到二,来我们来试一下啊,就是这样一个案例,好,接下来我们来开始写代码。
02:22
这里,哎,文件我已经准备好了,准备了一个RA生命周期,就这样个目录,然后把要写代码的啊,这些基本的一些内容准备好了啊,这里空出来,我们来写代码,然后呃,REC的生命周期这个图,哎,旧图也给大家放到了这里。首先,第一步。定义组件对吧。Class啊,定义一个counter组件啊,我们求和的一个组件,继承react。啊。好。Render。
03:07
Return啊,一个括号,这里面我们包裹一个div,写一个H2标签,当前求和为I,现在先随便写个数放这,那下面有一个按钮啊,一个button。好点,我。加一对吧。用这个加吧,那。要给他一个点击事件对不对,On click,那点击事件我让他。给他一个回调函数啊,回调函数我写到这个另里面,哎,用这个ad方法。哎,在这里定义一个。哎,在run的上面,我们来定一个方法啊。这个。加一按钮。的回调啊,回调函数ad。
04:03
一定要用哎,赋值语句加这种箭头函数的形式。也就是当我们点击它的时候,我们在这里,哎,让这个数字加音,首先哎我们来想一下,你看我们在点的时候,这个组件的状态是不是一直在发生改变,所以这个呃地方这个数据我们是不是要把它定义成状态才可以。对吧,来接着我们来定一个状态啊。状态,我们放到这里定义sta。题啊,定一个count的一个状态,开始是零。那这里我就不写了啊,我直接写这个状态啊,This第二。那接下来再点这个按钮的时候,我是不是让这个状态进行加加就可以了,对吧,那要先获取原来的一个状态的值。获取源。状态。原来的状态,哎,这个就是要补一下啊,初始化状态。
05:05
那原来的状态我们来定一个。呃,变量啊。等于this.state从这里面结构出来的一个count。接着去更新状态啊,更新状态用set state。嗯,把这个count更新成什么呢?更新成这里获取的这个count加一对吧。哎,是不是这样就可以了,我们来试一下啊运行。啊,没有显示是吧,我们是不是忘了一步挂载来把这个组件,我们只是定义了,还没有呃挂载到这个,呃,指定的容器。来这里开始我们就不再说渲染了,因为上节课我们已经引出了挂载和卸载的概念。
06:04
哎,快台组件到容器。Render。第一个是我们要挂载的组件count,哎,第二个参数挂载到哪个容器。这时候再来运行。是不是就有了啊这个啊,那我来点击效果是不是也有,好,那我们的这个例子写完了,我们通过这个例子来去看一下这个react,它的这个挂载时候的一个生命周期,那按照这个图。首先在挂载的时候,它是不是要执行这个construct的方法,对吧?好,但是我们这个例子没有写,对不对,所以我们先写一个construct,哎,写个构造器啊。来把这个purpose传过去,诶,记得传给这个super啊,虽然这个构造器我们基本上可以不写,但是我们一旦要写的话,一定要把这个呃,Purpose传给这个super啊,把注释给大家写一下啊,多早写。
07:08
啊,那既然这里我们都定义构造器了啊,就没有必要在外面再去初始化这个状态了,直接在构造器里面就可以了,是不是之前我们一直在外面去初始化这个状态,是因为我们没有定义这个构造器对不对?好把它给挪到这个里面啊。This state。来接着啊,呃,按照这个生命周期这个图construct的方法先执行对吧?那我们怎么来确定它是不是先行的,所以我们要在这里面输出一些内容,哎,我们通过在不同的钩子里面去输出这个不同的内容,我们来看一下它执行的一个顺序啊。conso.log。那输出一个什么内容呢。这里哎,我输出直接就输出这个方法名好吧,这样我能确定的知道哪个方法来执行了啊最前面呢,我再加上一个count。
08:02
加上这么一个组件的一个名字,因为后面我们在写这个其他组件的时候呢,还会呃有其他的一个组件啊,为了做一个区分,这里我们把那个名字给加上啊,那接着来看一下图啊。在这啊,看一下图,接下来会执行这个component VE,就是将要挂载之前,我们把这个方法写一下啊。呃,我们尽可能的呢,就是说把。自己定义的方法写到一块儿,然后就是它的生命周期,这些钩子函数写到一块啊,建议比较坚硬的顺序是构造器,一般我们写在最上面对不对,那像这个record,它的这个生命周期的构造函数我们一般写到这个下面啊,自定义的啊,一些方法我们要写到这个中间啊,大概就这么一个,呃,位置的一个分配啊,当然。这是比较简易的一个方式啊。哎,所以我们在这里去写,哎,这个方法啊,Component while啊。
09:05
哎,因为这个它属于是react它的一个钩子啊,生命周期的一个钩子函数,所以react它会用这个组件的实例去调用,哎,这些生命周期的钩子函数,我们都是直接去按照这个方法的,哎,按函数的形式去写就可以了,哎,不像我们自定义的这些,我们要用这种赋值语去加减的函数啊,这个要区分好啊。来,我们把注释也给补上啊,那这个是。组件将要挂载的时候来执行。组件将要。挂载的。钩子啊,我们直接说钩子吧啊。就说组件将要挂载,将要挂载的时候,它会去哎调这个钩子函数在这里,哎,我们也输出一些内容啊,直接复制这个啊,把这个后面的输出这个方法改了好来接着看图,那接下来会执行render对不对啊,那我们再复制一下这个在render里面啊,也输出一下。
10:08
这个。来再看图render之后它会执行component did Mo,就是诶挂在之后的一个钩子。我们把这个写下啊,直接复制这个啊。组件挂载之后的钩子。就是挂载之后啊。呃,改成挂载完毕吧。这个应该是B的啊,把这里也改一下,哎,这个就是组件挂载完毕的一个钩子。好。1234对吧,这个卸载我们先不说,那这个写完了,我们来运行一下。打开。这里可以看到啊,先输出了啊,构造器,接着是呃,Component well,然后是random,然后是component d moment和我们这个图是不是顺序一模一样的,哎,这就是react,它在挂载时的一个生命周期,也就是在挂载的时候它要去执行的一些钩子函数的一些顺序。
11:08
看到了吧,啊,然后这里要提点啊,这个顺序呢。就是说我们先写哪个方法,哎,哪个方法在前面,哪个方法在后面,这些顺序是和它的执行顺序是没有关系的啊,这些方法只是我们在这个类里面去定义的一些方法而已,顺序没有关系啊。这个大家不要。呃,有误解啊,就是你先写这个都可以啊,它执行的结果是没有任何影响的啊好。这就是react组件在初始化的时候,也就是挂载时候,哎,它的这个生命周期,那这节课我们就主要讨论左边的这个,那下节课我们来讨论一下啊,在更新的时候,那react的组件,它的这个生命周期又是怎么一回事?
我来说两句