00:00
我们再来聊一细节,哎,我们所有写的这些例子的是吧,大家可以看到都是用的这个类似的一个组件,因为只有类才有实例,对吧,只有实例我们才能用this去用它的这个purpose属性好,但是我们组件还有一个类型是函数式组件,那我们函数式组件能不能使用这个purpose呢?诶,我告诉大家能,因为这个函数是组件,函数它有一个特性,是不是函数可以接收参数,哎,所以我们这个purpose可以作为参数让函数去接收啊,当然因为这个函数是组件,哎,没有这个类,也没有这个实例,对不对?所以像这个我们之前说过的这个state,以及接下来后面我们要讲到的这个for这些,哎,函数式组件都是用不了的,哎,除非我们用最新版本的react使用它的HS,哎,我们这个函数组件才能去用这个state。清楚了吧啊。来,那我们来复制一下这个啊。改成零二。
01:01
函数式组件。使用。把标题来改一下啊。构造器不用删掉。好,这些都先留着啊。首先,A。这个是类似的组件,对不对啊,我们的这个是类似的这个组件,那我们。要把它给改成这个函数式的组件,好,我们先把它给注释啊,那改成函数式的组件是不是直接定义这个函数就可以了啊,Function person。好哎,我为什么把它给注释呢?因为这一个person,这一个person,如果我不注释的话,它就会报错啊。来函数式组件啊,像啊这个方法什么都没有,也没有实力什么的,直接就return这个就可以了,是不是来。
02:06
哎,那接下来我们这个name age啊,还有这个six a都没有,没有的话我们先啊随便用问号占位,先来看一下我们这个函数的组件运行正常不正常啊。来运行一下。诶正常是吧,那接下来我们来就来考虑一下啊,之前我们说这个类似组件,哎,我们有这个,呃实例可以用类去获得这个purpose,那我们函数式组件怎么获得它的这个purpose呢?诶,我们函数式组件它有一个特点是吧,函数它可以接受参数。是不是,哎,所以我们通过这个哎标签属性去传递的这些power都会被这个函数的一个参数给接收,就是这个purpose,来,我们来打印一下这个purpose log,看一下我们传的这个name有没有被接收到。
03:05
刷新。可以看到,哎,我们传的这个标签属性内被这个函数的purpose参数成功的给接收到是吧?啊这样的话啊。我们就可以哎去使用这个purpose了,而且细心的话,大家会发现这个purpose这个对象对吧,所以我们去传多个属性的话也是没有问题的,比如把这个sex也给传过来啊,来好age。18嗯,那再来打印一下它看一下。是不是都有,哎都有的话,我们就可以去结构复制去继续,哎,使用了来let name six age,哎,从每个里面去结构,从purpose这里面去结构。那这些就可以继续去使用了,好。Six。
04:02
背景。来看一下啊。啊,是不是成功的,哎,用这个标签的属性,把我们需要传的数据传到了这个purpose里面,哎,传到了组件里面,组件的这个purpose给接收到了,我们就可以用了,好。接下来我们再来看一个问题,我们在学这个类似组件的时候啊,使用了这个proper type对它进行了一些限制,那么我们函数式的组件如何去使用这个purpose进行限制呢?哎,首先因为类的话,它。有这个state关键字,你可以直接在类里面去写对不对,那我们函数是没有这个C的关键字的,你在这里面去写肯定会标错,你看可以直接给你标红了,那我们自己怎么去选,回想我们最开始最原始去使用这个pro的时候,是不是直接在外面对这个组件对吧?对它本身进行这个属性的一个设置就可以了,那我们把它给放在外面,诶对这个组件的这个本身,它的这个属性进行设置,也就是我们只要给了组件这个属性纳入react,他在使用这个组件的时候,它就会按照我们的这个类型去检查。
05:11
清楚了吗?那同样的这个也改一下啊,这样哎,我们的这个类型的限制以及默认值就写好了,那怎么来做一个验证呢,我们把这个。呃,首先这个年龄我们来看一下啊,我们这里给的字符串对不对,这里我们要的是这个number来刷新一下。哎,是不是告诉我们这个A级字段,哎,期望的是一个number,但是我们给了这个自传。好,接下来我们再来测试一下这个默认值,那因为C和A都有默认值,所以这两个我就不给了,看能不能用到这两个值。来刷新一下可以看到啊,用到啊,那我们这个组件啊,就是说函数式的这个组件去使用这个类型的这个限制,以及默认值的一个设置也是没有问题的啊,大家要注意点啊,这个函数是组件啊。因为它有这个能接收参数的一个特性函数,可以接收参数嘛,所以说我们通过这个标签属性去传递的这个,呃,这个值啊,可以被它的这个purpose这个。
06:09
啊,这个参数给接收到,哎,所以我们可以去用,但是函数词组成也仅仅就能去使用这个purpose了,哎,像我们呃,这个state对吧,还有后面我们要讲的这个for,哎,这些只有类似组件才有,函数组件用不了清楚了吧,那除非到后面我们用到了最新版本的react,哎,17那个版本的话,它有一个这个HX可以让我们去使用,让函数组件也能使用到这个state,但这个是我们后面要讲的啊,这里大家记得,哎,我们这个函数式组件它只能去使用这个purpose就可以了啊。
我来说两句