00:00
好的,各位在简单的复习了类的基本知识之后呢,我们就可以正式的去学习这个类式组件了,回到代码当中啊,我呢,已经提前准备好了这个文件和这些固定的内容啊,同学们,我为了这个节约时间啊,那来吧同学,函数式组件啊,你就得定义一个函数,同学,那你说类组件呢?哎,那肯定得定义一个类对吗?好了,写好注释啊,第一个走叫做创建类式组件啊,那往下那创建类的关键字class,那么给你的类起个名字吧,那接下来我说一个细节上的问题啊,同学你打开函数式组件,我问你啊,这个my component,同学们是不是函数的名字。但是你这个函数在react里边是作为组件使用的,所以说你的函数名也就是您的组件名,右键打开这个网页,借助开发者工具,我们一起去看一下啊,找到components啊,这呢是吧,哎,My component,这不就是你的组件名吗?啊说老师那我想改一个名字,哎,那你看一下吧,你在这改成my component2,哎,那你这呢,就得是也得改成二,对对应上嘛,要不它找不到组件了嘛,对吧?哎,保存回头你看组件名字是不是就变了呀,一句话函数是组件撤回来啊先函数式组件,函数名就是您的组件名,那你说类式组件呢?哎,一句话类名就是您的组件名,所以说给你的组件起个名字吧,啊叫什么名字呢?跟之前保持一致吧,叫my component OK,走一个类是不是定义好了呀。
01:45
同学说,老师,那我就成功的创建了一个类似组件,不对,你如果只写这些代码呢?我只能说你创建了my component这个类,但是这个类跟react中的组件它不挨着,你这个类也不能作为react中的组件去使用,那都是不可以的,为什么呢?因为你少继承了一个人。react中有一个要求,如果你用类的这种形式去定义组件,那就得要求你的类必须得继承另外一个类。
02:20
老师,那另外一个类是谁呢?啊,说一下是react里边一个内置的类,人家提前给你写好了,不用你自己去写,所以说写上吧,Instance继承继承谁呢?React中一个内置的类,那个类的名字你一定要把它记住,叫做component,哎,组建啊,这个my component吧,同学,是我自己起的一个名字,我自己自由发挥的,你这个component是react里边内置的,没瞧见都react点嘛,对吧?你这可以随便改名好了,不多墨迹。那么接下来问题来了,同学,这是不是算作A类,这是不算作是B类?A类是不是继承了B类?你可要想好,接下来你这里边写构造器,构造器里边是不是必须得调用super?那问题是同学,这构造器它到底写还是不写,对吧?咱之前说了,这构造器呢,如果说你想做一些初始化的事儿,对吧,那你就写,那要。
03:21
没有什么其他的事,那你就不写对吧,你就比如说啊,同学来我们重温一下,回到复习里边啊,你仔细看啊,瞪大你的眼睛看人,这个类里边构造器我是不是写了,是不是也有一个人的说话的方法呀,就即便我student这个类里边我什么都不写,那你注意看啊,我可真是什么都没写啊,那咱之前也见过这一块,你new了一个student之后啊,你就正常传你的Tom,传你的18岁啊,然后再写上一些别的什么信息啊,你比如说这个啊高一好了,那我们输出呢,这个s tue,右键打开网页,我们看一眼,来到控制台刷新,走同学有没有信心表说老师,那你把这个高一给弄丢了呀,那你想嘛,你想再来点特殊的东西,那你就得写上构造器,你要不写构造器,那你传这两个就够了,说老师那他怎么有TOM18,那你传这了吗?
04:18
哎,我问一下,我要这么改呢,我在这来一个this.school等于at硅谷,跟之前是差不多的啊,同学我可没在student这个类里边写任何的代码,连构造器我都没写,你发现其实那学生啊,他也有school这个属性,其实你觉不觉得同学一切的功劳都是你继承这一下子搞定的呀,好,那这会儿要说通了呢,那别的咱就好聊了,我撤回来啊,这个代码走走走走走走走,撤回来,好,那关掉,回到咱们这里边,同学你说这构造器写还是不写吧,说老师,那我得看看以后他做不做什么初始化的事儿啊啊说老师做还是不做呢?我也别说做,你也别说不做,我们打开官方文档去看一眼,走,打开react中文网,同学你什么都不用点啊,咱们就往下边看,诶滚动滚动滚动来瞧这,你先别看下边这啊,咱还没有讲那个pro呢,咱就。
05:18
看这。他是不是在用类定义一个组件,他写的名吧?嗯,他记成这个了吧?嗯,仔细观察粉色盒子里边的东西,同学他写构造器了吗?没有,他没有写构造器,那我们也不写构造器,因为这个构造器是完全可以省略的,但是同学我先声明一下,不代表构造器,这事儿就过去了啊,等咱们学完了组建三大属性之后,我单独开一个视频给大家讲解关于类似组件里的构造器,那里边还有点文章,但是现在你不写构造器对你一点影响也没有,因为官方也没写。同学来注意观察,人家没写构造器,但是人家写了一个东西叫做render,对吗?说一下render是必须写的,而且注意render是不是有返回值也是必须的。所以说,你想用类去定义一个组件,有几个必要的条件,一、必须得继承这个父类。
06:15
二必须要写render,你这个类里边有没有别的方法,我不管什么啊,吃饭睡觉,打代码这些方法,我不管你有还是没有啊,必须得给我准备好一个人,谁呢?Render,而且render必须有返回值,这三个要求必须同时满足,那所以说回到我们这个里边,Re是不是render好,有没有返回值,有问题是返回什么。跟你的函数式组件一样,你想展示什么你就返回什么,那我想展示这个,那就给他拿过来复制放在这儿,但是里边的内容得改,对吗?来,同学们参考课件。把函数改成类,把简单改成复杂好了,回头我适用类定义的组件,我适用于复杂组件,关于简单组件和复杂组件,咱讲完组件实例的三大属性,你直接就明白了啊,所以说在这儿呢,咱也先别急,先这么写着,朱老师那我也满足了呀,继承了这个写了render也有返回值,OK,所以说你这组件诶定义的没毛病,那接下来呢,那就是固定的一步了。第二步,渲染组件到页面渲染啊,组件到页面怎么写啊,React dom.re DR说一下,这里有个render,这里有个render,他俩没啥关系,同学仅仅是重名而已啊。说句玩笑话,你女朋友和我女朋友哈,都叫小芳,但是此小芳非彼小芳。OK,继续往下写,Render传俩参数,第一个是你要渲染哪个组件,My component,标签是不得。
07:53
闭合呀,往哪放啊,Did走往test这个容器里边放,右键打开东西出来了是吧?哎,OK,切到控制台,开发者工具切到components,看组件在这呢,My component OK,好的,哎,说老师那东西就出来了,那类式组件咱是不是就讲完了呢?别急,有几个详细的问题我们要聊一聊,首先问你第一个问题,Render是放在哪里的,我写注释,你思考放在哪里的哪里啊同学,其实你就参考之前我带着你复习的那一块,同学你说speak是放在哪儿的呀?是不是类的原型对象上啊,那供谁使用啊,是不是实例使用?那所以说复制跟这都是一样的啊,类的原型对象上供实例使用。诶同学,一个问题呀,就此出现了。
08:53
实例呢,他不是说供实例使用吗?那我就想问你,那实例呢,同学,之前我带着你复习的时候,我想调用speak,我都是怎么调用的?同学,我是不是都写这段代码,哎,我说同学们弄一个人的实例,你有一个a person,然后呢,给他传点东西进去,他叫Tom,他今年18岁,然后p1.speak同学自己弄出来的实力对不对,自己亲手写的实例点,哎,那当然你得写好画啊,得调用对吧?好哎,那同学啊,我问你这的实例呢,你说老师可是呢,这实例呢,同学我想问一下你,你有他了吗?也就是通俗点说,你有写这段代码吗?嗯,你有写这段代码吗?没有,也就是说你压根就根本没有拗过这个类的实例。
09:53
哎,那同学你逆着推啊,刚才呢,我已经看到了页面上有没有东西,有页面上有东西就证明有人拿到了这个return的返回值,就证明有人绝对调用到了render,而且我还告诉你render是供实例使用的,所以说你绝不觉得同学在你看不到的位置其实是存在一个这个类的实例的,对吗?
10:16
OK,老师说,老师那实力在哪呢,我看看。同学别急,先一步一步验证,我说这个render呢,是放在类的原型对象上,那如果说的更准确一点,咱也别说类了,直接就告诉人家谁的原型对象上,My component的原型对象上,那同学真的假的呀,我们验证一下来,打开控制台,咱直接就在控制台里边写啊,My component点二输出它的prototype是原型对象,走展开render是不是在这儿呢?OK,好了,第一个问题验证完了,它的确放在了my component的原型对象上,供谁使用实例使用,那咱刚才说一定是有实例存在的,对吧?那我怎么看不见呢?那么就得聊到一个细节上的问题了,你是不是写了一个组件标签,我知道同学你没有写,你有这个关键字,你有一个my component的实例对象,但是你不是写组建标签了吗?你一写组件标签。
11:20
不仅react帮你拗了一个实例,哎,那所以说接下来我们要聊的呢,就是这个问题,当你执行了这个东西之后发生了什么?之前咱们不是在函数式组件里边聊过这事儿吗?哎,那既然咱聊过呀,就直接粘过来吧,复制啊,给它放在这里走,执行了这个东西之后发生了什么,那第一步其实都是一样的,React解析组件标签,找到了my component组件,那么接下来往下呢,就不太一样了,这块呢,我先给它删下去。第二步是这样的,React发现组件是使用类定义的,然后就不是调用该函数了,然后就得这么说了,随后又出来该类的实例,该类该类是哪个类呀?就是这个类啊,哎,所以说你看吧,New这个动作不是你做的,是react帮你做的,然后再补一句话,并通过啊,该实例调用到。
12:34
原形上的render方法对吗?哎,所以说同学,其实render掉没掉肯定是掉了,谁掉的呀,My component这个类的实例去掉的这个实例还是由react帮你拗出来的,OK,再说第三步,那其实就是将render返回的虚拟do转为真实do,最后呈现在页面当中,所以说嘛,同学啊,你确实没有拗人家帮你拗的,而且我问你通过谁调用到原型上的render方法呀,通过谁呀?刚才你拗出来那个实例,那所以说同学我再问你render中的this是谁是谁呀?一句话,My component这个类的实例对象这不在这儿了吗?是吧?哎,好了,那我们验证一下它到底是还是不是呢?
13:34
输出this做个风格啊,我在前边呢,给你加一个re DR render中的this冒号,在这来一个逗号,你就观察这行代码的输出,看看那个this到底是不是它的实例对象。同学得输出什么样的东西才能证明这个this是它的实例对象呢?
14:01
好像应该是这种形式,开头必须明确的标识着是my component,后边呢,诶是一个实例对象,那里边有什么我们就不管了,总之它肯定是一个实例对象,对吗?好了,那我们看一下,打开网页控制台,上键刷新。调一下宽度是不是实例对象啊,是谁缔造的呀,它所以说红色的就是my component的实例对象,OK。哎,那咱再多聊一句,同学绝不觉得my component的实例对象身上有这么多的属性啊,同学,我们展开看看都有什么啊,哇,这么多同学说一下这里边儿的东西有些是给咱们编码人员用的,有些呢是react本身自己在用的,那我们需要关注的呢,是这三个人。
15:00
这三个人呢,被称之为组建的三大属性,特别重要,我们会一一讲解的,那么讲解完这三个人之后,其实有一个人呢,我们也需要去扩展的了解一下,就是这个context,哎,回头也会给大家讲得到,那么剩下的这些我们就不去关注了,OK,那我再多问你一个问题,同学,我这个累呀,是不是连构造器都没写?我连构造器都没写,那我就没有机会去做那些初始化的事儿,那这里边怎么还多出来这些东西呢?这是怎么回事呢?这什么state呀,什么props啊,这都是谁放上去的呀?同学一句话,都是源自这个继承的功劳,OK,你想想就跟咱们写字是一样的,同学person有了构造器,有了方法,那你说即便你的student里面什么都不写,那你刚才也能看得到他也有这些东西吧?哎,OK,好了,那撤回来啊,回到咱们的这个类式组件中,最后再说一个称呼的问题,大家注意看这啊,我刚才说render中的this是谁呀?我告诉你是my component的实例对象,那其实这呢还能换一种说法,同学,你的my component不是一个一般的类,它很厉害的哈,因为它继承了你这个类,所以说你的my component也可以称之为一个组件,那所以说我还可以这么说,叫做my component组建的实例对象,把这的要是再省略掉,就是my component组建实例对象,所以说你会经常看到啊,有一些文章啊,还有书里边直接就说了组建实例对象。
16:45
哎,别把你绕进去,同学你说我都能说组件实例对象,是不是就证明这个组件肯定是用类定义的呀,你函数是组件,连自己的this都没有,你跟我谈什么实例呢,对吧?哎,其实还可以再精简点说叫组件对象,但是我不这么说了,这么说呢,容易让大家晕,对吧,我一说组建对象,你说哎呀组建对象这是组建,那组建对象说的是不是就是他呀,其实不是他,哎,我说的是他所缔造出来的实例,哎,那所以说我再加上这俩字,组建实例对象,那所以说以后呢,说这两个人呢,他都是等价的,我就用这个符号去给你表达了,OK,哎,就是一个字眼的问题啊,以后可能啊,哎,我们就这么去表达了,好,那说到这儿呢,整个类式组件相关的基本内容,我们就讲完了,好了,这一小节呢,我们停一下。
我来说两句