00:00
通过这几节课的学习,我们已经把react的生命周期就啊,注意旧的已经学完了,哎,那已经学了这么多的内容,我们有必要总结一下,哎,首先看一下上节课写的这个例子啊,我们把它都折叠起来,哎,这里给大家标注一下,我们定义的这个A是副组件,因为我们在A里面去包含了这个B,对吧?所以B是作为一个子组件存在。哎,这个大家要清楚啊,那这里呢,我使用的是A对吧,如果大家想看完整的一个生命周期,可以这里去使用count啊这个组件啊,那接下来我们来看一下这个总结,哎,我已经写到这里,我把它给复制一下,那粘贴到我们的代码中,放到这上面。那在这里给大家说啊。好把缩进调一下。好。啊,这个加个用大写的来写吧。
01:05
来用我们的这个汉语来写啊。啊二为了和这个做一个区分。三来,首先我们来看一下react它的生命周期啊,其实就分这么三个大的阶段对吧?初始化阶段,哎,我们第一次初始渲染的时候,然后就是更新阶段,当这个组件的内部啊,这个state内部状态发生改变,哎,或者副组件哎,这个render它的这个触发会引发这个子组件的这个更新,对不对啊,这是更新阶段,再然后就是卸载阶段,哎,由react down它的这个按movement component at node这个触发来卸载组件,这是组件的三大生命周期啊,三个就是重要的一个阶段。啊,我们从头来看一下,首先哎,当我们定义好一个组件,我们把这个组件往。节点上就是往这个容器上去挂载的时候,它会先触发什么,先触发这个contract对不对,因为我们的组件可以看一下是类对不对,那react在使用这个组件的时候,它会先把我们定义的组件去,嗯,实例化成一个对象,哎,帮我们帮我们去实例化的一个实例,那只要是类,它使实例化成这个对象的时候,它就会触发这个contract对吧?好。
02:17
接下来呢,呃,它要把这个组件哎往我们的页面上这个容器上去放,那在放之前呢,它会触发一个呃,Component vmot,就是哎,将要挂载的时候啊,将要挂载到这个容器上的时候,对吧?好,那这个就是开始往容器上去挂载好,挂载之后呢,就会有一个钩子函数,就说哎,已经挂载完成了,这是我们。初始化阶段就是说第一次渲染的时候,初始渲染的时候这么一个流程啊,那接下来当我们组件的这个状态,哎发生了改变,比如说set space,哎或者说哎,副组件重新render了啊,触发了这个子组件的啊这个更新,哎这个都是更新阶段,嗯,当然有一个我们没有说是吧,那个force update,那个强制更新,好,那个强制更新呢,其实比我们的正常的更新就是。
03:08
没有一个阶段没有第一个这个阀门对吧,那我们正常的更新,首先哎走这个阀门,哎走这个钩子函数,哎问你是否要更新,如果它返回了这个forces,那下面的不用进行了啊,这些都不用进行了,都不走了,那如果啊,这个阀门开关返回了这个。A处接下来哎就是呃和我们的这个有点类似啊,比如说哎,将要更新之前,那更新完就是说已经更新了啊,开始给你往这个呃视图上哎容器上去渲染啊更新完成之后,哎也有个钩子,是这么一个流程,你看well moment对吧,Render那个。这个did moment,你看这里是while update re,然后是did update,是不是很类似啊,那其实呃,这个都是我们正常更新的一个流程,也就是说内部状态,内部组件状态发生改变,或者副组件单的引起的子组件的一个呃更新啊那。
04:01
没有说的那个false的强制更新,就是没有第一没有第一个这个啊,它只有这三个啊,钩子函数叫什么好。那最后一个阶段就是卸载组件,呃,当我们要卸载组件的时候,哎,要使用这个API去触发这个,呃,去执行这个组件的一个卸载,对吧?那组件卸载的时候呢,它有一个这么一个勾函数,就是说将要被卸载之前啊,Well on moment。对吧,好,那大家可能疑问,诶这个你看这个都有将要这个这个什么挂载之前是吧,将要更新之前,那还有这个,诶已经更新完成吧,已经更新完成,或者已经挂载完成,那这个为什么没有,哎已经比如说卸载完成了,就是大家想一下,你这个组件都已经卸载了,都都不在了,都不存在了,还有什么意义吗。对不对,哎,所以就没有涉及到一个必要,就没有这个已经卸载完成的这个勾函数啊,只有这么几个好。那这么多哎,生命周期哎,这么多钩子函数,那我们要怎么记呢?其实看着多啊,但是我们真正常用的哎。
05:06
就几个啊。哪哪几个呢。来看这个图啊。这里颜色你看不一样对不对,那其实我们真正比较常用的就是一个render,没有render你怎么去渲染这个视图啊,怎么去渲染这个组件好,再一个就是啊,这个组件啊,这个已经渲染完成,因为组件如果已经渲染完成之后,诶已经挂载完成之后,我们可以针对组件去做一些其他的一个操作,诶比如我们之前写的啊那个定时器的那个例子是不是好,再然后还有一个就是呃,组件就说将要被卸载。也就是说我们在卸载一个组件之前,也可以对组件进行一些操作,好吧,那我们把这个来注释都补一补,呃,一些常用的组件我为大家去标注一下,诶首先是。这个啊。嗯,首先是这个render render,那肯定是必不可少的,对不对。
06:01
啊。必不可少的,必须要用。这个是,哎渲染用的是吧。没有这个你组件都没法渲染怎么用对吧,你不管是更新还是说初始化阶段都会触发这个对不对?好,那这里我也给大家放一下啊,那还有一个什么呢?还有就是呃,已经。就是说挂载完成之后,那这个也是。比较常用的一个啊。啊,一般在这个钩子中去做一些初始化的一些事情,哎,因为它是组件诶刚挂载刚挂载完成嘛,所以组件刚挂载完成,我们可以对这个组件哎,做一些初始化的一些事啊,一般在这个钩子中啊,做一些初始化的事啊。比如那个我们写过的这个定时器是不是,哎,开启一个定时器,开启定时器。
07:03
啊,这有点长啊,我把它折到下面啊,例如开启定时器啊,还有啊,比如哎这个组件挂载完成了,我们可以是发送一些网络请求去获取一些数据,对吧,那也可以放到这里面去啊。发送网络数据。好,还可以干什么,哎,还可以去在这里去订阅这个消息啊,这个后面我们也会讲到啊。接下来好,这个是什么?组件挂载完成之后,我们做一些初始化的事情,那组件将要被卸载的时候,是不是也比较常用,那组件都要被卸载了,我们我们干什么,是不是可以做一些收尾的一个工作。回想一下我们写的那个定时的例子是不是好,来在这写一下啊,一般在这个。钩子中啊,做一些收尾的事。那都有什么收尾的事啊,你这里你开启的定时器,你这里要不要关对吧?啊关闭定时器啊,那你这里发送了网络请求,那你已经发送了对吧,已经没办法正常操作了,所以这个我们就不说了啊好,那你这里订阅的消息,这里是不是可以取消订阅。
08:13
啊。对吧,那组件它刚挂载完成之后,哎,我们可以做一些初始化的事情,那卸载之后就可以做一些收尾的事情,哎,还有就是render必不可少的这三个是。我们学习哎,这个组件的生命周期是常用的,哎三个钩子函数,像其他的大家只要了解,你自己去写例子去实践一下啊,各个各个这个钩子函数什么时候触发自己知道就可以了啊,但真正在开发中是很少用到的。清楚吧,那真正常用的就只有这三个,I re,还有这个,呃,Did moment就是挂完成以及。还有这个view on moment就即将卸载,这三个是最常用的啊,这个大家一定要记住。
我来说两句