00:00
好了,来同学咱继续啊,刚刚呢,这有一个错别字啊,不是接受啊,是接受,哎改一下,好,那给它关掉,同学我问一下我们在学习什么呢。是不是组件的核心属性啊,打开课件,课件里怎么说呀,组件三大核心属性对吗?但是在我的代码里,我一直在跟你强调叫组建实力的三大核心属性,那而且之前我引导大家是这么说的,我说同学一旦要说了实力这两个字,这种形式的组件就跟我们无缘了,因为这种组件他连自己的this都没有。那还怎么this点啊,对吧?那还怎么通过组件实例去取一些东西,连实例都没有,那你像这个state,我问你从哪取出来的呀?你读状态怎么读this.state点之前写的is hot对吗?This是谁?组建实例对象,那我再问你这个呢?Prop你怎么写呀?你想获取外部传过来的prop怎么写来着?this.props完了点name对吧?那你看this是谁呀?组建的实例对象,所以说给大家渲染的一个气氛就是如果你的组件连实力都没有,你是没有办法玩实力的三大属性的。
01:18
但这里边呢,说一个特殊的情况,一个极特殊的情况,同学,对于函数式的组件,你别觉得它没有this它就完蛋了,没有this呢,他确实玩不了这两个属性,一个是state,一个是呢,接下来我们要讲的这个res,但是有一个人他是可以玩的,谁呢,就是pro,哎,说老师,那为什么呢。那正常来说,那如果说你没有意思,那就没有实力,没有实力,那实力的三大核心属性就都玩不了,那为什么他就能玩呢。那是因为函数有一个特点,同学函数啊,它能接收参数。哎,好了,带着这个疑问呢,我给你写一写啊,你看一下复制一份,在第三个基础上啊,走第四个名字就叫做函数式组件使用prop,好,后边这呢删掉。
02:17
走诶,函数式组件使用pro啊,大家别急啊,慢慢来,构造器呢,说了可以省略,直接干掉,走,那这是对标签属性进行一些限制对吧?啊,那在这先留着吧,同学接下来做第一件事儿。我把这个类式组件啊,我想改成函数式的组件。那怎么改啊?函数式组件不知道你还记不记得,来找中定义组件,函数式组件非常简单。直接写函数。名字大写,里边直接写返回值对吧?好,来,关掉走,我们这改那咋改写着呗,在下面来一个啊,Function名字呢,也叫做person,它是个函数,必须有返回值,那么到底返回什么呢?你要展示什么就返回什么呗。同学,我问你啊,函数里边有static关键字吗?那可没有,那所以说这块你不能写,那这块你也不能写。
03:13
同学,函数式组件需要写render吗?也不需要,那我需要的就是哎,Return这些东西对吗?好了,复制给它折叠起来写在这儿,哎,走,你瞧吗?同学,你看名字啊,性别啊等等这些,但是问题出现了呀,同学。你先把这个函数式组件折叠起来,你看这个类式组件,人这确实能用name性别年龄,但是人家这都是从这取出来的吧,从哪儿取出来的呀啊,人家从哪儿啊,从组件实例对象的pros属性上取出来的,而且呢是你在这儿,只要写了东西,人家就能帮你,诶自动的收集好,全都收集到这儿,所以说类似组件因为人家有实力,所以才能实力点props,那你觉不觉得你的函数是组件?
04:06
哎呦喂,它没有this,如果你在这crosslo,你输出这个this,反正你自己看它肯定是unde found之前咱测试过对吧,那所以说这里边的东西好像也没办法写下去了是吧?哎,那你别急,我先写几个问号,这儿呢,我也写几个问号,不知道写什么了嘛,你要直接看他肯定是报错的呀,走问号说老师,那接下来,接下来你就得把这个类似组件呀,你就得给它整个都注掉,哎,整个都注掉走。要不这个person和这个person那不命名冲突了吗?保存右键你打开你看一下啊同学你看其实东西也能出来对吧?嗯,但是啊,拿不到你传入的值了,那来那咱写写呗,说老师可是我给他传内呀。那如果你这里边缺少实例对象,那我就没有办法写this.props呀,那你就根本写不了啊,哎,不是同学函数有一个特点,函数能接受到参数,那我告诉你啊,你所有传递的标签属性,你比如说老师我还想传一个性别啊,性别呢是女,还想传一个年龄啊,年龄呢是一个数值型的18。
05:17
那我给你讲所有你传递的这些标签属性,人家都帮你收集好了,在哪呢?在这儿呢,而且给你收集成一个对象了,就跟之前this.props啊,他身上那个props是一模一样的,那不信呢,你输出一下看colo pros注意观察控制台上的输出来怎么样?诶东西是不是都给你了呀?那所以说你在这儿可以做诶这么一件事,Cost结构赋值,诶谁呢?Pros里边怎么写呀,Name age,性别,那这就都简单了呀,来删掉姓名就是name,当然不能这么写了啊,得是花括号name,那同理,这会得是啊性别哈,是这个啊,那年龄呢,H对吧?来回头看效果怎么样怎么样,同学,函数式组件是不是也成功的使用上了pros呀?说老师那函数式组件能不能玩玩state呢?那是肯定不能的。
06:16
啊,那除非是后期呢,咱们讲到react最新版本所提出的那个hoookx,哎,才可以说老师好像还有一个啊三大属性你好像还没讲到呢,是不是这个raps啊,那函数是组件能不能玩呢?也不能函数式组件只能玩玩pros,那玩pros也是被谁拯救了呢?哼,因为它自己本身是函数,能接受参数,OK好说老师那你这个我怎么对诶传递的这些值进行限制呢?哎呀,该怎么写还怎么写,你把原来的这些东西呢复制,那当然你不可能放在函数里了,函数里可没有static这个关键字,老师,那怎么办呀,那没办法的办法,你只能甩在外侧了,对吧?来缩进呢,调一下老师甩在外侧,你之前怎么写就怎么写,Person点,你只要给这个组件自身加上这个属性,它就可以这样做,那就可以这么玩,可以进行限制,那这呢删掉咋写点儿default,那看看它能不能奏效啊,不传性别,不传年龄,走,只传名字,回头再看。
07:23
默认的难,默认的18,如果你的名字写的不是字符串,是一个数值的100,马上告诉你不行,对吧?我却接到了一个string,我要求的是一个,哎,我要求的是string,我却接到了一个谁呢?Number OK,所以说呢,这就是函数式组件呢,去使用props,那我把这块呢,就给它删掉喽,哎,同样是创建组件,但是这是函数式的组件,那函数是没办法的,只能写在外侧,哎,所以说同学从理论上来说,函数式组件能不能使用props啊,是可以的,也只能用一下props了,别的它都用不了啊,OK,那这小节呢,我们停一下。
我来说两句