00:00
好了各位,我们接着学习ref,以后呢,你可以不总说ref,你可以直接把它读出来叫做re也是可以的啊,怎么读呢,随你的便,那么回头来看啊,刚刚给大家讲解的呢,都是字符串类型的ref对吗?你看这两个都是字符串类型的啊,那么可惜了啊,同学们,这个字符串类型的ref呢,已经不被react官方呢所推荐使用了,而且在它的文档里说呢,以后人家更新的时候,很有可能直接把这种字符串的写法直接废弃掉。那是为什么呢?我们打开文档呢,去看一眼,点开中文网,点击文档。那这是打开文档之后的样子,跟大家多聊一下吧,啊,就是你发现我讲东西的顺序并没有按照官网所展示知识点的顺序,我所写的案例也并没有完全参考官网的那些案例,说老师,为什么呢?官网这么好的东西你不参考吗?说一下,如果我讲东西的顺序啊,在这里边我是按照官网这个顺序讲的,你发现啊,同学会有很强的跳跃性,对于初学者来说啊,如果你之前的功底足够,其实是没问题的,但是如果说哎,稍微欠缺一点,你就觉得很跳跃,你看它先讲的S,然后再给你讲state的时候呢,它是混着props在里边的,而且它里边还混着一个生命周期钩子,那就得要求同学你想象一下那种场景,就是你在学习state的时候,关于this的指向已经让你挺晕的了,是吧?又构造器什么的还得混着pros还得理解一个生命周期,钩子它什么时候掉,它掉几次,同学这压力很大的,所以说呢,我们换了一种更加舒服的节奏。
01:37
哎,去带大家学习,还有就是呢,为什么没有采用官方这些案例,同学,咱得说啊,人那个案例呢,写的挺好的,但是啊,这个案例写的太综合了,你就比如说在写一个呃,State案例的时候,它里边还混着一些其他的东西,那所以说会让你觉得压力很大,所以说我们也没必要写那么综合的案例,因为毕竟现在在学习基础,用一个最短小精悍的案例,能把问题说明白,能让你掌握这个知识,这是最好的。OK,哎,说老师那综合的案例我们就练不到了呀,不是你等我把所有这些基础的知识讲完了,我们会做两个综合案例的,对吧,你再等把路由讲完了,周边库再讲完了,我们还是可以再做一个,诶,非常大的这么一个项目的,OK,慢慢来啊,别急,所以说官网上这些东西呢,如果你现在看,你可能觉得诶老师跟你的顺序可能不太一样是吧,那为什么调整顺序一句话想让你更加舒服的学习react,那么接下来呢,同学咱们打开文档的目的是干嘛呀,目的干嘛呀?哎,去琢磨一下为什么字符串。
02:37
二类型的ref这么不受待见呢?啊,那在哪儿啊,在这儿点开高级指引,它没在核心概念里,它放在这儿了,高级指引里边有一个ris与do点击,那在这儿呢,他也给你来了一些引言呀,一些引导性的东西,我们先不看这儿啊,直接往下滑,哎,包括这个什么,请勿过度使用ris咱也先不看啊,直接往下,你再往下看呀,他就教你最新的写法了,说同学是不是想用re呀,那我告诉你,你可以这么的,有一个API叫做create ref,你用这个挺好的,同学,这个呢,我知道是最新的一个写法,但是就像我说的。
03:14
你以后干活的时候,不一定保证别人用的也是最新的写法啊,对吧,它一共有几个写法你都得会呀,所以说我们按照这个时间轴的顺序呢,给大家讲解,先讲最老的,再讲中间的一个,然后呢,再讲一个最新的,那么最老的这个呢,你已经学完了,那就是字符串类型的ref,人家也说了不太推荐了,那么接下来呢,我要给你讲中间的这个,好吧,诶往下滑啊,同学他说了,为什么字符串类型的这么不受待见,走他有一个非常详细的说明在这儿呢,同学来看这儿,别的地方先不用看啊,看这来什么过时的API string类型的ref,就是你刚才学的那个,已经是一个过时的了,为什么呢?看看它的说明说,如果之前你用过react,你可能了解之前的API是string类型的。re,那不是刚才咱们写的吗?你可以通过这种形式获取东西,this.re点,诶,什么什么?那你看我的代码里面写的this.re点是不是INPUT1啊,也是这么获取的,只不过我写的是结构赋值的形式,对吗?好了,回到文档。
04:14
来,我们不建议使用它,重点来了,因为string类型的ras存在一些问题,那什么问题啊,是不是得好奇一下呢?同学,你发现这是一个链接,你点来到了一个新的页面,我先切回来,同学,我让你猜一下,你觉得就是你点击了这个东西,来到这个新的页面里边会给你展示一些什么呢?按照常理的猜测呢,他应该会给你展示说字符串类型的ref,比如说有两个问题,那我分别给你展示出来,一什么问题,二什么问题,就说的明白一点,给你来个总结,对吗?那么你打开这个页面,你发现啊,同学不是像你想的那样,他来到了一个类似于讨论区的地方,说老师,哇哦,这是哪儿啊,你往上滑,其实这个网站呢,你知道是giit HUB来到了react仓库主页,而且给你切到了这个pro request啊,这个讨论卡这里边啊,其实呢,准确来说这个应该叫做讨论卡,这个呢,应该是向仓库的所有者发起一个拉取的请求啊,那如果说之前你学过GI和github这块呢,应该你是学过的,OK啊,好了,这儿呢,咱不多说啊,毕竟不是在讲解GI和github,同学那这么多东西,说老师他想表达的是什么呢?啊,说老师你看这你一句我一句的,他想说的是什么呢?同学一句话总结这里边儿的东西就是字符串类型。
05:36
呃,Ref啊,它存在一些效率上的问题,就说白了,如果你写多了效率就不高了,那所以说react官方呢,不推荐我们去使用了啊说老师呢,我想知道他到底有什么样的效率问题呢?在这儿呢,同学你也不用过多的去了解,因为官方也并没有用一个非常直白的文字告诉你存在什么问题,而是直接给你甩到了这个讨论区上,看看大家是怎么说的,那一句话总结就是效率不高,所以说不太推荐你用,那不推荐我用,那你看那我怎么办呀,你在读后半句话,他已经过时了,并且可能会在未来的版本中移除,同学他说未来的版本中移除,但是现在我用的是16.8对吗?移除了吗?没有,所以说也能用,所以说你到了公司之后呢,你会发现同学很多公司里的项目只要用REACT16版本的,还有大量的程序员呢在使用字符串类型的ref,为什么呢?因为这种写法实在是太简单了,那你看看咱们的代码,同学你只管写。
06:36
人家自动帮你收集多舒服呀,是吧,哎,所以说有效率的问题,但是也没有什么太大的影响,来吧,说说不让咱们啊,或者说不推荐,不能说不让用啊,只能说不推荐了,你看我们不建议你使用它,那么不使用字符串的我能使用什么呢?还有两种形式,一个叫做回调函数形式的ref,一个就是create ref说老师那这是不是也能点啊,对,你点其实就来到这儿了,回调ref好了,那我们直接呢在代码上键。
07:05
复制一份,然后在这儿呢,重命一下名啊叫做二。不叫字符串形式了,叫做回调函数形式的ref删掉写法非常简单啊,不要有太大压力,回到这儿,既然写的是回调形式的,那就不能写引号了,对吧,这就得删掉,嗯,你写引号那不就是字符串嘛,那那你这块如果不写,这块也不写,同学那你说呀,那这块是不是也不能这么拿了,那这块也就不能弹窗了呗,那同理,这两行是不是也得诶都住掉,目前反正是诶没有这两个功能的,那慢慢来呗,是这样啊,同学我先把这一行呢给他带走啊,咱先写一个啊,不同时写两个啊,慢慢来,那这怎么写呢?花括号首先准备好,你要写回调了,那你得首先定义一个函数,所以说直接就在这个里边,咱们去定义一个函数,走箭头函数的形式,好,同学,我问你它是不是回调呢。
08:07
那回调函数得满足三个特点对吧,一你定义的函数,二你没调用,三这函数呢,最终执行了对吧?哎,接地气点说,就是你定义的函数你没调,但是最终有别人去调了,这就是回调对吧?回调回调嘛,别人在调,哎,那说老师呢,这个是不是回调呢?首先第一个条件是你定义的对吗?第二个你确实没调用对吗?这没名字对吧?一个匿名的函数你没有立刻去调用它,那你以后还怎么调呢?是吧?所以说肯定不是你调的,但是问题是最终它执没执行啊,这还真不好说是吧?咱们验证一下,在这里边consolo,我输出一个艾特符,右键打开页面,咱看看到最终啊,它有没有执行准没执行啊,执行了,所以说他是毁调吗?是,那我再多问你一句同学,他会收到什么参数呢。啊,你思考思考,同学你说回调函数能收到什么参数,是不是取决于谁调的它呀,函数能收到什么参数,是不是取决于函数的调用者,那这个函数都不是我们调的,那它到底接没接到参数啊是吧?那参数如果接到了,里边是什么呀?那我们看一下呗,拿A先接一下colo,这回我输出谁呢?A回到页面当中,你看一下效果,同学接到参数了,你发现这个参数啊,它正好是谁呀?嗯,这个参数正好是谁呀?
09:25
这个参数正好是ref这个属性所处的那个节点,Input,你看他直接把东西A给你了啊说老师明白了,这A呢,其实就是ref当前所在的那个节点,对,那一般呢,我们在里边做这么一件事,你就把代码写完了,哪件事儿呢?注意观察this.input1等于A。啥意思呀?同学理解理解啊,就是呢,人家为了在页面上展示东西,同学是不是肯定得你有一个DEMO的实例,是不是react,得通过DEMO的实例帮你调用render啊,那当你调用render的时候,我问你是不是得执行里边的JS叉啊,那执行里边的JS叉,我再问你来到这的时候,是不是就直接触发了这个函数的执行啊,你在这写了一个函数形式的ref,然后人家就发现了,哎哟啊,你写的是函数形式的,那行吧,我帮你调这个函数,而且我帮你调的时候,我把当前你所处的节点给你传进去,那所以说A就拿到了,那你这么写是什么意思呀,把这个节点放在了组件实例自身上,然后给它起了一个名字叫什么呀?INPUT1说老师,那这里的this是谁呢?同学,仔细观察,这是不是箭头函数没有自己的this,那是不是往外找,往外找就找到了谁呢?Render,那我再问你,Render里的this是谁呀?组件的实例对象,所以说你这么写最终的结果就是。
10:48
把ref当前所处的节点挂在了实力自身上,并且取了个名字叫INPUT1,那你这用A是不是有点太随意了?那你说这个A用什么好呢?
11:01
你这个行参用什么名字,取决于你收到的是什么东西,最好让它建名之意对吗?那一般我们用这个current啥意思,当前的node啥意思呢?节点current node,那你可以把这诶放在这儿,对吧?你可以写的再精简一点,这不叫current node叫C,这也叫C,还可以再精精简一点啊,箭头函数箭头的左侧只有一个参数小括号可以省略,箭头函数箭头的右侧只有一句函数体,所以说花括号也可以省略,那你这么写就把代码写完了。那所以说你取东西的时候,同学来吧,你从哪取INPUT1啊,可不从res上取了,那从哪呢?从实力自身取是不是就取到了呀?然后点歪六是不是就可以了呢?那回头来看一下效果,输入123走是不是也有提示啊,那别忘了下边这是不是还得写呢?来给它粘过来啊,那刚才我好像把那个顶没了是吧?嗯,我的剪切板被顶没了,那复制一份吧,放在这儿走,那这就不能叫INPUT1了,你再叫INPUT1,不把刚才放的那个东西给顶掉了嘛,哎,所以说仿INPUT2换名字嘛,哎,还是C,这还是C是吧?啊,那在这儿呢,不叫点击按钮提示数据了,叫做失去焦点提示数据,那么同样的你还得给它绑定一个事件,叫做on BL对吧,失去焦点,然后呢,等于那失去焦点用哪个呀?this.show data r,那show data2里边这些代码就可以解开了,我不从ris身上取,我从this身上取,还是那个音input r。
12:35
因为当年呢,我确实放在了组件实力身上,然后INPUT2点Y6就可以了,来,那我们试试效果啊,输入一个456啊,失去焦点是不是可以啊,OK,那这块呢,就是回调形式的ref同学,值得你注意的就是你一定要明白这个函数是一个回调函数,你只负责把一个函数写在这,剩下的事呢,交给react去做,React会帮你调这个函数的。
13:04
嗯,因为你写的是ref等于一个函数,React就会帮你调用的,你比如说啊,说老师那我随便写一个,我写一个,哈哈,完了等于,哎,我写一个函数,老师react是不是也能帮我调用啊,那你看一下吧,这里边我给你consolo输出一个井号,你看看它能不能行吧,来同学首先啊,输出那东西了吗?没有,但是它有个警告,他说啥呢?说你这个,哈哈呀,不行,你这没这东西,没这属性,你看你这个音input的标签里边不能有这个属性,不认识是吧?啊那所以说呢,同学不是说什么东西react都帮你调,如果你写的是ref等于一个函数,它会帮你调,它不仅帮你调,还把ref当前所处的这个节点传进去了,诶作为一个实参,你在这儿呢,收到它,那剩下的事儿呢,其实就交给你了,那我们最多的一个做法就是往实力自身上给它挂一下,OK,好的,那我把这呢删掉,那我们就讲解完了回调形式的ref,那这一小节呢,我们停。
14:04
一下。
我来说两句