00:00
好了各位,那说完了受控组件和非受控组件之后呢,按照课件的顺序啊,我们应该给大家讲解组件生命周期啊,一个特别重要的概念,但是在讲解这个之前呢,我想给大家扩展两个点,这两个点学完之后呢,以后跟人家交流的时候,人家在拽一些概念的时候呢,不至于说咱们听不懂,而且最主要的是你学了接下来我说的这两个点啊,能对代码做出一定的优化,好吧,我们先回到咱们的代码当中,我已经建立好了这个文件夹和文件啊,我要给大家讲的呢,是两个概念,一个叫做高阶函数,一个叫做函数的颗粒化啊,文件呢我也建立好了,在这儿我还用刚才那个案例去演示啊,刚才咱们那个案例呢,还有很大的完善空间,慢慢来,我把这个受控组件这一块呢,整个都给它粘过来,我看从这吧,从这个创建组件一直到最后整个这些呢,我都粘过来,复制折叠关掉来到咱们这里边。
01:00
那在这儿。我粘过来啊,然后缩进,不对啊,咱简单调一调,应该是从这儿开始不对的,从这儿到这儿呢,都得往后去挪一下啊,来走,然后里边的东西呢,还得再缩进一下,这是类里边的东西,走再走,哎,这回呢就对了,OK,行,那来咱看看啊同学,你觉得刚才这个案例有哪些问题呢?或者说哪能再优化一下呢?这还是有点不对啊,这缩记来我再调一下,走啊,那下边再来一下,从这到这儿来再走,OK,这回就行了啊,有什么问题呢?我们整体看一看啊呃,空行删掉,我想让你呢能够看到代码的全貌啊,删掉,这也删掉,然后往下,诶,OK,差不多呢,就这样子啊同学你说我有一个方法叫做save username干嘛的呀?往状态里边存谁存user name,那这个呢,往状态里边存password,你就观察红色框的代码,你再看看蓝色框的代码,同学觉不觉得重复度有。
02:03
有点高啊,都是往状态里边存东西对不对,那你说只不过一个存的是username,一个存的是password呗,你有必要写两套吗?而且你要是觉得老师无所谓,不就两个输入项吗?那你想一下同学,如果这不是一个登录,这是一个注册呢,除了要输入用户名、密码,还得输入重复密码,身份证号儿,手机号,家庭住址,邮箱,你觉不觉得你会写出大量的这种方法,Save password save ID card save email save address,你就save去吧。同学,那这代码是有问题的,哎,那同学你想想,如果让你优化,你怎么优化呢。现在写的吧,就有点儿分家,Save username只管保存用户名,别人他不管,那save password呢,只管保存密码,别人他也不管,哎,那你说这同学,你说我这么设计行不行呢?你考虑考虑啊,我不写具体的什么save username save password,我不给他写这么多,我就写一个方法,就叫做save form date啥意思,保存表单数据,我没说具体是哪个数据,说老师,那你怎么区分呢?那你想一下我是不是要存用户名啊?
03:26
啊,那你就这样,Save form data来个小括号,告诉他你要存的是什么,存的什么呀,Username,那同理,你说密码这一块,我是不是就也可以把它粘过来。也调用save form data,然后这呢,我就写一个password对吧?哎,你看共用一个叫保存表单数据到底保存谁,我通过参数去界定是不是挺好的。不要觉得你就写完了,你有save form data这方法吗?没有,那没有就改一下吧,那在这呢,我还得敲出这个回车来啊,防止你看代码段同学你说我还需要save password吗?不需要了,我还需要save username吗?也不需要了,那我写一个就得了,我在这基础上呢,复制一下它叫什么名啊,叫save form data,那这俩我是不是就都不用了呀,删掉哎,我用一个就得了,不叫保存密码到状态中,就是保存表单数据到状态中。
04:32
说老师那你这好了,写完了,同学写完什么了呀,你这么写有严重的问题的,说老师哪有问题这儿啊,你这么写的后果就是保存啥都算密码。是吧,而且还有一个问题呢,同学啊,这是不是UN change啊,你是不是在指定一个事件的回调啊,咱之前一直强调在写事件回调的时候不要加小括号,同学我问一下加了小括号什么后果呀?想想这个案例,今天天气很炎热,这个案例来,同学你点击一的时候,你是不是写了change weather。
05:11
然后等你点的时候,人家去帮你调那个change weather就在这儿呢,对不对,你如果直接加了小括号,你告诉我这是什么后果呢?没等你点呢,人家就已经帮你调完了,你说对吧,所以说这样写肯定是不行的,说老师那试试呗,万一在这行呢,行,满足你来咱试试,同学,你已经加上小括号了吧。你是不是传了username同学,那我告诉你,你这个时候这个event呀,就有意思了,这个event就不再是事件对象了,这个event你告诉我是什么呀?同学,你是不是在亲自调用save form data传什么呢?Username,所以说人家接到的是什么username,不信你就瞧主调在这colo输出,输出谁event你自己看啊,右键打开控制台,上键来到这刷新,同学,我问一下啊,这关掉啊,这关掉,我的想法是随着我的输入把东西维护进去,同学,我还没输入呢,它就掉了一次,这就不对吧。
06:12
而且最主要的是同学说,老师没事儿,掉那一次就多调一次,那倒也行,同学你永远也拿不到这两个音谱框的值了,你永远也拿不到了。说老师为啥呢?那你看效果啊,同学,我输入用户名来找的123同学,控制台上没有任何的效果。那也就意味着,随着你输入用户名,人家根本没有帮你调save form data说老师,那不对呀,我这不是写了Chang吗?我不是指定了吗?Unchanged的回调不是this.save form data吗?那你别管我传啥了,随着我的输入,你得不断的帮我调用这个save form data才对啊,同学,你陷入了一个误区。像你这种蓝色框的代码,你这个写的含义我跟你说一下,你是将save form data的返回值交给了on作为回调。
07:06
你不是将save form data交给了unchang作为回调,能不能明白这个意思?同学,你要这样写,我什么也不说。这么写的意思就是把save from date这个函数交给了on change作为回调。你在输入框里边输入值的时候,你发生改变的候,人家就帮你调save form data,你在这不是一直在输出event吗?那好,我们试一下,回到页面当中,随着你在用户名里边输入来123同学是不是一直在输出那个event对象啊?哎,这叫做把save form data作为onch的回调,如果像你刚才那么写,这叫把save form data的返回值作为on change的回调,那我再想多问一句,Save form date的返回值是什么呀?观察一下什么呀?UN find,你把一个UN find交给unchang作为回调,等你输入东西的时候,React一看,你这不玩我吗?你把一个unde交给我作为unch的回调,那我能帮你调才怪呢,他就不帮你调了,所以说你的效果就没了,看没了,哎呀,说老师这怎么办呀?
08:20
同学,觉不觉得刚才你一瞬间就觉得,哎呀特别轻松能实现的对吧?别叫save username,别叫save password,叫save form data,大家共用一个,然后通过传参去标识,这都是你的想法,你实现的时候,你发现就陷入了一个僵局,对吗?你写不下去了。那怎么办呀?同学啊,我再引导你一下,看看呢,面对屏幕的你能不能想出一种解决方案?我不加小括号,之所以它好用,是因为我真的把一个函数交给了on change作为回调,你说对吗?那我加了小括号,就是我把这个函数调用的返回值交给了on作为回调,而返回值特别不巧,还是一个and find,哎,那你说同学,如果我要是让save form date,它的返回值不是and find,说老师,那是什么呢函数?
09:22
你说这是什么意思呀?来同学,这个的意思就是你把save form date这个方法的返回值,返回的那个函数交给了on作为回调。所以说同学你给onch change的回调是不是一个函数,是函数哪里来form date调用返回值得来,对吗?哎,那所以说同学我在这lo输出一个艾特符,那你告诉我同学。当我在用户名里边不断输入东西的时候,控制台是不是得不断输出这个艾特符啊,好了,来走,输入123456,是不是不断的输出艾符,所以说同学你真正交给on change作为回调的是save form date还是save date啊,Save form date的返回值你说是谁?是不是返回的那个函数啊?那所以说同学save form date接到什么参数,其实是不是取决于你,你给他传的啥呀,Username,所以说这你觉得叫event合适吗?不合适,那叫什么合适呢?可能传的是用户名、密码,家庭住址,身份证号、手机号等等这些是不是数据的类型啊,所以说叫做date type,咱自己起的。
10:40
哎,好了,那同学在这lo输出一下date type好。那在这呢,同学你说你现在是把save form date返回的那个函数交给了on change作为回调,所以说同学你就回答我吧,等你去在用户名和密码里边输入东西的时候,你到底掉的是蓝色的函数还是红色的函数?
11:10
你是不是输入东西啊,嗯,输入东西是不是一种change,一种改变呀,那么unch change的回调就要被处罚,我问的是到底谁才是真正的那个回调呢?是不是红色框的谁帮你调的呀?React,人家帮你调的时候把什么传进去了呀,是不是event呀,那所以说同学你想拿到数据,那你得怎么拿呀,是不是一点他给他点白柳啊。对吗?好,我们试试你这么写完了之后,哎,你回头瞧啊,来到这是username呢,传进去了,Password传进去了,同学随着你输入用户名,你注意观察啊,来走着123456是不是拿到了,OK。那同学我再问你,你输入密码的时候咱也看看吧,比如说我从abcd开始输入走ABCDEF是不是也能拿到密码,而且你拿到的具体是什么,前边是不是也给你标识好了。
12:11
靠哪个行参进行标识啊,是不是data type,那你说同学我是不是就可以这样玩一下呢?我输出的时候,我除了输出值,我是不是也可以把data type输出一下,我先告诉你,你现在获取的是哪一种类型的值,是用户名还是密码,我再把真正的值给你对吗?好了,来回头看效果,输入用户名123,一直在告诉你哥们儿是用户名,哦,不是别的,那你在这儿呢,走456怎么样?同学是不是用户名和密码共用一个方法呀,叫什么呢?Save form。这里边你一定要扭转过来一个东西,就是save form data的返回值依然是一个函数,这个函数才是真正onch change的回调,对吗?好了,同学,那这个无关的输出呢,我就给你删掉喽,那在这里边干嘛呀,同学你都能分得清了,现在你输入的一二三都是username,你输的456都是password,在这就做这种无聊的输出,那当然不是啊,你告诉我干嘛呀,同学,This点是不是set state呀,然后呢?哎,往里存东西,那你说存什么呢?考虑一下存什么呢?存什么我得看data type给我什么对吧?好了,那写一下咋写呀,老师明白这么写啊,Data塔派吧,哎,你就这么写,值呢?值从哪来啊?一问点它给它点value来,你写吧,啊,它给它点2VALUE6好,你就这么存着,你看看你会引发什么样的问题啊,回到页面当中。
13:43
找components,点击LOG1上来,确实啊,确实username为空,Password为空,随着你的输入啊,注意看了。123,哎呀同学真有意思,瞧瞧吧。
14:00
你居然往date里边放了一个新的key,叫data type,这里边还有一个新的值,叫123。同学,你说你错在哪了呢?这个123应该是给username的才对,对不对,说老师那我写了呀,我这写的不对吗?这是data time吗?我这不读取这个了吗?压根就没有读取,同学回想一下对象里边啊,对象里边所有的属性名是不是都是字符串啊,其实我就告诉你,你这么写啊,给你这么写是一个效果,其实标准来说你就得这么写啊,但是我们总喜欢简写的方式,所以说我们写着写着这就删了,这也就哎删了那可不代表你这就读变量了呀,是吧,那得怎么写呀。你是不是得读这个data type这个变量啊,而不是说你自己写的一个data type这个字符串吧,那咋办呀?哎,方括号走先看效果啊,输入123,用户名就123,输入456,密码就456OK。
15:08
OK,说老师没懂,这咋个意思呢?那就得带着你回顾一下了,同学,复习吧,走啊,又开始复习了,那第五个下划线叫做对象相关的,哎,知识走,写一段脚本,嗯,删掉啊,写一段脚本,同学,我有这么一个需求啊,有一个变量呢,叫做AA,所存的值呢,是一个字符串,叫做内幕,还有一个变量呢,叫做B,也是字符串,叫age啊,或者写一个就行啊,一个就能演示出来这个问题。接下来呢,我有一个OBJ啊,它是一个空对象,我想让这个对象呢,最终变成这个样子,同学就是name啊,然后的值呢,是Tom。老师,那简单呀,OBJ点内,哎,等于Tom老师你看我就把你这事呢就完成了,同学,这样的话我还问你干嘛呀,是吧,打开,那不得不承认你真是把功能实现了,那你看一下吧,刷新啊,Name Tom,我的意思是你别自己写那内幕,你读变量读出来,老师那好啊,点A就行,哎呦喂,犯错了,嗯,哎,怎么读出那个A呀,咱们是不是得用反括号的形式啊,这可是对象的基本功啊,这可不能遗忘,走这回是不就行了呀,那你这要是懂了,同学,那我问你刚才咱学这儿的时候是不是也就明白了呀?OK,说老师明白了啊,好像有点感觉了,最后再捋一遍,我其实一上来是自己掉的save form data,然后呢,我自己决定的,我现在要存什么,然后这边呢,收到的是data type。
16:49
啊,收到了。然后,然后呢,啊,老师,它的返回值又是一个函数,所以说unchang那个回调其实是save form date返回的那个函数,也就是说react呀,等我去输入东西的时候,React发现我改变东西了,它就帮我调那回调其实是这个函数,并不是那个save form data,对喽,就这么回事,所以说同学们还能再说这种话吗?啊,事件的回调在指定的时候一定不要写小括号,同学,我就写不行吗?当然可以。
17:20
不是说在这啊,你纠结写括号与不写括号,同学你说那得怎么记呢?你不能记死,说这有的时候能写,有的时候不能写。同学,本着一个原则,你必须得把一个函数交给unchang作为回调。必须得拿一个函数作为事件的回调,你不能拿别的说,老师,那我要是这么写呢?走走,你这么写也行,你只要保证这一堆代码执行完了之后,它是个函数,能把这函数交给他就可以,至于说你加不加小括号,这回是不是就不用再记死了呀?哎,好,那同学,我跟你讲,你的save form date就是高阶函数。
18:01
我开始给你甩概念了,你的save form data就是高阶函数,那问题是什么是高阶函数啊,它的定义是什么呢?早已经给大家准备好了,就在这儿了,来把这个删掉,删掉,我不加这个呢,它有的时候啊,它就不折叠了,也跟大家说一下,就是说如果你写一段东西的时候,它怎么的也折不起来了,你可以用这种形式region,这来一个and region,然后这呢,你发现就可以折叠了,来走是吧。好,来同学,咱看一下高阶函数的定义好吗?读一读,如果一个函数符合下面两个规范中的任何一个,不用同时满足啊俩规范你符合任何一个,那你就可以称之为一个高阶函数来读同学,若A函数接收的参数是一个函数。那么A就可以称之为高阶函数。啊,想想啊,若A函数接收到的一个呃,参数也是函数,那么A就是高级函数,对,还有第二个就是若A函数调用的返回值依然是一个函数,那么A就可以称之为高阶函数,那所以说刚才我说c form date它是高阶函数,那是因为啊,它符合了第二点。
19:19
同学们,我问你save form data调用完的返回值,哎哟,跳了一下这画笔哈,来撤回来重新画走啊,我说它是高阶,是因为第二个对吧?那你看吧,Save form date返回值是不是函数是OK save form是高阶函数。但是它不符合第一个对吧,没事儿,符合一个就可以,哎同学这概念呢,我已经给你了。那你想想常见的高阶函数有哪些呢?嗯,或者说有吧,哎,想想有哪些老师,那我哪知道没学过?同学,你之前写过好多的函数,它都是高阶函数,只不过之前你不知道这个定义,你也就不知道啊,原来你是个高级函数呀,你不知道定义吗?那现在我把定义告诉你了,同学,来快速的回想你之前学过哪些东西,它接收一个函数,或者说这哥们儿返回一个函数来谁。
20:15
想想123给你三秒钟,同学第一个人一个最重要的是不promise啊,当然这P得大写的,同学我问你promise怎么玩,你想玩promise的时候,是不是得new一个promise啊,你new一个promise的时候,我想问你,你是不是得传一个执行器函数,这东西是不是叫做exec?Promise是不是一个内置的构造函数?对呀,接没接收到参数,接收到了参数是个啥函数?符合第一条不符合,OK promise高阶还有谁?哎,还有很多同学,有一个人呢,其实都被你忽略了,我写一下,你马上就要拍大腿了,谁呢?啊,Set timeout同学,这干嘛的呀?是不是延迟定时器啊?同学,我问你,它是一个内置的函数不是?是吧,哎,那我再问你,他接收参数不接收,接收的参数是什么呀?函数OK,完事,高阶对吧?I set太out,来把它复制过来,那说老师那还有set interval,那就不再给这列举了,还有一个人,还有一个谁呢?就是数组身上一些常见的方法。
21:16
它都是高阶函数,你比如说arr.map是不是高阶,必须是因为arr.map接收一个参数,那个参数是一个函数,对吗?哎,就等等吧,还有很多,OK,这就是高阶函数啊,那我们再往下把另外一个概念咱就也讲了吧,同学叫什么呢?函数的颗里化,哎呀,说老师懵了,这啥意思呀?函数的颗粒化,先读一下概念,我把目录收起来读走,通过函数调用,继续返回函数的方式实现多次接收参数,最后统一处理,哎,这种编码形式就叫做函数的颗粒化,首先前提啊,研究的得是。
22:03
函数。不是说说啊,老师对象是不是有颗体化,不是就是函数的颗体化啊,是咱可以改一下通过函数调用继续返回函数的这个方式,然后实现多次接收参数,最后统一处理的函数编码形式啊,之前我写的是编码形式啊,所以说哎,加上这么一个就更仔细了,函数编码形式说老师这怎么理解呢?我给你写一个简单的小案例啊同学来到这儿,嗯,我也写在复习里边啊,我给你创建一个新的叫做六演示函数的科里化啊,科里化不是柯基啊,不是你养的狗啊来走,写一段脚本,同学,我想求出三个数的和,是不是可以定义一个函数,函数可以叫做sum走,那我是不是可以接到AB,是不是还有C?那你说我想求和非常简单,Return a加B加几C是不是可以了,来sum走传一传二传三是吧,同学,那是不是能到一个结果。
23:05
Cost来,Result就是结果啊re啊UT,那cons输出一下这个result来瞧瞧呗,右键打开切到控制台,呃,刷新呃,Sum是吧?哎,这会写的有点不太对了,好回来是不是六啊同学,你这就是没有用函数的颗粒化,那如果用颗粒化怎么写呢?瞧着啊瞧着这么写。助掉它这么玩function还叫sum,能接收到a sum返回一个值,这个值依然是一个函数,哎,这个函数呢,接收到B,它继续返回一个函数,诶,这个函数呢,走着是C,然后这个函数本身呢,有返回值,返回A加B加C。那这个时候你说我要求出一加二加三的值,我是不是就得这么玩了?同学们连着写对吗?回头瞧一下效果六是不是依然在啊?我知道我要讲到这儿,就有一部分同学说,老师什么科里化呀,我觉得这不就是有病的写法吗?你看我能一次接到三个参数,一次全都处理完,那我为什么非得要这么写吗?先用这个sum函数接一次,返回的函数再接一次,里边再接一次,最终再统一处理,那这这不有病吗?而且你这写起来也麻烦呀,同学,同学老师你这不会吧?这不可能吧,我要是这么讲可理化,同学你就觉得科理化这个东西呢,就简直就是呵呵了,是吧?同学,那我告诉你啊,就刚才呀,你写这个案例其实就已经应用到了函数的颗粒化技术,同学你读一读,是不是通过函数调用继续返回函数的方式最终实现什么呢?统一处理那些?
24:57
的参数,那你想想同学,Save form date是不是接到了一个参数,Save form date是不是一个函数啊,是返回的是不是也是一个函数?对,那这个函数是不也接收到参数了呀?对,那你说红色框的是不是两个函数接收到的两个参数,那我问你最终在这是不是进行了一次统一的处理啊?同学,那你觉不觉得像这种方式,我保存用户名,我保存密码,我想共用一个save form data,如果你不用高阶函数,如果你不应用函数的颗粒化技术,有没有觉得你有那么一丢丢写不下去了,对吗?在这儿你再看函数的颗里化,绝不觉得颗粒化其实是有存在意义的,说老师那就不能再一次性的把它就都接到吗?你看有data type,有event,你的想法倒挺好,你咋实现?哥们儿,Save form data是你自己亲自调的哟,这个event是react调的时候。
25:57
帮你维护的一个事件,对象说老师,那不行,我自己在这我写个event,你咋那么厉害呢,你在这自己能写一个event,那个event是react帮你生成的一个事件对象明白不?同学,也就是说你倒想一次接收,谁不想一次接收啊,主要是没法写对吗?同学,哎,就给大家说了两个概念,哎,一个是高阶函数,一个是函数的可理化,不用太纠结啊,知道什么是高阶,知道什么是颗粒化就可以了啊这呢做了一个简单的小优化,好的同学,那我们这一节呢,停一下。
我来说两句