00:00
这两条线我们说完之后,哎,更新组件呢,还剩下最后一条线就是副组件render,那这里又引入了一个新的名字副组件,那说明什么?组件之间是可以有关系的,对吧?有父子之间的一个关系,来我们来写一下代码。啊,这个呃,例子已经比较长了,我们把它折叠起来去重新去定义,哎,两个组件啊,我们来。定义A组件。Class eight啊。第二。Component。来,Render。Return。那这里我们就哎直接去输出一个啊H3,哎,我是A组件。
01:05
来,接下来复制一下,我们再来定义一个B组价。把这个改成B。那这里改成我是B组长好。嗯,接下来哎,我这里我就不去渲染这个啊,不去挂在这个count组这我挂在这个A组这我们来运行一下啊。看一下是不是A组件出来了,但是啊,现在哎,只有这个A组件出来了,那我们想让A和B之间形成一个哎父子组件,那怎么形成呢?好,那我直接告诉大家啊,我们可以直接在这里去写这个B组件。就是吧,啊,那我们因为已经定义了这个B组件,所以在其他组件里面,我们可以直接去使用这个这个组件了。这样他们就会形成一个父子的一个关系,我们来刷新看一下啊。
02:03
可以看到啊,我们这里挂载的是A组件,但是我们在这个A组件里面去使用了这个B组件,哎,所以B组件的内容也能出来,诶这样他们就形成了一个父子组价值关系,那么谁是父谁的子呢?来在这个开发者工具里面我们来看一下。找到这里好,哎,可以看到是不是A包含了这个B,对不对,那说明这个A是负组站对吧?你看A包含了B,哎,从代码层面我们也可以看到,哎,这个A组,这是不是包含了这个B啊,所以说A是作为这个B的一个负组件,那我们继续完善我们的例子,我们要写一个什么例子呢?呃。这里啊,我们定义一个。的。哎,初始化。初始化状态。哎,我们定义一个车的一个名字啊。奥迪来在这里啊,我们。
03:01
通过一个按钮来改变这个车的一个名字啊,注意啊,我这个按钮是写到这个A组件里面的,清楚了吧?啊,但是这个车的名字我不让它显示到A里面,我让它显示到B组件里面,好,我们先把这个事件完成啊。来换车。那我要给他一个点击事件on click,调用this.change看啊,没有这个方法是吧,我们在这里来定义这个方法啊,换车的回调。来注意使用赋值语句加箭头函数。那在这里去修改这个状态啊。他内,哎,等于宝马好。这个时候我点击这个按钮,点击换成按钮,这个状态是不是,呃会被改变对不对?好,那到现在为止这个状态我们还没有使用,对吧,我们不在A组件里面使用,然后在哪呢?在B组件里面使用,回想一下之前我们学这个purpose的时候,哎,我们外部的数据想要,哎传给一个组件,让组件去使用。
04:16
是不是可以通过这个属性的方式去传,这样的话,组件里面是不是可以通过这个purpose接收,好,那我们来给它一个car name属性。哎,等于谁呢?this.state啊,注意这个this是A啊,因为我们现在还是在A组件里面去写代码,看到吗?这个this还是A呀,点卡name,然后我们在使用这个B组件时候,给B组件一个car name属性对不对?把这个A组件里面的哎,State里面的卡name传给了B组件对不对?那我们通过这种属性哎去传那个值在B组件里面,是不是可以通过B组件的purpose接收到,哎,对不对?来回想一下之前讲过的这个组件的这个三大属性啊。好,嗯,那我在这里我就输出,哎一句话啊,写一个。
05:03
P标签嘛,好。我的车是来显示我们这个purpose接收到的一个数据啊,This第二。Purpose点卡name。看到了吗?啊,再来捋一下啊,我们这个A里面就是定义了一个啊这么一句话,我是A组件,并且有一个换车的一个按钮。当我点击这个按钮的时候,诶,这个回调会被触发,那会去修改这个A组件里面的这个状态,对吧?但是我们并没有用到这个数据,而是把这个数据哎作为这个B组件的一个purpose哎属性给传过,传到了B组件里面对吧?B组件里面就可以去通过purpose去接收的这个属性,来我们来看一下效果。来先看一下例子的效果啊。好,这是A组件对不对,这个按钮是A的,那下面这个是B组件的一个内容,好,那我来点击换车可以看到,诶正常改变啊,那接下来。
06:02
我们的例子写完了,那我们要讨论的是什么呢?要讨论的是父组件render,看看会不会触发自组间的这个事件啊,这个钩子。回到代码,我们把这个钩子函数写一下啊,注意是要写到子组件里面啊,我们要讨论的是父组件render触发的这个子组件的这个勾函数的一个问题啊,因为我们来看一下这个图是不是当父组件render,你看这个组件它的这个钩子的问题是不是,那所以这个函这个勾函数我们要写到子组件里面。清楚吧,也就是说当父组件render哎,子组件的我们这个钩子会被触发,来先把这个呃注释写上啊。组件,哎,先看一下它这个翻译啊,你看组件将要接收。对不对,哎,这就是这个勾参数的啊意思啊,组件将要接收。泡泡的钩子好。
07:02
啊,Well。Receive。Purpose。好。这个函数写完了,那我们在这里面啊lo啊。来输出B组件啊,加三个杠,为了和之前我们的count做一个区分,复制一下这个方法。好,接下来呢,我们就看一下这个哎钩子函数有没有执行,想一下哎负组件render,再看一下图,负组件render会不会引起哎子组件的这个勾函数的执行,那负组件什么时候会会被render,那第一次去挂载到这个页面上是不是会render,你看第一次去挂载到这个容器是不是会runnder一下。对不对,那当我们点击这个事件,诶触发了组件状态的更新,那我们触发了组件的这个状态的更新,是不是也会重新去调用这个软nder,那重新调用render会把新的值传给这个,呃,这个子组件B对不对,那B这个子组件接收到了新的这个purpose,哎,就说这行重新执行,那重新执行的话,是不是B组线也会成圆大好。
08:14
这个我们放到后面讨论啊,我们先看一下,当我们这个副组件render的时候,它有没有执行来。运行。好看一下这里A没有任何输出对吧,那我们刚才还说了,那我我这个副组件A,我第一次我挂载到容器的时候render会执行对不对,那这里,哎,例子又说了,那父组件render的时候,那个子组件的这个钩子函数会执行,但是没有效果。看到了吧,那为什么呢?那你可能说哎这个哎,你这方法名是不是写错了,因为当我们把这个呃方法名写错的时候,是不会生效的,来我们仔细对比一下,可以看到啊,Component will receive purpose没有写错吧。是不是component will receive?
09:00
Purpose对吧?好,没有写错,那说明什么?那就是这个。啊,这个钩子函数的它的一个坑啊。它,哎,它是什么呢。它是在子组件它接收新的这个prop的时候才会触发。清楚了吧,那我们第一次这个副组件他挂载到这个页面,诶第一次run的时候,他接收到这个purpose,它是属于一个旧的啊,就是说我们第一次传给他的时候,他认为这是一个旧的purpose,他不会触发这个勾参数。知道吧,那我们去改变了它的这个值,也就是说他后来在接收新的一个purpose的时候,它才会触发。我们来验证一下,看一下,那怎么会接触新的,我们点击这个按钮是不是更改了,哎,通过这个函数更改了这个状态,更改了这个name对不对啊,那更改了之后,它是不是这个purpose就变了,那是不是属于一个新的purpose,我们来验证一下啊。来刷新啊,还是把这些清空,我们来点击可以看到,诶这个改变了是吧,那是不是这个出发了。
10:04
对不对,好,这也是这个。钩子函数的一个坑啊,有很多人。就这点儿,就。容易犯错啊,那这个注释我们也改一改啊,不是组件将要接收purpose的钩子,而是将要接收新的purpose一个钩子。这么说啊,来,注意我再强调一点啊,那在这里写完第一次,哎,渲染的时候。渲染的时候啊。不会执行,也就是说第一次render的时候,哎,第一次渲染的时候不会执行啊。或者说这么说吧,啊,第一次接收啊,跑的时候不会执行啊。哎,只有。后来啊。更新了啊,才会触发。
11:03
来这个我给大家总结一下啊,就是这个钩子函数的问题,来接着看我们的这个。图啊,那我们呃,副组件render哎,副组件重新render,那触发了这个是不是,那后面的这些是不是它会一直往下走,一直往下走,哎,并且会受到它的一个阀门的一个影响,对不对?来我们把这些都给补全来看一下这个完整的哎,从副组件端的一直到下面这条线,它的一个流程来。那方法呢,都和上面一样,我直接从上面的这里面去复制一下啊,不浪费这个时间了,那从哪开始呢,从这个。哎,更新对吧,更新的这个开关开始一直。到这个更新完成是不是这块啊。复制一下,然后把它折叠。接着把它粘到。B组件这里。好,那render呢,我们也给写一下啊。来把这个count都改成B。
12:04
把这个改了,改成re的,那接下来去浏览器刷新看一下。嗯。这里是吧,B组件render对不对。软方法执行,因为我们没有去写这个,他第一次挂载的时候,那些流程只写了更新相关的对吧,所以是呃,只输出这个软是正常的,对不对?好,那接下来我们来更新啊,我点击这个换车。好。是不是先触发了诶将要接收这个propose,接着触发了这个呃阀门,诶是否需要更新这个组件,然后是在更新之前,然后是软点渲染对吧,最后是更新之后,诶是不是和图里的这个流程是一样的。对不对?哎,这就是父组件render而引发的子组件的更新,它的一个生命周期。关于这个钩子函数啊,还是有必要再强调一点注意啊,当组件第一次渲染的时候,它是不会被触发的,只有当它再次去接收一个新的purpose的时候,也就是我们purpose,哎发生改变,哎,接收一个新的它才会出发,通过这个例子我们演示了啊,那这个它到底有什么用呢?对不对,那你改变的就改变了,你有什么用呢?哎,这里它可以接收一个参数啊,可以接收一个purpose参数,诶,这个purpose参数就是。
13:20
呃,副组件传递过来的这个purpose清楚了吧,我们来打印一下啊,那放到它后面去打印逗号好。回复团继续刷新,诶把这个先清掉啊,我点击换车是不是把副组件传过来的新的purpose这个宝马是不是就显示出来了啊,被这个函数的一个purpose参数给接收,对不对啊,那我们其实接收到这个purpose之后,你就可以在里面去,哎做一些事情,搞一些事情,好这个就是。呃,更新相关的这几个生命周期啊,我们一一说完了啊,有三条线,一个是我们正常的set state受法的逐渐的更新,还有一个是哎,我们force update强制更新的一个生命周期,还有就是当这个副组件re的时候而引发的子组件的啊,这样的一个更新的一个生命周期啊,那左侧的呢,就是挂载时候的一个生命周期,也就是组件啊第一次啊渲染往这个容器上去挂载的时候它的一个生命周期啊,这边都是组件发生更新的时候所触发的一个生命周期。
我来说两句