00:00
好了,各位学完了回调形式的re之后呀,我们探讨一个细节上的问题,就是关于你所写的回调ref里的这个回调,诶,就这两个红色框里的,哎,这个回调调用次数的一个问题。确实人家帮你调了,而且你也承认它是一个回调函数,我现在研究的是它所调用的次数的一个问题,OK,我不在这个案例里呢做展示,我重新新建一个文件复制,改个名,第三个了,叫回调形式的ref,我前面简称一下啊,叫做回调ref就简称了,要不一会儿这个名字就太长了,回调ref中回调执行次数的问题。Copy呢,给它删掉好呃,这个名字呢,给它复制一下啊,放在这个里边走结构和引入GS都是还按照之前的来,我把DEMO组件里边所有的东西啊都删掉,我重新写一份,那这里呢,我也不传这个A和B了,之前不是为了展示问题吗?删掉,那里边还是写吧,Re DR render是吧?哎,必须得写return呢,必须得写多级的结构包个div对吧?里边呢有一个input框,这回咱不写那么多了啊同学就写一个input框,后边呢有一个按钮button,诶叫做点我呀,提示数据,呃,输入的数据好,组键定义完了,右键打开看一下效果。
01:33
OK,页面上是有东西的,我把控制台呢也打开,防止它出现一些什么警告和错误,那给这清一下,那接下来去实现这个功能吧,在这儿输入东西,呃,在这儿呢就能提示注意了,是用回调的形式去写,来到这儿走,直接给ref写在这儿好,那么接下来想吧,用回调的形式去写,同学,我先不写那个简写的方式啊,我就直接正常写函数走,同学,它是个函数吗?是。
02:00
啊,OK,那里边一般咱做什么了啊,这个行参用current node啊,那里边咱一般做this.input1等于current node,把current node复制放在这里边,好,那这么写什么含义啊?哎,拿到当前ref所在的节点,React帮你调列函数,然后帮你传进来了,传进来之后呢,你挂在实例自身了,放在INPUT1这个属性上了。哎,那如果说你想提示数据非常简单,你给按钮来一个on click等于起个名字吧,this.show引否展示信息吗?不能光说呀,你得有这个方法啊,那得写成什么呢?赋值语句加箭头函数的形式对吧?那里边干嘛呀?很简单,第一步获取RF,打完标识的这个节点,然后呢,提示它的数据就可以了。那所以说直接写了结构赋值,从this的身上不用再点了,This的身上直接拿谁呢?INPUT1,那随后呢,做一个简单的动作,就是alert input一点value OK,我们试试看。
03:01
好不好用啊,来输入一个123走是不是好用啊同学,接下来我要探讨的问题就是这个函数它执行几次的问题。首先呢,他肯定得执行一次。如果不执行这一次,那我问你组件实例对象身上是怎么有input得一的呀,那我们验证一下吧,同学,我想在这个函数里呢,不只做这一件事儿,你只做这一件事,你就没法分辨这个函数有没有被调用,那这样做完这件事之后呢,我再来一个conslo输出,把目录关一下,输出什么呢?我写一个艾符,然后呢,我再把它接住的东西啊,给它输出current node OK,好了,保存,那么同学你说一上来呢,它是不是肯定得掉一次,嗯,艾的符在这呢,而且传入的是什么呀?是不是当前ref所在的那个节点呀,是不是就传进来了呀,好。哎,说老师,那这有什么问题吗?目前来看呢,是没什么问题的,但是你打开官网,官网里说了一个特殊的情况,我们打开react中文网,找到文档,找到高级指引,找到ras与do,其实如果细心的同学呢,在我讲上一小节的时候呢,你就发现啊官网说这问题了,这呢关于回调res的说明,我们读一读啊同学他说如果ref回调函数是以内联函数的方式指定的,那问题你得把它搞懂,什么叫内联函数,我现在所写的这种就是属于内联函数,你这是不是写着ref,那你这是不是直接给了一个函数,那我问你,你的这个红色框的函数是不是写在标签里边,直接就去定义一个函数啊,这就是属于内联函数,就直接把一个函数就丢在这儿,这就是属于内联函数,说老师那这能怎么的呢?你再往后读,他说在更新的过程当中啊,它会被执行两次。
04:54
注意,人家没说,第一次上来的时候,人说如果你这个组件以后伴随着更新,那么它就被执行两次,而且第一次传入的参数呢是nu,然后第二次传入的参数才是你需要的那个DOM元素,就我们所说的那个节点。
05:13
说老师,但是目前来看没这问题呀,我刷新一下也没像他说的呀,说哎,调用两次,一次艾特符,又来一次艾特符,而且第一次呢,输出的应该是艾特服务,然后是no,然后第二次输出的呢才是艾特服务,然后我所要的那个一些节点数据,那也不像他所说的呀,同学,那你注意啊,人家说的是什么呢?在更新的过程当中,也就说白了,同学你那render啊,得调用第二次的时候,你一上来调用render,那是组件第一次往页面上放,那不叫更新,同学你记不记得咱们说render调用的次数是一加N次啊,一是什么时候呀,你组件初次往页面上放的时候,那N是啥呀?是不是你更新状态的次数啊,你一更新状态,那不就触发组件也更新吗?所以说得有更新的时候才能暴露出来他所说的这个问题,那目前我写的这个组件同学,他有更新吗?没有。
06:10
说老师那你写个123,你点击提示,那这不是一个更新吗?这可不是,这是一个最正常不过的交互,啥叫更新呀?今天天气很炎热,凉爽,来回切换同学内交组件的更新对吗?那接下来啊,你看好了,我要把今天天气炎热啊还是凉爽那个案例和目前我所写这个混在一起,因为你不更新,你演示不出来接下来他说的那个问题,OK,而且呢,我也确实这么做的,我在这个内联的函数里边的的确确呀做了一次输出,只要这个内联的函数被调用,必须输出艾特福以及它所接到的东西,对吗?好了,来吧,初始化同学,还记得天气炎热那个怎么写吗?State等于,然后有一个a hot标识对吗?然后呢,TE标识是今天,哎,这就属于炎热啊,那我在这里边呢,我就开始写了啊,在这儿来一个H2标题叫做今天啊天气很炎热,那当然这炎热你不能。
07:11
解死了,是不是得问一下状态呀,那么最好呢,在render的最上方呢,你提前就给他取好,对吧?同学啊,我不允许现在你写这个案例的时候还磕磕绊绊的,必须行云流水般流畅啊,同学们,如果写到这儿呢,你还没有进行开始敲代码,一直在听,那我劝你呢,先敲一敲,然后咱再听,好吧,哎,State,那这儿拿出谁呢?Is hot,那你这就得问呢,Is hot,嗯,你热吗?如果热那就是炎热啊,那来这么一个东西,如果不是,那就凉爽呗,好,那我们试一下看能不能行啊,诶,不是这儿啊,是我们的页面今天天气很炎热,那如果你把它改一下,改成false,诶,保存,那么回到这儿啊,叫凉爽好了,那我们再回来,接下来呢,我再给你来一个按钮啊,同学注意看,Butt To Button,呃,叫做点我呀,切换天气对吧,哎,点我切换天气,这呢还是给它一个。
08:11
On click啊,On click,嗯,那这个名字呢,叫做this.change啊,改变吗?Whether啊,改变天气,不能光说你得有这个change weather赋值语句加箭头函数的形式,那在这里边干嘛呢?首先第一步啊,咱说获取原来的状态对吧?怎么获取啊,结构赋值,从this.state身上取东西,取谁?Is hot热不热?那接下来呢?哎,更新状态对吧?哎,更新状态,那怎么更新啊,This点叫做site state对不对,不能直接更新,然后把你的这个A字hot的值呢,取一个相反的值就可以了,A字hot来我们试一下啊同学你注意看了,回到我们的案例当中,呃,这两个按钮啊,连在一起了,那这样吧,我想让他俩呢都放在这个位置,好吧,哎,看起来能够直观一点,那这样我找到这个位置给它来一个换行对吧,一个BR换行,那么一个不够,我再给它来一个吧,写在后边,好,那看效果啊,回到我们所写的东西里边,在这呢,你点我那是提示输入的数据,那来我们试试啊同学,123走这个功能没受到影响对吗?接下来啊,你就瞪大你的眼睛看了我刷新一下,这是页面初次上来的时候,一定帮你调一下你所写的那个回调,Ref里的那个回调,而且把当前的节点给你传进去了,对吧,这都是第一次渲染啊,第一次进来的时候。
09:38
你把控制台清掉,同学,接下来注意看了,我要切换天气,你注意看走。怎么样?同学,问题是不是出现了?同学,那你告诉我吧,就刚才你所写的这个内联的函数,首先你告诉我掉了几次,看控制台。两次对吗?第一次调的时候传的是不是no,是的,第二次是不是才真正把节点给你传进来,是的,说老师那员功能受不受到影响呢?同学一点影响都不受的,你看一下啊,我在这输入123提示数据是不是有,你点一下切换天气你再提示,其实也是没问题的,只不过呢,咱们就是较真的说了一下,同学,你每一次去更新组件的时候,你看它都会被掉两次,第一次是闹,那第二次是这个节点,那为什么要这样做呀,我们再读这个官方的说明,他说呢,这是因为在每次渲染的时候,他都会创建一个新的函数实例,所以react会清空旧的ref,并且设置新的,它是这个意思啊。同学,回到我们的代码当中,你说为了保证组件能出现在页面上,你是不是得调一次render啊,OK,第一次调render的时候呢,执行到了第41行代码,他发现啊,你写了啊。
10:55
F,而且最主要的是你写了一个函数式的ref,那我就帮你调这个函数吧,然后就调用这个函数,就把当前节点呢,就给你传进来了,那同学这是第一次渲染对不对?哎,组件第一次来到页面上,所以说呢,你回到我们的案例里,那就是艾特符,诶当前节点给你传进来了,主要是在更新的这一块,它出了点小问题,对吧?同学我问一下啊,你点了这个按钮之后啊,是不是会更改状态啊,那状态一更改,咱说状态得驱动着页面显示,状态咋驱动着页面显示啊,你是不是得重新调一次render啊,所以说来,同学当你更新的时候,回到代码当中,Render是不是又要执行一次?对,那你说第41行代码是不是也得重新执行一次呀?对,他又发现你写的ref,而且你写的还是一个函数式的ref。同学,你注意这个函数可。
11:55
不是之前那个了,它是一个新的函数了,说老师之前那函数呢,执行完了,被释放了,没了,这是一个新的了。
12:02
啊,所以说他不确定之前那个函数都接到了什么,做了一些什么动作,所以说他为了保证这个东西能够完美的被清空,所以说他在这儿给你掉了,第一次传了一个no,哎,No,然后紧接着他又掉了第二次才把当前的节点给你放进来,也就是说呢,他为了有一个清空的动作。啊,所以说呢,当你点击这个切换天气的时候,你瞧吗?先诶传了一次no,然后再把真正节点给你传进来,说老师那这样会有什么问题吗?其实啊,他也不会产生什么问题,但是咱这不是较真的说吗?对吧,非得把它拉出来仔细研究它一下吗?React呢,给我们提供了一种方式能够避免这个问题,我们回到官方文档,我们一起读一下,同学们看他怎么说的,他说通过将ref的回调函数定义成注意看这class绑定函数的方式,可以避免上述问题。
13:01
同学,我觉得这句话呢,你第一次读不一定能听得懂,就get不到他说的那个点,不明白他是啥意思对吗?同学,我说一下啊,你如果非得用文字去形容这个东西啊,那就是听起来特别晦涩难懂,其实你要把代码写出来也不过如此啊,那我们直接呢,就给大家写一下,OK啊,我就让你看一看什么叫做class的绑定函数是吧?嗯,回到我们的代码当中来吧。41行代码肯定不能这么写得换点写法是吧?啊说老师那把41行就直接改呗,我想把第41行给你留下,所以说接下来呢,我把第41行注掉,在我注调41行之前,我想把这些代码呢,尽量的精简一番,别用current node用C这用C这输出的是COK,是不是经典了很多呀?来同学把第41行注掉,你可能会想到了老师GS里有一种注释的方式,就是杠星,后边呢,加上这个星杠,这不就注掉了吗?没注掉回到页面当中,你瞧效果吧。
14:08
你的注释符被直接输出到了页面上,说老师为什么不能这么注释呢?只因为它是GS叉,只因为这里边写的直接就是标签,同学,你说你这个杠星和你这个星杠写注释,那是不是GS里的语法啊,对吧?啊,说老师啊,那不能这么写,对,说老师,那我知道了,应该呢,是这么写,前边加两个杠也不对,你这种方式不也是GS里写注释的方式吗?你要这么写,回头那他还在呀,啊,老师,那我得琢磨一下了,是不是得按照助调标签那种形式注掉它呀?那老师,我明白了,HTML里的注释好像是这么写的,那我拿回来一个啊,我给它放在这儿,那后边呢,我再写一个杠杠,诶,减括号,说老师,这是不是就能注掉啊,这不仅注不掉,这直接出语法错误了,行了,不卖关子了,告诉大家GS叉里这些结构怎么写注释呢?
15:04
我写完了呢,嗯,你会觉得哎哟,大跌眼镜哈,来看一下啊,走,这写花括号,这写划括号,这啥意思呢?我这么写是不是意味着里边我要写JS表达式了,也就是里边我可以写一些GS的东西,对吗?哎,那我写这个呢?走嘿,啥意思呀?哎,写了一个花括号,代表我要写JS表达式了,那表达式是什么呢?是一堆注释的东西,就完美的把它注掉了,那回到页面中看一下效果,Input框是不是注掉了呀,嘿,OK,所以说这里的同学咱们也不用特别纠结啊,GS叉里边写注释它就得用这种方式,它没别的方式啊,所以说尽量呢,避免在这些结构里面去写一些注释,OK,好,那么来吧,重新写一个input,我把原来的呢复制放在这儿,你如果还这么写,那你就依然是内联函数的形式,那如何写成它官方所描述的类绑定的函数呢?
16:05
其实非常简单,回到代码里面,我简单给大家写一下,这个里边呢,删掉,我这么写this.save input同学,你听我这个方法的名字,这啥意思呢?Save input就是帮你保存这个input。说老师,那你这是指定回调了吗?同学,这是不是叫做回调形式的ref,这是不是也叫做回调形式的ref呀?只不过第一种形式我是直接把函数写在这了给你,你用吧,那只不过第二种形式是我没有直接把函数写在这儿,我把函数放在了实力的自身。哎,一个是直接写,这就属于内联,一个是直接,哎,放在类实例的自身上,然后你去找吧,那不能光说你是不是得有这个方法呀,走save input,那同学你说啊,这是你写的内联函数,能接到一个current node,那难道它就接不到了呀,它也能,哎,写上C好,那这呢,我们把里边这些事儿是不是给它拿过来呀,从这到这复制,然后呢,粘贴回车呢,在这敲一下,同学你瞧吗?this.input1。
17:14
等于C啥意思呀,是不是把你接到的节点挂在了INPUT1上啊,哎,那在这儿呢,我给你输出了一个I的符和当前这个节点保存,回头看一下我们的页面刷新第一下肯定是正常的,对吗?哎,有爱的符,有这个主要是我切换的时候,同学你注意看,走走走,无论你怎么切换,它也不会频繁的去调用这个save input,因为已经放在实力自身了,就算它以后重新调用render它也知道,诶我身上呢,有这个save input,我之前调过,它不再是一个新的函数了,OK,哎,所以说这块呢,你要知道,而且呢,同学回到咱们的页面当中,你得保证你的功能啊不受影响,走是不是也能正常提示啊,所以说用这种形式这不就避免了吗?那回到它的文档当中,这不就是它所说的定义成class的绑定函数吗?同学,看一下最后一句话,他说,但是大多数情况下,它是无关紧要的,官方已经明确说了,同学,无关紧要的。
18:14
那说老师,以后我怎么写,你就告诉我吧,我到底怎么玩的?同学,以后啊,直接写成内联的没啥影响,但是如果说有人跟你较真的说,说我就写成一个内联的回调和直接写一个类绑定的回调有什么区别呢?那告诉他其实是有区别的,但是这种区别可以直接忽略,所以说呢,同学,无论是公司开发还是以后呢,我们做案例肯定是这种形式写的还是比较多的,OK,好,那这小节呢,我们停一下。
我来说两句