00:00
好嘞,各位,那这条线还有呢,这条线我们是不是都看完了呀,接下来呢,还剩下上面这个呢,诶叫做父组件render同学,你听到了一个新词叫副组件。也就是说组件之间呢,是能形成父子关系的。好,我们回到这个案例当中,我把count组件里的东西呢都折叠,这是构造器,这是加的方法,这是卸载组件的,这是强制更新的,我在count组件里写了这么多的代码,是吧?如果我继续在count组件里边研究组件的父子关系,可能让初学者呢,就觉得压力大了,所以说接下来啊,我这么做,同学,我把整个count组件全都收起来。然后呢,我敲个回车,我重新定义一个组件,这个组件的名字呢,叫做A,我把剩下这些呢,给它复制过来,好,也有render,也得return,返回一堆结构,好,我这不写count了,我写A同学,那你说我要这样做的话,是不是你这个count组件里边写了再多的内容。
01:14
我是不是也不会展示你啊,因为你渲染都没渲染对不对,说白了定义了count你用了吗?没有啊,但是用的是谁呀,A哈,有A是吧,我再来一个B组件,走名改一下叫B好。慢慢来啊,我接下来呢,让A和B啊形成父子关系,说老师怎么形成呢,你瞧着啊,这会我写A,这会儿呢我写B,现在我用的是哪个组件呀,A,那所以说页面呢,打开它就是一个A对吗。因为你定义了B,但你没用啊,说老师,那我这儿要不行给他改成B呢,A就没了呀,怎么能让他俩形成父子关系呢?同学,你不形成父子关系,你就没有办法从这开始,啥叫父组件render啊对不对,都没有父子,怎么父组件render啊,同学,我这么写呀,A和B呢,它就是父子的关系了,瞧着啊,我在这写走B啊说老师这怎么飘红了呢?那是因为必须得有一个跟标签是吧?那所以说来包裹一个div走,把刚才那两行呢拿过来,说老师这种写法是这是什么意思呢?很简单啊,这是A组件的一些结构,对吗?这个结构里边用到了另外一个组件就是B,对不对?哎,所以说这个时候呢,你打开页面,同学你看A和B都出来了嘛,对不对?右键检查借助开发者工具呢?我们瞧一眼同学,这是不是AA,里边是不是包着B呢?你说A是不是父组件?B是不是子组件?
02:49
哎,形成一个包裹关系,OK,父子关系形成了,我们就可以说这图了,但是慢点别急啊,同学,我是这么设计的,A组件呢,我想展示一个汽车的信息,来那试试啊,写好状态里边呢,存储汽车的名字叫做car name啊,那写一个吧,比如说写一个叫做奔驰好了,嗯,写好注释,这叫初始化状态,对不对?初始化状态那render呢,就不说了,对吧,那到现在你render记不住,那可说不过去了啊,来那舒老师,接下来你怎么办呢?在这儿啊,我写一个按钮,Button,哎,叫换车。
03:33
给它加一个点击事件,起个名字叫做change car换车吗?嗯,复制定义好这个change值,Car,复制语句箭头函数,就做一件事,list.set state,更新这个车的信息car name改一下啊,改成什么呢?哎,叫奥拓了是吧?哎,说老师改个奥迪,不对,叫奥拓,哎,好了,那同学我问你啊,A的组件里面状态里面是不是有车的信息啊,车的名字好,但是A组件自己展示车的信息了吗?
04:11
没有啊,他可没有,但是你点击的时候是不是能更改A组件里的状态呀?啊捋顺一下车啊,车的信息在哪存着呢啊A组件里的状态啊,A组件里边有个按钮,哎,对一点那按钮怎么的,哎,我就换车。但是A组件自己啊,却不展示这个车的信息,他想交给B组件去展示。说老师那A组件展示点什么呢?那就这样说吧,我是A组件就得了。他想让B组件去展示这个汽车,那你说是不是就得给B组件传递东西呀?那是不是就得靠pros呀?哎,Car name传给谁呀?传给B,那值是多少呢?是不是得从状态里面取出来?this.state.car name同学,我给没给B传递标签属性传了。
05:03
啊叫car name值为什么呀?哎,奔驰好了,同学,你说如果你给B传了,那B是不是就能接到呀?好了,那这这么说叫做我是B祖先逗号。然后呢,展示那台车的信息,接收到的车是冒号,咋写this.props点你传的是不是叫做car name,那这是不是得接呀?同学,如果你觉得这段代码让你很生疏,那就证明三大属性,2PROS你练的不到位,OK,我这还没对这个传递的标签属性进行类型以及必要性的限制呢,对不对?好,保存那页面的效果就是我是A组件完了有个按钮叫换车,然后传给了B汽车的名字,B就展示了这个名字对不对?好嘞,右键打开页面,我们看一下效果。哎,我是A组件,然后这个换车你要注意啊,是A组件里的换车。
06:05
A把车的名字传给了BB,在这展示是不是叫奔驰?好,打开控制台,我们接下来就可以去探讨那个生命周期钩子了。回到代码中,打开这个图片,父组件是不是render?诶,父组件一旦重新render,那么子组件就会诶。响应这个生命周期钩子叫component will receive props,哎呀,同学读一读什么意思呀,组件将要接收参数啊,或者说这个标签属性是不是都行啊,啊,那通俗点来说可以说成参数,但是其实呢,如果较真来说,人家传递的是标签属性对吧,你也可以说成是参数,那你看就是组件将要接收pros。同学,那你现在回答我,A和B,谁是父谁是子?啊,A是不是负啊。B是不是子呀?那同学我再问你一下,组件到底接没接到pros,必须接到了你B组件,如果没接到pros,我就问你这奔驰车是怎么展示出来的,是吧?B组件你不可否认他绝对接到了pros,那既然你接到了pros,那看图来说,你就读这生命周期钩子,你读一读同学叫什么?Component will receive props,那你说这钩子什么时候调,组件将要接收props的时候调用。
07:30
啊说老师那好像明白一个事儿,就是B组件呢,确实接触了pro。而且呢,还有这么一个生命周期钩子,叫做组件,将要接收pro。那同学你想B组件肯定是接到了pros,而且你还知道有一个钩子叫做将要接受pros,那你说同学,如果我在B组件里边写了这个钩子,你说这个钩子是不是应该被执行啊?好,那我们试一试啊,写在这儿走component will receive props走conslo,说好了,谁的component will receive problems是不是B组建的呀?好,走来。
08:21
同学们,按理来说,你说B已经接到props了,而且我还写了这个钩子将要接受props,最终你肯定接到了,你说这钩子是不是必须得被调用啊?好,那我们就看看它到底有没有掉呢?回到页面中刷新没掉。说老师为什么呢?我说一下可能有俩原因,一呢是你单词写错了,二呢是它真的就没掉。同学,你比如说我在B组件里写这么一个钩子,叫做component did mount啥意思?B组件只要挂载到页面上了,是不是得掉这钩子来,它的component did mount走执没执行,必须执行了,老师,那如果他没执行,很有可能是你写错了,你比如把这I大写了来,你瞧吧,他就不帮你调是吧,说师,那你刚才是不是把这写错了呢?Component view prop我没写错。
09:17
单词是对的。re,没问题,说老师,那为什么不掉呢?那这就是他的一个坑了,这个钩子里边同学有一个坑。说老师什么坑呢,就是第一次传的,不算,所以说呢,有很多的人呢,在网上评论说应该把这个钩字的名字改一改了,说应该叫这个名字,就不会引起别人的误会,应该叫这个名字,Component will receive new pro啥意思?组建将要接收新的pro之前第一次传的算吗?不算以后传的啊才算哎,所以说同学这块是有个坑的,你一定要注意,不是说你写了这个钩子,只要组建将要接收prop之前都掉。
10:13
得是新的,那什么叫新的呀?就第一次不算,以后的才是,那你就比如说同学我问你啊,现在一上来我先不点这个换车,我问你B组件展没展示,奔驰展示了,那就强有力的证明了B组件绝对接到pros了,但是他根本不会给你掉这个钩子,因为第一次不算,朱老师,那什么时候算呢?看着接下来我点击换车,你点了换车就掉了change car change car里边就更改了A组件里的状态,就导致了A组件是不是调用render?同学,那你说A组件调render是不是正是图里边所说的副组件render啊,那副组件render同学,我问你副组件之前是不是已经render过一次了,你这次render是不是可以称之为副组件重新render,那副组件重新render是不是导致第一百零六一百零六行代码啊,106行跟绕口令似的,是不是也重新执行了?
11:12
那同学我问你106行如果重新执行,那你说B组件的render是不是得重新调用啊,你是不得传入一个新的值啊,那所以说同学你这是第几次接收pros了,是不是第二次,那这次就算,那不信你瞧着走,刷新第一次不算,你得换车来走着对吧?哎,而且呢,不仅是说它调用的时机,哎,你值得注意,还有就是它其实是能接收到参数的,叫props props。来看一下。走啊,A组件啊,B组件,第一次不算哈,来点换车,把奔驰改成奥拓来,怎么样?Car name是不是接到了?哎,这就是图中的谁呢?Component will receive props啊说老师那后边的你还没给我验证呢,可以验证啊,咱把数的component update,咱把这个这个这个都给它写一下也是可以的呀,来,我们写一写吧,找个同学,那就当复习了啊,那这写好了,叫做组件将要接收,注意新的props的钩子,那我们顺着这个把下边的都写一写呗,Should的component update,走should component update,那你只要写了这个,一定要注意必须written一个布尔值,不允许你不写啊好了,那在这呢,来一个输出,走谁的呀,B什么呀,Should。
12:41
On update,那还差两个对吧,一个是update,一个是date update,我不再敲了,太浪费时间了,我划到上边,把那个view update和date update,把这个全都给它带过来,从这到这复制啊,然后呢,往下滑到B组件,哎,就是这个子组件里边给它粘过来,走,那把这个注释呢也给它粘过来,控制组件更新的阀门,嗯,写这里啊,组件将要更新是吧?啊,那这只需要改一下就得了,这叫做RB啊,这叫做。
13:17
RB,对吧?好了,来瞧一下效果吧,一上来啊,咱没写初始化的那些流程对吧?咱没写这个view mount data mount等等这些咱就写的是更新的,因为咱研究的不是就是图里边的这一部分嘛,好了,注意观察啊,接下来点换车来,同学,Will receive props对不对?Should component update对不对?Will update对不对?其实你少了一个谁呢?Render,那是因为在render里啊,我没写东西,同学,你把这个拿过来,你给它放在render里边,那这呢就是B的谁呢?R,好,来,我们再看一下啊,刷新啊,你看render是不是一上来调一次,然后你点换车,你看将要接收新的参数,问一下我能不能更新,我将要更新render去更新,更新完毕,OK,就把右侧的这个流程呢也给大家演示完了,那别急,我们在下一小节呢,进行总结好了,那这一小节呢,我们先停一下。
我来说两句