00:00
好嘞,同学,那pro呢,我们学的差不多了,接下来呢,我就得把一个问题拉出来,重新咱们聊一聊了,说老师谁呀,构造器同学,你还记得吗?就之前啊,我们在写这个state的时候,你打开。打开这个组件,我里边是不是写了构造器,然后那个时候我跟你说,我说同学构造器里啊得收到一个props,大家也别管它是什么,反正呢,后边咱会讲的,然后呢,得传给super对吧,那接下来呢,是时候聊聊这个构造器了,因为props呢,我们也讲的差不多了,得聊聊它了,来关掉,回来打开,直接来到这里边吧,啊就在第三个里面说折叠,折叠这两个都是对标签属性进行限制的,这是类似组件里边必须要写的一个方法,谁呀render,好了,同学,咱聊聊这构造器呗,我不想让大家看到特别复杂的代码,所以说接下来呀,就这些东西呢,我全都给他删掉,不要了啊,只要一个渲染就是Jerry,然后呢,其他的那些东西呢,我都给他好好传着,这个说话,这个方法呀,我也不要了,哎,那在这儿呢,就得给他删掉,不要再限制了,我不传了啊,那这儿呢,也给他写什么默认的就是男18岁是吧,那既然都写默认值了,我就改。
01:19
改造一下啊,名字是不是得传呀,然后性别和年龄我都不传的,就是男18岁对吧,好来,那你看一下啊,现在呢,页面变成了这样的。哎,就是一个人Jerry男控制台呢,我也打开刷新,也没啥错误哈,最小化回来,同学,我定义这个组件的时候,Person组件是不是没写构造器啊。来,接下来构造器写上,哎,构造器写上,我知道构造器是可以省略的,但是现在我想给它还原回来,Constructor构造器同学,按照官网的描述,构造器会收到什么呢?是不是props呀,对不对?哎,那也就是说意味着你所传的name Jerry。
02:03
还有你没有传的这个人家自动给你补上的男18是不是都会在这个里边收到呀,那我们看一下能不能收到呢,Pro。说老师,那我看看吧,你这么写可就要犯错误,同学,Person是不是继承了他呀,是不是还写了构造器呀,你说是不是得掉super啊,走,那按照官网上所写的,是不是应该把props再传给谁呢?Super,那我们就看一下这行的输出啊,回到这儿来到控制台刷新,你看啊,同学,有吧这些东西,说老师那个年龄和这个性别我没传,一再强调你没传,人家这是不是给了一个默认的呀?哎,那在这儿呢,就都会收得到。说老师那就收到呗,那为什么还要给super呢?同学,我们试一下,不给super行不行呢,走。行不行啊,刷新看行不行行啊说老师那要这样的话,那就这样吧,我这也不想再输出看了,我这压根儿我接都不接。
03:05
说老师这行不行呢,刷新也行啊,同学,你就想构造器其实我都可以不写,你说我还纠结什么接不接,传不传的问题呢,但是咱们就想深入的探讨一下,我这如果接住了之后,我要是传给super和我不传给super它能有什么区别呢?这是第一个问题,第二个问题类中的构造器它到底有什么作用呢?是吧,啊是它可以省略,那要是不省略的话,我要写构造器,一般里边都做一些什么事呢。对吧,啊,来吧同学,复制构造器constructor,我们来到react官方文档,打开react,直接在这个里边进行搜索,走构造器。稍等选择第一个就可以啊,参考构造器点击进去。同学,官网上说的非常明白了,我们直接读红色框里的就可以。通常在react中构造函数仅仅适用于以下两种情况。
04:13
你都用过了,来第一个通过给this.state赋值对象来进行初始化内部的state同学,你想想当年咱是不是这么做的,回到代码当中。找到state,找到state的基本使用,同学,你在构造器里边是不是写了这么一句话?那你看看是不是正是他官网上所描述的呀,哎,通过给状态赋初始值,那所以说这个呢,你用过了,那还能干嘛呢?往下读为事件处理绑定实例。舒老师,这是什么意思呢?没懂,回到咱们当年写今天天气很炎热那个案例这句话干嘛呢呀?你发现你所写的这句话是不是就是官网上形容的为事件处理函数绑定实例啊,你如果没有这句话,没有这句话我问你,你所自定义的那个change whether方法this是不是丢了呀?所以说同学你之前用构造器里边做了这件事,做了这件事儿,那都是官网上所描述的,那我想问一下同学。
05:22
我在构造器里边不写这个,我直接写赋值语句state简写方式是不是也能初始化状态,还有就是你自定义的那个函数this指向它丢失,你非得写构造器在里边写这么复杂的东西吗?不用,我们可以怎么做呢?通过赋值语句配合箭头函数的形式是不是也可以搞定?那所以说这么来看同学,构造器是不是真的是可写可不写呀?哎,OK,回来说老师,那如果我传了这个pros。然后再传给super,那能有什么影响呢?在这儿他说的也很明白了呀,同学,你读他说啊,在react component子类实现构造函数时,应在其他语句之前声明调用super,而且要传入props,否则你注意听他后边所说的,否则this props在构造函数中可能会出现未定义的bug。
06:24
他整个所说的这句话,我给你来到咱们的案例里去形容,其实就是这么回事儿,同学,我问你啊,构造器不写影响什么吗?什么也不影响我初始化状态刚说完我可以这么玩对吗?我所有自定义的方法,我直接可以写成赋值语句加上间子函数的形式,对吗?都解决了,所以说构造器呢,是完全可以省略的,但是如果你要写构造器。同学,只要你写构造器,里边必掉super。但是你接不接这个pro呢,我们也发现了,我不接我不传没啥影响,但是如果说我接了,我这也传了,和刚才我不接我也不传有什么区别呢?同学一句话,区别就在这儿,你注意看啊,我接没接,接了我传没传给super传了。
07:12
如果你这接了,如果你这传了,OK,同学,你看着colo this pro。我为了证明这是构造器里面的输出,所以说前面我加了一个标识符叫constructor,走,我在构造器里面输出谁呀?输出实力自身的那个props,注意我没有这么写,你这么写的意思就是你接到啥你就输出啥,我这儿的意思是我要输出实力自身的pro,你注意看啊。右键打开刷新能不能拿得到能,但是这时候你注意了,如果你这也不接,你这也不传保存,那你看一下效果吧,嘿嘿,什么出现了呀,是不andde find,哎呀,所以说同学一句话总结吧,你说类中的构造器能不能省略完全可以,那我再问你,如果我不省略构造器,我这儿接不接pros接,那你这传不传props传,我要是不接我也不传,好像没啥影响,对吧?其实有一个影响的地方,一个小小的地方就是你在构造器中已经没有办法通过实例点props去取值了。
08:31
如果你还想在这这么写this props,那就需要你这接一下,那也需要你这儿传一下,说老师,那如果我接了,但是我却没有传给super呢,同学,那这就还是刚才那个意思呗,你接了没啥用,主要是你得传过去,朱老师,我接了,但是我不传,嘿,那你看吧,走还是安顿饭的。所以说同学类中的构造器接不接props,传不传pro,就看你希不希望在类中通过实例去访问pros。所以给大家总结一句话吧,走啊,构造器是否。
09:10
接收是否传递给super取决于取决于什么,是否希望在构造器中通过this访问pro。如果你没这需求,同学来吧,构造器删掉,如果你有这需求,老师我希望在构造器里边通过实例去取到pros,必须接,必须传,但是这种场景同学极其罕见,甚至是说可以可以说啊,几乎用不到,为什么呢?同学你想一下,你说在这一步其实你是不是已经接到props了,那如果你在构造器里边真希望去哎,做一些什么?哎,Props相关的判断,如果你真是需要这样的话,你为什么还要this点呢?直接写是不是就可以了?
10:11
哎,好了,那同学借助这个呢,我就给大家说了一下,关于类式组件里的构造器接不接props以及传不传pros的,哎,一个小小的说明啊,其实也全是参考官网里边人家的这个说明,你看他说,哎,否则在这个里边可能会出现未定义的bug,还得看你具体是哪个react的版本,那所以说呀,同学一句话吧,类中的构造器能省略就省略,几乎在开发的时候我们根本不写构造器,那这儿呢,只不过是我们较了一下真而已,对吧?好,这小节我们停一下。
我来说两句