00:00
在了解了非受控组件和受控组件之后,哎,这节课我们再来看两个概念啊,高阶函数和函数客体化啊,当然概念比较难以理解是吧?那我们写一个例子,大家知道怎么回事了啊,我复制了一下这个,哎,我们的数控组件这个代码啊,改了一下。哎,在这。啊,现在还是没有做什么更改呢,啊,那我来想象一个场景,哎,我们这里是用户名和密码,诶当我们输入用户名的时候,通过这个回调函数,哎,收集到我们的用户名放到了状态里面,当我们输入密码的时候,通过这个回调函数帮我们收集我们输入的数据放到了状态里面,对吧?好,当然现在只有两个表单,我们这么写没有问题,那假如我们这个不是注登录,而是一个注册呢,对吧?那有用户名密码啊,确认密码,有你的这个邮箱手机号啊,甚至有时候还要收集你的这个昵称啊,啊等等等等很多信息,那你要每一个这个输入框,你都要为它准备一个对应的一个方法吗?啊,那你这样,你这些方法你要写多少,要一直这么写,写很多吗?是不是好?
01:10
哎,所以说我们来观察一下啊,来观察一下可以看到啊,不管是我们这个用户名也好,这个密码也好,哎,都是我们在触发一个契机事件,然后再执行一个回调函数,对吧?那这个回调函数呢,我们会发现它有非常多的一个,呃,相似点,哎,都是在从这个触发事件的这个到某节点去获取这个值,然后往。啊,这个状态里面,你看set这的往状态里面去设置对吧?那唯一不同的点就是我们这个状态里面的这个K不一样,对不对,好,那你这里,哎,我们输入用户名,那我们这里存的是user name,那我输入密码,这里存的是password是不是好这就是它唯一不同的地方,那我能不能我把这个所有的这个on change,哎这些事件我给写成一个方法,然后我通过这个函数的参数来区别你要存什么呢?哎。
02:03
我们来尝试一下啊。那我们来写一个什么方法呢?C5分对的,哎,我们来写一个这么一个方法啊,那这两个就不要了啊,把这个删掉,这个就是保存输入的表单数据,好把这个名字换成这个啊,对吧,那这个也换成这个,那都调这个方法的话。对不对,那我们得有一个这个参数来区分,哎,我要存的是用户名还是密码。是吧,那我就再传一个参数,哎,User内幕。这里,哎,传一个password,好,那这里我就会有一个地方来接收这个参数,对不对?好,我们来想一个事情啊,之前我们是把这个函数,哎,这个函数作为on change的一个回调函数,直接赋值给了这个on change,对吧?好,这样的话,当我们在触发这个change时间的时候,它会自动去调用这个函数,那现在我们加的这个括号。
03:01
那加上这个括号之后,是不是相当于我们自己再手动去调用这个函数?对吧,那也就是说当读到这里的时候,哎,当代码执行到这里的时候,他发现你这个函数加了一个括号,它就会帮我们把这个函数执行,执行之后是把这个函数的执行结果作为。作为这个UN的回答函数的。是这样吧,好,也就是说这里会执行,哎,也就是说这里是我们在自己去调用这个函数,哎,大家知道我们都加个括号,加个括号的话会调用函数对不对啊,那我们自己调用函数会出现什么?那我们这里传的参数是不是这个就接收到了这个参数啊,那这个就不是事件那个对象了吧,是我们自己传的这个参数吧。啊,我们先打印一下啊,看看效果,看我说的对不对啊,那这个先注释啊。来右键运行。打开调试啊,把这些都关掉。可以看到是不是直行了,你看我们。一刷新就执行了,对不对。
04:02
啊,也就是说啊,因为我们加了这个括号,当代码就是说解析到这里的时候,这个函数直接执行了。对不对,这时候我们再来看我们的事件还有没有效,你来数一是不是没有小的,你看你等我是不是没有小的,都是空。对吧,啊,当然这个空是因为我们没有往那个状态里面设置,但是我们这个契机事件,你看是不是没有效。对吧,他不会再去lo了吧。哎,这点一定要注意啊,之前我们给这些事件给它函数是不带括号的,是我们直接把这个呃,实例的这个函数,哎作为回调作为函数,哎,直接给到了这个on change,哎,就是把我们直接定义的函数作为on change的这个回调函数给他了,这样当触发这个点击事件,它自己去调用这个函数,它自己去调用这个函数,它就会传一个啊事件对象啊,但是这里我们加了括号。哎,这是相当于我们在调用这个函数了。
05:00
对吧,那所以这个事件就得不到了啊,那我们把这个。变量先给改了,先改什么,那我们传的是不同的这个表单的一个类型,对不对,好,我们改成一个data type啊。先一点一点改这个,改完之后我们接着再来说一下这个on change的这个问题啊,就是我们的事件回调函数的问题,对不对,好。回还接着回想一下我们之前写的,哎,之前写的我们是直接把哎直接把它对吧,直接把这个函数啊给到这个事件,哎,作为函数给到这个事件,当这个事件出发时,它自己去调这个函数,当它自己去调这个这个函数的时候,它就会传event一个对象对吧?那我们现在来看一看,现在啊是让他自己触发的,你看是不是他自己去触发这个事件,对事件的回调函的数时,它会传这个应的对象对不对,但是我们因为为了区分这个类型,我们加了一个参数。是吧,那这就是我们自己触发了,不是它这个氢气事件自己在触发啊,也就是说我们这个函数,函数执行它一定有个结果,一定有个反回值,我们是把这个函数执行结果给了它,那我们这个函数执行结果是什么?函数执行的返回值是什么?
06:14
是没有返回去,没有返回去就按底范的,所以我们就相当于是把这个安底范的给了他,那你这个信息想还有效吗?你当然没有效了。对吧,好。那我们现在。呃,想法是很好,我们要把所有的这个啊NT事件都用同一个函数,通过这个参数来进行区分,但是写到这里发现进行不下去了,是吧?对吧,啊,那我们来回想一下啊。接着按我们的概念来走啊,你既然你N,你只是想要一个函数而已,对吧,你只是想要一个函数而已。好,但是我又要传这个参数过去。是吧,那呃,也就是说我这个函数它可以有一个返回值,会把这个函数执行的这个返回值给到他,对吧?那现在因为我函数没有任何反回值,所以是按底方的,那我可不可以返回一个函数来,我返回一个函数。
07:10
对吧,我现在你看我这个函数这里我加了括号,我会执行这个函数对不对,那我这个函数执行之后,这个函数是不是有个返回值,那返回值是不是这个函数是不是它返回是不是它也就和我们的这个之前给这个事件回调函数是不是又一样了,我们是不是又是相当于给了这个事件一个函数,对吧。没有执行这个函数对不对,给了一个这个回答函数啊,那这样的话我们来进行一下验证啊,就当我们执行这个函数的时候,哎,这个函数的执行结果,因为我们手动去执行了这个函数啊,那我们把这个函数return的这个返回值啊,给到这个事件函数,而我们的这个返回值呢。哎,就是恰巧是一个函数,这个函数就可以作为这个事件的啊,回调函数来使用,我们来试一下,那这里输出一看看生不生效啊好,首先来刷新,哎,第一次呃,代码执行的时候,哎,因为我们加了这个括号,所以这两个函数肯定会执行,是不是这两个东西对吧?没问题,那看一下我们事件有没有效,一一是不是有效,你看一直在执行对不对?好。
08:14
哎,那这个就是。作为函数的返回值,这里执行的函数,那返回值呢,其实这块你就可以拿这块给替代掉,对吧?那这个函数才是on change事件触发的,那既然是on change事件触发的函数,可不可以拿到一个事件,它是不是会传一个事件,对吧?啊,那事件里面是不是有触发事件的源事,事件的圆我们是这个到节点,我是不是可以从外角拿到,拿到这个值来我们来看一下啊。刷新一下啊,1234。对吧,好,那我们在打印这个值的时候,我们再连同这个T一起打印可以吧。啊来。加个逗号。刷新一下。
09:00
一诶是不是右侧NAME1234。啊,那密码来。我打ABC是不是这样,我们类型加这个值我们就拿到了,那接下来我们要思考的问题就是如何把这个类型和对应的值给存到状态里就可以了,是不是这样的好,那这块就是一定要注意的一个细节,就是我们的这个react,它的事件函数,它要接收一个啊这个。就是说我们要给它设置一个函数才可以,清楚了吧,一定要设置一个函数才可以,这里面。那我们之前不加括号,确实是给它了一个函数对吧?就是这个this.c form for,对这个函数就是给它了,对不对啊,但是因为我们传的参数,所以加了括号,加括号函数就会执行执行,那么之前我们没有的时候,函数进行进行结果是没有对吧?没有按底范的嘛,所以你这个信息线不生效,但是现在我们呃就想哎,你既然你函数的执行结果呃是按底方的,那我给你一个return的值不就完了吗?我给你return一个函数。
10:01
对吧,那return这个函数是不是就到了这里面,哎,就return的这个函数就可以作为轻体事件的这个回调函数来使用。现在既然可以拿到这个类型,哎,不同的事件的触发事件的,哎,表单元素的这个啊类型对吧,那我们是不是就要把不同的类型以及它的这个值去存到这个状态里面,你看我们的这个输出是吧,那类型和值都能拿到啊,都是一组,那我们接下来哎,就把它给存到状态里面那。怎么存呢?哎,接下来想个问题,怎么存呢?我把菱形注释啊。哎,你如果直接你这么去存啊data tab,然后存这个值的话。好。这样明显一看就会有问题啊,这其实是相当于我们在往这个里面去放了一个data table。这个字段是不是这个键啊,支持它,好,那我们来看一下吧,你不信的话来刷新一下找到哎,这个组件这里啊,选择到我们log那个组件来输入。
11:05
可以看到是不是多了一个data type啊,你不管输入密码,你还是什么都是多了一个data type。对吧,那这样明显是不符合的,对不对?我们其实现在应该想的一个问题是,因为我们的data type是一个变量,我们如何就是让这个变量作为。这个K来使用。清楚吧啊。哎,你当然你加这个单引号也不行啊,单引号是我们这个对象原本的一种写法是吧。标准的写法应该就是打单引号,只不过我们为了省略这个单引号,直接就不写了也可以,对不对,这是我们GS的这个对象嘛,好,嗯,那怎么办呢?其实直接就加一个这个中括号就可以了,哎,加中括号呢,就是给这个变量,哎,加这个中括号。它就会作为一个K,哎,这是作为一个值,那我们来看一下效果。好,现在哎,我们有pass,有user name都是空对吧,我们现在填用户名一一是不是一写到这了,来密码2222是不是写到这了,诶。
12:08
这点要记住啊,如果我们想让一个变量作为一个,就是说对象的一个K的话,那么你要加一个中括号,这个其实是GS的一个,呃,对象上面的一个基本的一个知识啊。来,我们写一个例子看一下啊。二对象基本知识。我在这里啊,定义一个A等于一个内。那我再定一个啊,对象OG。等于什么呢?等于一个空对象,哎,最后我想要实现这个对象是什么样一个结构呢?是这样一个结构啊。
13:02
冒号内啊,等于这个。Come。好。来接下来呢,那我们怎么写。你如果哎,直接写o bg.name等于to对吧?OBG的log当然是完成了,但是并不是我们要说的一个内容来运行一下啊。啊,你你是完成了我们的这个要求,但并不是我们要说的内容,现在我们的要求是什么?我们要求是从这个A变量里面去取出来这个内作为这个对象的K。清楚吧,好,那你怎么写,你点A可以吗?你点A是相当于在给这个对象加了一个A属性啊来我们来看一下效果。是不是加了个A首项。对不对,并不是我们要加的这个内这个属性啊,那你怎么办?哎,对象我们是不是可以用中括号的方式,哎,给它加一个这个,呃,比如说这个name好等于这个汤姆来看一看。
14:03
啥现象?哎,是不是有了name?汤姆,好,那这个name是我写的一个字符上,那这个我可不可以从这个A里直接用A这个变量,是不是也可以的?看到了吧,来再刷新一下是不是一样的。啊。看到了吗?我通过中括号的方式可以使用一个变量,哎,让它作为这个对象的K,如果你把这个搞明白了,你再回过头来看这里,我们的这个写法,你是不是就明白了呢?啊,通过中括号的方式,让一个变量作为对象的一个K。好。这块明白了之后啊,我们把那个没用的就删掉啊,接下来我们来说一下我们这个函数,我们这个函数其实就是哎,高阶函数。清楚了吗?啊,那为什么它是高级函数呢。因为我们这个函数里面,它是不是又返回了一个函数,来我们来总结一下这个,哎,高阶函数的一个概念啊,在这里写,那什么是这个高阶函数呢?哎。
15:07
他就说。如果一个函数啊。满足下面两个条件。之一啊,只要满足一个就行啊,就是高阶函数,那哪两个条件呢,刚才第一个已经给大家说过了,哎,就是刚才我们写那个。他。是什么呢?它是这个返回值是吧?返回值是一个函数对不对?满足吧,你看我们这个函数的返回值是不是一个函数,哎,这个就是高级函数,那么还有第二个条件啊,也就是说我们接收的这个参数是一个函数,这样也是一个高级函数诶。这样也是一个高级函数,只要满足他们两个条件之一,你看其实就是一个返回值是一个函数对吧,一个技数参数一个函数,哎,这样就是一个高级函数。
16:01
就是什么,其实我们之前已经用到了很多的一个高级函数来想一想。啊,我们总想一想常见的一些高级高级函数。啊,我们使用过的这个promise是不是一个高级函数对吧。它返回的是不是函数啊,那比如我们,呃,使用的这个定时器set to out set to out,那set to out传的是不是一个function,你看我们我们来写这个3OUT,它的参数是不是一个function对吧?那是不是符合第一个条件和符合第二个条件接收的参数是一个函数对不对?好,所以它也是个隔离函数,再比如我们使用的数组相关的一些方法啊,这个点map对吧?Map,它是不是也接受一个这个方形接收一个函数的参数,哎,这些都是高级函数,哎,所以说我们看这个名词不好理解,但是真的是我们一写例子的话,你一看就知道是怎么回事了。清楚吧,啊,那个这个就是哎,高级函数,那接下来我们再来看一个名词啊,这个名词就是哎概念啊,这个函数客体化啊。
17:11
那什么叫函数的客体化呢?也就是说,通过。我们先把概念写出,然后给大家写例子再去解释啊。通过函数调用。哎。就说函数的这个调用,哎,通过这个函数的调用返回函数。的方式啊。哎,就继续返回这个函数。就是当我们调用一个函数,这个函数呢,继续返回哎,函数,嗯,然后从而去实现多次接收参数。啊,最后统一处理的这个函数。编码方式啊,哎,这样就是啊概这个概念就被称为这个函数的颗体化啊,比较绕是吧,比较绕,看我们这个例子,我们这个例子不仅是高级函数,也是这个函数的客体化,你看我们通过这个调用这个函数对吧?我们是在这里去调用的这个函数,然后呢,它继续返回了这个函数对不对,你看通过这个函数的调用,继续返回函数的方式实现多次接收参数,是不是第一次调用这个参数我们查的对吧?第二次调用是这个事件调用的这个参数是他自己传的对不对,然后我们最后统一处理函数。
18:33
啊,最后是不是在这里统一处理的这个函数的一个一个逻辑,你看这里面就是我们最后统一处理的这个函数的这个逻辑嘛,是不是啊好,那这种编码。方式就称为这个函数的颗粒化。清楚了吧?好,来,我们来写一个例子,大家都明白了,新建一个文件啊,三啊,演示函数客体化啊。
19:01
标题换了。写个脚本啊,来,我们来定一个啊方形啊,求和的一个函数啊,我们来接收啊,以前我们是接收参数,对不对,来这里return a。加B加C啊。好,在这里去调用这个some啊,点log吧。传三个数二三。来运行一下看一下啊。打开这里是不是说说六好,这是我们呃之前传统的写法,那我们怎么把它改成这个函数的颗粒化呢?首先哎,我们再来过一下这个概念。我们调函数,调用之后继续返回函数啊,实现多次接受参数,最后统一来处理是不是好,那我这里就不return它了,不成谁呢?哎,我再一个函数对吧,那这个函数,那我接收一个参数B,哎,我第一次我接收一个。
20:11
A,也就当我在调了这个函数之后,你看我来调用这个函数,哎,这个函数传了,我传了一个一是吧,这个A接收了这个一,那接着呢,这个函数return了,这个函数是不是就return函数,这个return的函数它也要接受函数接收B,所以我这里那把它的这个返回值,那因为它return的是一个函数,对吧,那我再加个括号,再执行它return这个函数吗?是不是,那再传一个数就会被B接收清楚吧,那同样的道理,那我再一个函数C,也就是说你执行完之后的一个结果,相当于我最后return的这个函数对不对?所以我再加一个小括号,就执行你最后return的这个函数,然后把这个参数再传进去。清楚了吧,那我在这里去统一处理我的代码啊,统一出代码,我看什么A加B加C,好,我来看看这个结果和我们之前那种写法一样不一样。
21:05
刷新是不是一样的好?这个就是。函数的这个颗理化啊,通过函数调用,然后返回函数,实现多次接触参数,最后统一处理,哎,但是大家可能疑问,哎,你这么写多麻烦,明明一步可以搞定的事儿,你为什么要这么麻烦啊?当然这个例子这么写去麻烦了,但是你回过头来看我们这个例子来,你如果不使用这种颗粒化,你告诉我你怎么来处理。对吧,怎么来处理这个event事件对象,你要知道只有当on change它去触发这个函数的时候,它才能给我们传过来,这个事件对象我们自己传没有用,你说你作为第二个参数传,你传什么,你你怎么传没有用的啊,对吧?但是我们又要传一个自己定义的一个参数去来区分这个事件的,哎,这个输入框是什么类型的一个输框,哎,是哪个输入框?对吧,同时我们还需要一个让这个事件自己去触发,自己去传一个event对象,因为我们要从这个event对象里面去获取到,呃,我们输入这些值对吧,如果你不用这个颗粒化,你怎么写,是不是没法写了。
22:10
这就是啊,高级函数和函数颗粒化啊概念给大家放到了这里,哎,在最后再次强调一点,这里大家一定不要绕过去啊,我们的react它的这个事件,也就是说这个里面,这个里面你要写什么,你要写一个function,你要写一个函数来给这个事件作为这个事件的回调函数,清楚了吧。啊,你要写一个function才行了,对不对啊,我不管你这里你是什么表达式,你再多的代码,你只要给我一个function就可以了,清楚吧,我我这个昂契尼事件,我要用你这个方作为我自己事件的一个回调函数用的呀,所以说嗯,在我们以前,哎,之前讲课的时候,我们直接不加括号这么写。对不对,哎,是直接把这个函数给了它没有问题,那我们现在加了括号,加了括号,但是这个函数的返回值,它是不是也是一个函数,也是相当于我们是把这个。
23:01
返回值给到了他,是不是也是把这个回调函数给到了他,哎,把一个函数给了他是不是正常的,也就是说我们这里你如果放函数的话。你加不加括号无所谓,我只要你最终的结果是一个函数就可以清楚吧,我只要你最终的结果是一个函数,哪怕你执行了再多次,再多次,只要你最后一次的你的执行,你的结果是一个方形,就没有问题,清楚吧,因为react的事件,它要的就是一个函数而已。好,他不关心你这里面写什么,他只要函数。只要这个结果是函数啊,这点大家不要绕进去啊,好,这个就删掉啊。哎,所以我们也利用这个特性,我们自己定义的函数,呃,最终去返回了一个函数,因为只有当它自己去调用这个回调函数的时候,我们才能得到这个。Even的实践对象。啊,这个就说到这儿。
我来说两句