00:00
上节课我们学了react组件在初始化的时候,它的这个生命周期,哎,也就是这边左边挂载时候它的这个生命周期啊,那右边这个呢,其实就是哎组件在更新时候它的这个生命周期,那还有最后一个啊,最后这个是哎将要卸载时候。它触发的一个钩子对吧,好,那这个没有写是吧,三节课哎,这个我们先写一下。在这里啊,我们加一个按钮。来点击卸载。有一个昂克雷啊。This。Bus。来第一个这个方法啊,自定义的方法,我们就放到一起啊。
01:02
卸载组件按钮的回调。哎,卸载的话呢,要使用诶react DOM的一个API react do第二。An moment。啊,要使用这个API卸载哪个啊,容器上的一个,就是哪个节点上的一个组件啊,就是我们是挂到了test那个节点对吧。Get ready。我们来试一下啊。运行好先卸载,诶这个好使对吧,那接着看一下这个图,当线即将卸载的时候,它会触发这个钩子函数,是不是我们把这个来写一下啊。
02:01
哎,钩子函数我们写在一起啊,主线。将要卸载。的钩子。Component well on moment啊一定不能写错啊,写错的话它就不执行了啊,直接复制一下这个,把这个名字换一下好接着。在浏览器中,诶,我们刷新这个页面,同时去看一下这边啊好,这四个是组件初始化的时候,也就是我们挂载组件的时候,它执行的对吧?再给大家复一下,先执行construct构造器,接着执行component where。啊,接着执行random对吧,最后执行这个已经挂载完毕的这个钩子,咱们把这个清了,现在我点击卸载是不是触发这个,哎,组件将要卸载的时候,诶这个钩子好。那这就是我们这个啊,那这节课呢,我们来看一下。
03:00
组件更新的时候,它的这个生命周期,诶,通过这个图大家可以发现,嗯,有这么几个箭头,你看第一个是从这里往这里走,对吧,一直走到卸在,哎,那第二个呢,是从set state,哎,从这开始走,一直走到现在,那还有第三个,哎,从这个地方啊,Force update,哎,强制更新,从这里开始走,走到这里一直到现在,对吧?所以我们更新组件它是有三条线,也就是我们可能有三种情况去,哎更新这个。组件是不是啊,那我们先说哪个呢?先说set state,哎,这个我们比较熟悉,因为在之前我们学这个state的时候就说吧,哎,在我们更改了组件的状态之后,哎,组件会重新调用render去帮我们去重新哎渲染这个组件对吧,重新挂了这个组件,好之前我们是直接诶省略了这个对吧,我们直接说哎更新了组件的状态之后,会调用render,哎重新去渲染这个。啊,页面对不对,好,那学到生命周期这里呢,我们就把我们省略的这两个给写上好。
04:01
接着看第一个啊,那我们先学这条线,那这个我们把它给整明白了之后再去,哎,看这个啊,再看这个都比较容易了,好,那我们先看这个,那既然是set state,哎,我们得有地方去set,对不对,看一下我们这个例子。来刷新啊,我们这个例子点击的时候增加是不是已经,呃,可以去更新组件的状态了,对吧?那我们是有的,但是为什么没有触发呢?哎,那是因为我们没有写这个函数对不对?没有写这个钩子函数吧?好,那注意一下这个钩子函数这里先介绍一下,它呢相当于一个阀门,也就相当于一个开关,哎,它有两个状态,就是说哎,我们拿这个灯电灯来举例,哎,你是开灯还是关灯,这个也是一样啊,就说当我们去更新了这个组件的状态之后啊,走到这个方法,那这个方法呢,来我们看这个名字就知道,哎需的component update,对,就是应该组件更新完,那这么翻译肯定不对,那我们稍微修饰一下,就是组件应该被更新吗?是吧?它,所以它是一个疑问句,对不对,那既然是疑问句的话,它就有点类似于一个开关,哎,比如说你是否要开灯嘛,是不是好,所以说这个钩子函数,它会返回一个布尔值,哎,你返回处,哎,我就认为你要更新,我就接着往下走,哎,给你执行这更新的一系列流程,那你返回force,那我就认为你不需要更新,我就直接。
05:17
哎,下面就不走了,就打叉就不走了,哎,直接这里就拒绝了兄弟们,这相当于一个开关,相当于一个阀门啊。那我们把这个函数啊,这个勾函数写一下,我们来看一下啊。那当我们没有写的时候,大家可以发现,哎,正常的直行没有问题啊,这是因为它是。它会就是说,哎,始终给我们一个默认值,就当你不写的时候,它默认返回处啊,那我们写的时候呢,来写一下啊。写到这里啊。组件。嗯,这样不行吧,控制组件更新的。啊,开关啊好。
06:06
秀的啊。Component。啊,不对啊。来把这个输出一下啊。好,那既然刚才我们介绍这个函数的时候说,哎,它应该返回处,哎,我们就认为这个状态需要被更新,对吧?那它如果返回false,我们就认为状态不更新对不对?但是我们现在只是cons什么都没有返回,一个函数在什么都没有返回的时候,它是不是按DeFine的?来我们来先来看一下啊。刷新,哎,这是挂载时候的,我们把它清掉,现在我来更新状态,我点。诶,这个钩子函数,首先它执行了对不对,看我们的conslo输出了,但是这里有个报错啊,这个报错呢,我们来翻译一下啊。哎,他说你这个钩子函数你return了按find啊,但是哎,我们需要的什么,就确定你return的是一个true或者一个false才可以清楚了吧。
07:08
啊,所以这里我们没有return,就是得到了这个案范,就你看这个也不变化,直接就报错,对不对啊,这是刚才我们在介绍这个函数的时候强调的,它一定要去return这个true或者false,你return下值不行。知道吧,你看我们这没有履行纸氨底发呢,他就给我们报错了。啊啊,这也是因为我们写了这个钩子函数,所以就要受到它的这个控制,那其实如果在我们不写的时候,我们主要是正常运行的,对不对,那不写的时候它是默认返回的处清楚吗?好,那我们现在来在这里return一个true。再来刷新一下。看一下啊,把这个清掉啊是不是诶。这个你看。正常的走对吧,你看这个勾子函数正常的走,接着更新了之后,你看我们这个函数走的之后,它会走一个软点帮我们去重新渲染这个对吧?重新渲染这页面,如果你不走到点怎么会重新渲染呢?啊再来看一下,我再点一下啊是不是先啊走了这个开关,哎,问我们是否需要去更新这个组件状态,那我们返回了处看一下,这是不是返回处,哎,我们说哎你需要去更新组件状态,那它就帮我们把组件的状态给更新了,诶组件的状态一更新,它是不是就会调用这个软点去重新渲染这个组件。
08:20
啊,是不是好,来这一下,我们再来返回一个false看一下啊。来刷新。把这个清掉啊。你看是不是没有变,这个一直是零对不对,但是这个函数啊,这个勾函数一直在走,哎,就是一直在走这个开关,问我们是否需要更新组件状态,但是我们返回false,我们说哎不用帮误更新,那是这不就没更新,是不是一直零啊,这就是这个啊,这个钩子函数啊。好,那我们把它给返回成处来。接着看我们的生命周期的图,好,当我们去set state去更新组件状态的时候,是不是先走了这个开关,好接下来它会走什么?也就是说,那如果你返回了first,那接下来都不用看了,都不走了,已经结束了。好,我们如果返回出的情况下,它会继续往下进行,对不对?那接下来他会干什么?就是在render之前,哎,他会干什么事?
09:11
Component update,就是组件将要更新之前,来这个我们写一下啊。哎,这个要返回出啊,你你返回false后面就没得玩了,下面都不走了吗。组件将要更新的钩子。Component。Update。其实这些方法你看着挺长,但是其实挺好记的对吧,你就哎正常的去读就行,哎组件将要更新对吧?好哎,这里面我们也输出这个钩字的名字。来验证一下啊,看一下它的执行顺序。刷新。这个先清掉啊。啊,接着我来点击。
10:00
诶,他是不是先走了这个开关,问我们是否需要更新状态对吧?那我们返回的处你要更新这个状态,接着它往下走,哎,走到了这里啊,组件将要更新,哎,这个钩子对不对?好,那这个钩子走完之后才去走这个软点去帮我们,呃,重新渲染这个视图是吧?渲染这个页面,诶,这就是。哎,我们这个流程那。现在已经到了这个render了,对不对,好。页面中我们已经看到更新后的一个数据了,那在更新之后呢,它还有一个。Component DW就是已经更新完成之后,就更新完成之后,我们之前挂载的时候只有一个挂载完成之后,对吧,那这里还有一个更新完成之后。对吧,那我们把这个也写一下啊。来接着在这儿下面接着写啊。组件更新完成。打钩子啊。Component。Did啊,Did就是已经啊,Update。
11:03
来复制一下。把这个改一改。复制一下把这个粘贴上啊,那接着再来看一下这个例子,把这个清空,现在更新,嗯,是不是先执行了开关,然后哎,组件更新之前,然后开始去,呃,重新渲染这个视图,接着是组件更新之后,是不是这个顺序。这个就是我们这条线,哎,从我们s state开始去往下进行的这条线。这小节就说完了啊,最后再给大家强调一点啊,关于这些钩子函数的这个顺序啊,啊,大家随便写它执行顺序跟我们这个代码的顺序没有关系的啊,不要纠结这个。清楚吗?
我来说两句