00:00
在上节课我们学习了字符串形式的ref,哎,是不是非常的简单便捷,但是啊,这个字符串形式的ref,它就是说不是react官方推荐的,而且即将也就是说有可能在后续的react版本中直接就移除掉。叫什么?那既然react官方不推荐,那我们来用什么呢?我们来看一下这个手册啊。诶,这是react的手册,我们来快速开始,首先说一下这个手册啊,它这个顺序啊,跟我们啊这个视频的顺序不是不是一致的啊,手册的这个顺序呢,它有些知识点就是会进行一些穿插啊,不适合我们大家去学习,所以我们按照比较啊适合学习的这个方式重新去,呃,梳理了这个我们学习的一个顺序啊。来,我们来找一下这个IEF的它的这个文档,哎,在这个高级指引里面找到这个与do啊。
01:00
好。这些,哎,我们接着往下看啊。啊,这个创建refers就是他react比较推荐的一个方式啊,这个我剖后再说,我们先来看一看,一直到最后。哎,关于这个过时的API,就是string类型的。哎,也就是我们上节课讲的字符串类型的这个,哎,它是一个过时的API,好。也就是说我们之前使用的这个属性,哎,例如这个啊text input,哎,可以通过这个this text input来访问端午节点,但是呢,他不建议这么去使用,因为哎,字符串类型的refer存在一些问题,哎。它已经过时,并且会在这个未来的版本移除,哎,所以不推荐大家去使用,那么究竟会存在什么问题呢?这里给我们说明,我们点进来看一下啊。点进来之后啊,来到了这个getu。然后是的官方的一个仓库啊,然后他把这个为什么。
02:01
不推荐使用这个字符串类型的refer给放到了这里面,然后让大家去,哎,去讨论为什么啊,然后东西比较多,但其实啊,总结一句话就是说,哎,字符串类型的这个refers存在一些效率的问题,但是究竟是什么样的一个问题,也也没有给出一个实例说去描述这个啊,具体的效率的一个问题啊,大家知道就可以了啊。好。哎,但是因为这种字符串类型的这个比较简单好用,所以呃,目前。在一些这个公司啊,还有大部分的程序员在使用,诶,但是嗯,它并不是这个react的官方所推荐的,哎,并且会在未来的版本就有可能给移除掉,好,那么我们既然不能使用这个字符串类型的,那么我们。来使用什么呢?哎,这里给了我们建议啊,建议我们使用回调函数,哎,或者create啊rest API这两种方式来代替,听懂吧,好,那我们一个一个来看,哎这节课呢,我们就来看一下这个回调函数。
03:01
这个内容啊,我们就不看了,我们直接通过这个例子来看,来复制一个。回调函数啊。改成二把这个也改了啊。那既然是回调函数,哎,我们这里。就先注释掉。好。这个第二个例子也先注释掉啊,我们先不写了啊,那我们把这个也先注释掉。记住啊,这个GS差里面就是我们只能去写这种哎,大括号的形式对吧。然后在这个里面去。这样注释啊好。那我们先看这一个例子啊,哎,既然是回调函数形式的refer,那这里我们就不能写字符串了,对不对?那写什么呢?你不能这样放这啊,好,那么来想一想我们的函数,哎,回调函数,我们的函数是不是也是个表达式,我们在GX差里面,我们写表达式是不是要加个大括号?
04:09
然后在大括号里面去写回调函数,对不对,那我们来写什么,写个呃匿哎匿名的写个箭头函数,这是是不是我们的这个回调函数,好,那说到回调函数,我们来捋一下啊,那什么是回调函数,来我们把注式写到这里啊。来什么是回调函数,回调函数有什么特征?第一个是哎,你定义的函数。对吧?啊,那第二个特征是什么呢?就是哎,你没有调用对不对,哎第三个特征就是。呃,函数最终执行了对吧,那就是说你定义了一个函数,但是你没有别人你没有调用,哎,别人给你调用了,函数最终执行了,这就是一个回调函数。
05:02
清楚了吧,我们既然说哎这个refer里面,它这个里面是一个回调函数,那么我们来看看它符不符合这几个条件,你定义函数,这是不是我们定义的,知道吧,好,我们这个你没有调用,我们没有调用吧,没有函数括号完,我们我们用这种方式去调用那个函数吧,没有吧,好函数最终执行了,那我们就看看这个函数最终执没执行来,我在这里面,哎,简单的写一句话啊,conso.log啊,Re中的回调函数,我们来看一看这个函数能不能执行。啊。来右键运行。把这个打开。哎。哎,Ref中的回调函数是不是执行了,那它是不是一个标标准准的回调函数,哎,我们定义的,但是我们没有调用函数就能执行了,对吧?所以哎,这个就是我们写在ref中的一个回调函数来,就是当这个react去。哎,挂载这个组件的时候,他帮我们实实例了一个组件的一个实例嘛,创立了组件实例,接着它去调转的方法,找到这里面,发现它是这个接差的一个语法,它就帮我们去调用那个函数执行啊注意啊,我们只有写在这个ref这个里面的这个回量函数,它才会执行。
06:16
清楚了吧,你不是说你随便写一个他就行,来我们写一个这个啊哈哈,来我们在这里面。嗯,直接复制一下它吧。来把它改成哈哈。把这个也改成哈哈啊,我们来看一下这个属性它能不能执行啊来刷新。是不是直接报错对吧,他说这个你不认识这个,哈哈,这个属性。清楚了吧,不是说我们随便写在这个呃,属性里面的这些回调它就能执行,而是我们写在这个ref这个属性里面的回调函数,哎,它会帮我们执行。清楚了吧啊。那既然这个函数执行了函数,它有什么什么参数呢?哎,别人调用了我们定义的这个函数对吧,那它会给我们呀,这个函数一个什么样参数呢。
07:05
来,我们来看一下啊。干什么?这里写个A,我们现在不知道什么参数,我们先随便写一个,好吧,来看一看这个A是什么啊,Consult log a。来刷新一下。诶,你会发现这个A就是我们的这个引的节点,对吧。啊,也就是说,呃,在ref中的这个回调函数,哎,它触发的时候,它调用的时候呢,它会给我们传一个re所在的这个节点,哎,它的一个道节点给到这个参数。对不对,哎,这是time原生的这种道墓节点嘛,它会在这个ref中的回调出发的时候,哎,作为参数,把这个ref所在的这个节点传进来。给到了我们的这个参数,对吧,那我们是不是就可以去。用到这个参数了,对不对,那我们最终无非是想要在其他地方去用到这个节点,对吧,用到这个呃节点,那怎么办?我们可不可以把它给挂到这个this上面,This input1啊,等于我们这个A。
08:10
可不可以好,This是谁?我们首先来看一看我们这个函数是不是一个,呃,箭头函数,箭头函数它没有this对吧?没有this就会向上找,向上找到谁找到这个runner里面了,Runner中的这个this是谁?Runner中的this是不是这个我们组件的这个实例。对不对,所以这个相当于是我们把这个呃,组件实力给他增加了一个属性,隐INPUT1属性,让它的这个隐INPUT1的这个属性的值等于谁等于。哎,我们ref所在的这个节点,哎,元素节点。清楚了吧?哎,当然这么写不规范啊,我们写参数啊,写这个参数名应该见明指引,我们这个参数是做什么的,我们就把这个参数名字去写成什么啊,咱们改啊,There current notde,哎,当前节点看到了吧,哎,This there等于当前节点,当然这么写的话比较多,那我们可以简写,怎么简写?哎,太长了,我们把把它写成C行不行?
09:02
可以了吧,哎,一样的啊好,因为这个箭头函数它只有这么一个参数,这个括号是不是也可以省略了。是不是就这样的了?对不对,哎,这个是不是也可以省略了,因为它里面就有一句嘛,就一个就一个语句,哎,最终我们这个函数形式的RF就可以简写成这样。啊好,我们来看一下啊。嗯,没有问题,对不对,那接下来我们在这个render里面输出一下this啊log this,看一下这个组件的实例。好,它是不是这里多了一个input的一属性啊,然后看这个INPUT1是不是我们这个input的节点啊,那我们怎么用,哎,是不是在这里就不从这个里面去取了,直接从this里面去取,取这个INPUT1,对不对,因为在这里我们把这个INPUT1是绑到这个实例上面的实例身上的,所以这INPUT1我们直接从这个实例去取。是吧,从实力本身去学好来看一下啊。
10:01
刷新诶。是不是获得这个值吧,啊好。那我们把这个输出给关掉啊,接着把。这个失去焦点的这个也改一改,把这个注释我们都删掉啊。嗯,这里我们也使用这个函数形式的去绑定,哎,这里改成INPUT2。那哎这个方法把它打开啊,这里也是从this里面去获取,来我们来看一下啊。好,首先看第一个点击的肯定是没有问题了,第二个设计焦点呢,也没有问题,哎,这通过这个例子,哎,我们就把这个呃,字符串形式的refer给改成了回调函数形式的refer。看到吧,啊,这也是官方比较推荐的一个写法。啊,因为字符串形式的这个微呢,它可能会存在一些效率上的问题,也就是说你写的非常多了,它效率可能会慢一点点,哎,所以就是官方不推荐使用,而且会在后续的版本中可能会移除,所以大家在写这个啊的时候啊,尽可能的去使用我们这种回调函数形式的也比较简单,代码呢也不是很多是吧,就一行。
11:09
关于回调函数形式的,哎,我们这节课就说到这里。
我来说两句