00:00
好了各位,我们继续上一小节呢,带着大家呢,认识了两个新朋友,一个叫做component amount,这个生命周期钩子什么时候掉啊?组件挂载完毕了,React就帮你调,还有一个就是component view amount,这个钩子什么时候掉啊?组件即将要卸载的时候,React帮你调。其实我们之前一直写那个render的同学,它也是众多生命周期钩子里的一个,而且是最重要的那一个。同学你说没有了render,你怎么初始化页面的展示,那页面都不展示了,以后还怎么更新呢,对不对?好,那我们回到课件当中啊,同学看看课件里这三句话,首先读第一句,组件从创建到死亡会经历一些特定的阶段。那就比如说刚才我说的挂载的阶段呀,卸载的阶段呢,对不对?好,再读第二句,React组件中包含一系列的钩子函数,我们又称生命周期回调函数,它会在一个特定的时刻呢去调用,为什么说是一系列的呢?因为不是一个两个,是很多,是一组,OK,诶说老师特定时刻,那你想想同学组件挂载完了,是一个特定的时刻吧,就相当于人出生了,这是一个特定的时刻吧,那我要做什么呢?那看你具体的业务逻辑,我在这儿只是开了一个定时器,对吧?同学,哎,好了,折叠起来,那这儿呢,那肯定也是一个特殊的时刻呗,就是将要被卸载,哎,那个时刻啊,回到课件,我们再读第三句,我们在定义组件的时候呢,会在特定的生命周期回调函数中做特定的工作。
01:38
啊,这钟呢,应该放在这儿对吧?哎中,那然后呢,做特定的工作,那你看吧,我data want之后我就开启定时器对吧?组件只要放在页面上了,OK,开始计时吧,开始更新状态吧,周而复始的发生变化吧,是吧?哎,好了,折叠,那么同学除了这三个生命周期钩子,它还有哪些呢?诶,那我们接下来看一看,回到课件当中给大家了一个图叫生命周期流程图,同学发现老师括号旧什么意思呀?就是咱们先讲旧版本的生命周期图,然后再讲新版本的,说老师那旧版本的是不是意味着就了解一下就行啊,我得把最新的记住啊,不是的,同学新版本也没有做出什么太大的改变,他只是提出了两个新的钩子,然后呢,又废弃了原来的三个钩子,哎,所以说新版本呢,相对来说是一个缩减的这么一个动作,不是说一直在给你添加东西。
02:38
说新版本是不是不断的往上加东西啊,不是他干掉了三个,又新提出来了两个,说老师那都是什么呢?别急,先把旧的咱学明白,然后再去聊聊新的,好吧,同学别觉得旧你就不好好学,因为旧的这个东西呢,是特别经典的一个,OK,好,那么这个图呢,是在课件里边,那我得把它存储出去,那我提前呢,其实已经都存好了,我们一起来看一下啊同学,在这呢,最小化react的全家桶,这里有一个原理图,这里边有一个生命周期,哎,括号就先看这个,呃,摁住,然后呢,回到我的代码当中,把它放在这儿走,给它编个号啊一呢是引出,我在这呢又建立了一个文件叫react的生命周期,括号就一会儿在这儿呢,我单独写一个案例,把所有那些生命周期钩子一一的带着大家过一遍啊,那这儿呢,我改个名字啊,重命名,那这叫做二。
03:38
下划线我也叫二啊,有两个二,第一个二呢是文件,第二个二呢是一幅图,哎,它俩是一套的,看着这个图,哎,我们去敲这段的代码,好吧,哎,换案例,同学,现在不太适合用这个案例了,用这个案例写起来就特别的乱啊,那多说一句,同学,你说生命周期钩子呀,先掉还是后掉?
04:05
跟我写的顺序有关系吗?答案是没关系的,同学你注意看啊,右键我打开刚才的那个案例啊,打开同学一上来是不是掉render啊,对吧,一上来掉render,那同学啊,我问你,我render是不是写在最后的呀,那他咋一上来就掉render呢?所以说同学生命周期钩子什么时候掉,跟你写代码的顺序是无关的,你只要在这写react,会在合适的时候帮你调。对吗?那你看data mount什么时候掉啊,你得render掉完了是不是才掉data mount呀,那不信你看你在这来个输出,同学lo,你就输出这个component data mount,你看看它是不是在render之后刷新一下走,嗯,那我改的不对哈,那应该是在这个里边component amount date的monunt啊monunt咱上午不是演示这个例子嘛,是吧,上一小节演示这个例子,我特意把这个单词给改错了嘛,对吧?啊,你改错了他肯定不认识了呀啊来这回你看同学是吧,Render之后再是component demand说老师,那这render咋还一直掉下去了,你不是在持续的更新状态嘛,对吧?哎,好了,来给它关掉,那放这吧,是吧,这输出就放在这儿关掉,我重新写一个案例,咱们去把这个里边所有的东西呢,咱都过一过,好吧,关掉这个图,我先写案例,呃,咱写一个什么案例呢?同学课件里就没有这案例了啊,就没有展示,是我单独给大家写的一个,只想让代码更清晰。
05:39
啊,那么回到代码当中,写一个求和案例吧,同学,就是页面上有一句话啊,叫做当前求和为,你比如说刚开始一上来是零,完了,我这儿呢有一个按钮,哎,叫点我加一,你点一下零变一,再点一下一变二,再点一下二变三,哎,就这么一个效果,好了,来吧,定义组件,呃,求和,那我就叫做count吧,你叫ad也行,是啊,然后呢,你得写这个固定的这些结构嘛,Component,走render呢,是必须有的,对吧,I re return呢,也得有好了这一个多级的结构,那写吧,走嗯,写一个H2吧,啊,叫做当前求和为,为多少呢?不知道,写问号,嗯,下边有一个按钮,点我加一,好,那就写在这儿,那注释同样写好啊,这个里边的代码呢,可能就会多一点啊同学,因为我要把所有的钩子都给你。
06:39
展示啊好了,那写上叫做创建组件,所以说各位呢,一定要跟住了,嗯,然后呢,渲染组件走react DOM render渲染的是哪个组件呢?Count走容器里边,好了,右键打开看一下效果。
07:02
OK,东西出来了啊,那同学啊,你说我以后点的时候,这是不是得持续的加呀,0123,那所以说呢,是不是得靠状态呀,所以说走着这在干嘛呢?写好注释,初始化状态state来吧,设计一个求和,那我就叫他count吧,啊同学注意啊,它俩别高混,这个count是大写的,是组件,这个只是状态里的一个属性而已啊啊或者你要觉得实在不爽,你自己练的时候,你就用一个最low的方式呵和是吧,哎,写上哎,这叫做cont啊,那刚开始呢,是六好了。那接下来呢,这你别写问号啊,你给它写出来嘛,this.state.count那咱说一般在这呢,提前做好这个事情是不是?哎,写好了,走this.state那写谁呢?Co有NT,那在这呢,就简单点了,直接那countt加个冒号吧,当前求和为那点我加一,这是不得有点击事件呢,On click等于this,点那加,那就是ad。
08:10
啊,走加一按钮的回调,走ad好走着,那怎么加一啊,我得获取原来的状态,是不是才能加一啊,那所以说走着第一步呢,获取原状态,这里的注释呢,我稍微多写一点啊同学走着,然后呢是con直接写吧,this.state在这来count,接下来呢,加个E更新状态对吧?啊更新状态this.set state8count值改为刚才你取出来的那个count给它加一,嗯,在这调一下好试试吧,看看有没有效果啊回到这刚开始是零,你点的时候,诶就开始加了是吧?就在这个案例里边,我们开始测试一下那些生命周期钩子来了,回到这个图里边,打开图,同学一点一点。
09:10
哪来啊,我们先看这部分,OK,这部分一会儿再说,挂载时就是这个组件呢,初次来到页面,其实同学你发现啊,在挂载的时候,它第一个掉的钩子其实是那个构造器,对吧?Constructor哎,那我们写构造器了吗?没有,那咱们不想测试出这个顺序,它对不对呀,是不是像图里所说的呢?那所以说同学你说我写不写构造器啊,我得写上,老师之前为什么不写呢?咱不是说了吗?这构造器能省略呀,但是现在咱们不是想测试一下这个顺序嘛,看看构造器到底是不是最先掉的对吧?哎,那按照标准来说,这是不是得写pro对吧?我不管你现在传没传,但是我得标准的写对不对,修出来是不是得写一下啊,如果掉了构造器,那我就在最上方来一个叫做constructor嗯,走那谁的constructor啊,是不是count的呀?哎,那所以说呢,我这样做前面加一个count杠做个区分,因为一会呢,我还会。
10:10
再把另外一个组件混进来是吧?哎,慢慢来写好了,这叫做构造器,构造器完事啊,同学,那你说呀,你都有构造器了,你的这个状态还应该写在这儿吗?构造器里面是不是就做一些初始化的事儿?其实你这么写也没问题,同学就是构造器该写写,但是在这儿呢,我就非得用赋值语句的形式在这初始化状态,这就有点怪怪的是不是?哎,那咱把它拿到里边去吧,走,均写在外侧也没问题啊,你要拿到里边,嗯,早期的写法是不是这么写呀?哎,z.state等于哎,初始化状态,同学构造器是不是?哎,再看这个图,同学构造器掉完了之后,它掉了一个什么呢?哎,这个小钩子是你之前没见过的,来读一读,读一读,Component will mount啥意思?组件将要挂载,OK,来吧,写写名字,可千万别写错啊,我这样啊,我让生命周期钩子呀,都挨在一起。
11:10
啊,这构造器呢,放在这儿,然后你中间自己定义的这个呢,你就放在这儿,构造器把同学不太适合往下方,一般就放在最上方,啊这是一个顺序的问题啊,来走叫什么呢?Component,然后是will mount啥意思啊,将要挂载,那在这写好注释,这钩子什么时候掉呀,组建将要挂载的钩子。那来吧,试试olo component view want,好,按照图里的顺序,我们再往下走,接下来它就掉谁了呀?看这render同学觉不觉得render是横跨整个?啊,这个流程的呀,那你看挂载的时候是不是也要render,那你后期更新的时候是不是也要render啊,哎,所以说render很累的啊,那验证一下render有没有调用呢?回到代码当中走,那在render里边呢,我constructlo一个re,那么咱都说明白啊,到底是谁的or谁的you want,前边都加个count啊做个分,我这摁三个吧。
12:20
二三,好了,那这也是走count 123好,如果图里的顺序没问题,那么控制台上应该依次输出构造器,Component will mount render component did mount,但是data amount那个钩子呢,咱还没写呢,是吧?那我写在这儿,Component did mount走lo输出输出谁呢?输出这个走前边也得加上COUNT3个杠。好啊,Will mount mount,那这块也写好注释,这是什么钩子呀,组件挂载完毕的钩子啊,挂载完了我就帮你调,将要挂载之前我帮你调这个啊,那同学按照图里的顺序,控制台上应该输出构造器,View mount render mount,来吧,我们看一眼,右键打开。
13:17
切到控制台刷新一下看看效果啊同学,首先是不是走到构造器啊,然后其实它掉的不是说直接就到软底去了,它掉了一个叫做view mount,就相当于人,哪个时刻呢,人将要出生。啊,将要出生,那这就是相当于组建将要挂载,那问题是咋挂载呀?那当然得调render挂载呀,那同学你说render如果说都调完了,是不是就挂载完毕了,那挂载完毕了我就帮你调data mount,对吗?哎,OK,这都是谁的呀?都是count这个组件了,对不对?好,同学们,这我就演示完了,图里的哪个过程呢?回到代码当中,是不是初始化时候的过程啊,哎,也叫做挂载的这个流程啊好,那讲到这儿呢,这一小节我们先停一下,其实呢,难点是在这儿,哎,就稍微复杂一些,嗯,这小节我们先停一下啊。
我来说两句