00:00
接下来我们来讨论一个问题,就是关于这个ref里面的回调函数执行了几次的一个问题,来复制一个代码。三。回调ref。重命名一下。执行次数的问题吧,执行次数。来把这个也改一改啊。把这个例子精简一下,我们要一个框就够了啊。想要知道它执行了几次,我们是不是还要有其他的输出,哎,那这里就不能写这种简写的一个方式啊,把这个括号给加上,诶在。这个就不要了啊。
01:02
再输出一个。我们的标识啊。好,输出艾伏吧。首先啊,他肯定会执行一次,对不对,你一次都不执行,我们这个组件怎么渲染的对不对,他肯定会在这个组件渲染的时候就会执行一次,我来看一看啊。嗯,直接右键运行。打开这里啊。哎,是不是执行了一次,对不对。也就是当组件渲染到这个页面的时候,它会执行一次,哎,我们之前讨论过这个render执行了几次的一个问题,它是不是一加N对不对一。哎,它是不是一加N1就是我们第一次渲染组件时候,执行那一次,那N是什么?N是当你哎组件的这个S组件发生更新的时候,执行的一个次数。对吧?好,那我们要讨论的问题就是当组件哎发生更新,它会执行N次,那么我们的ref里面的回调会执行多少次?
02:07
那我们接下来看一下手册啊啊。还是找到这个if与DOM啊,一直到最后。最后这里,哎。关于回调ref啊,这个S它的这个说明,哎,如果ref回调函数是以内联函数方式定义的啊,内联函数方定义的,在更新过程中会被执行两次,注意啊,人家说的是更新,我们这里是什么,这里是渲染。清楚了吧?啊,把这个后面都关掉啊,我们这里是第一次,这是渲染,这不是更新,就是当你组件更新的时候,它会被执行两次。啊,第一次传入一个参数now,然后第二次会传入一个do。好,那怎么来复现这个问题呢?那就需要改我们的代码,我们现在,哎没有组件的更新,这里我们输入数据,获取数据,也只是正常的去据,哎,正常的盗墓交互啊,正常获取数据,想要让组件有更新,那我们来回想之前我们写的例子,写了一个天气,哎,炎热和这个凉爽的一个例子,那是不是组件发生更新了?好,咱们把这个例子给结合进来啊。
03:13
那首先来定一个标题H1啊,今天天气很哎,这里我写上啊,判断谁呢?呃,文档先定一些,呃,这个state啊。在这定义吧。Is hot啊。好,那。在这里,我获取了这个hot的值。从啊this.state里面去结构出来is hot,然后我来判断这个is hot,哎,如果你是炎热,那就是炎热,哎,否则的话呢,就是凉爽。
04:04
好,接下来呢,哎,我这个已经写完了,但是我要给他一个事件,点击事件,就是当我点击的时候呢,去呃切换它的状态对吧,这样的话组件就会发生更新,才能去复现我们这个问题啊,那我直接给这个he一个on click事件。N性解。那这个不能这么写啊,要写这个画括号this.change我们来定一个这个方法啊,改变。天气的啊方法。注意啊,用负值加简测函数的形式,哎,在这里面我们使用this.s。State来设置。哎,我们的这个is hot。
05:03
等于谁呢?等于原来的is hot取法我们先把这个原来的这个is hot给获取到啊。This展。啊。使用结构的方式去写吧。来给它进行取法,把注释写一下啊,获取当前is号的值。的值。那这里去更新啊修改。配置中一好特的值,好,当我们点击这个h he就会触发啊这个事件方法,哎,它会获取了原来的这个套的,把它给取反,取反之后呢,因为state里面的数据发生了改变,所以组件会重新渲染,那那主机重新渲染的时候呢,Re就会重新调用,哎,我们就看一看,当组件啊重新渲染,也就是说哎,数据更新的时候。
06:05
这里执行了几次?刷新下来。首先哎,这是第一次,第一次是我们,呃,渲染到页面,哎正常执行,那接着我来点击。可以看到是不是只剩两次,你看多了两个,我们把它清空掉啊,把它清空掉,现在我再来点。是不是执行两次?来接着看一看啊,他说执行两次,哎,第一次传输参数是道,第二次才能参数这个倒们这个元素对吧,那我们把这个传输参数来打印一下啊。逗号。这个C啊,C是我们传输的一个参数。来运行在这。好,第一次是不是,呃,刷脸的时候执行一次,这很正常对吧。来,我们把它清掉,当组件我来点击了,当组件发生改变的时候。还是不是第一次传入了now,第二次才给我们传入这个道墓的这个元素,我们是不是出现了这个问题啊,那这个问题是怎么产生的,我们来看一看官网是怎么说的啊,这是因为每次渲染的时候都会创建一个新的函数实例主啊新的函数实例。
07:10
啊,新的函数实例,这个我想强调了,注意下是新的函数实例,所以relax呢,它要清空旧的refer,并设置新的,注意啊,它要把我们之前这个函数哎给给清空掉,清之前的refer给清空掉,才能设置这个新的。好,那我们来按照我们的代码来捋一下啊。我们先看第一次,哎,第一次我们这个软正常的渲染,诶,这执行了一次对不对,那我们这里有一个函数对吧,这里函数执行之后啊,给我们的这个实例绑定了一个啊隐一,哎这个属性是我们的这个实例对不对?好,这是第一次没问题,那第二次呢。第二次啊。他不知道你以前就说你上一次你这个函数到底执行了啊什么,然后给这个实例绑定了什么东西啊他。要干什么,他现在是要生成一个新的函数,因为这个函数回调函数对吧,每次执行都会生成新的,他不知道你以前那个函数干了什么,所以干什么,他先传了一个no,哎,做一个清空的一个操作,明白了吧,之后才会传入这个盗墓的意实力,也就是官网说的这句话对不对。
08:16
就是说每次渲染的时候会创建一个新的函数实例嘛,所以清空旧的。并且设置新的,那它怎么去清空这个旧的呢?就是靠它第一次传入这个闹来清空这个旧的之后,随后传入了一个,哎,我们的真正的这个道去生成了一个新的这个就是呃,这个问题所在啊,注意啊。注意啊,只有什么呢?只有是以内联函数的方式去定义的才会出现这种情况。哎,这里说了然,通过将啊refer的这个回调函数定义成class的绑定函数,就可以避免上问题。那什么是内敛函数方式定义的,什么是class的这个绑定函数呢?啊,其实这个字的话,你读起来比较绕,但是我们把代码写出来,我们就比较清晰了啊,那首先我们这个是内联形式,这毫无疑问的对不对,然后把这个注释掉啊。
09:06
看一看。哎,我们使用class的绑定函数的形式,它会不会出现这个问题啊,先把这个注释啊,GS叉里面的注释,你要写这个标记符啊,写这个大块标记符,然后斜杠星星斜杠把我们的注始代码放在这里面啊,没办法,只能这么这么做,所以尽可能的大家不要在GS叉里面去注释内容啊。好,接下来我来复制一个啊,复制一个改一改,把它改成class绑定函数的一个形式,那既然是class绑定函数,那就不能在这里写了,我们在这里写的是内联的,你看是不是写到了这里面,写到内行,哎,写到这个属性里面,这是不是内联的,那我们要绑定啊,绑定class的这个函数这里,哎,直接去调这个实例上面的某个函数,哎,比如说是啊C5啊input啊,那我们要去定义这个函数对不对,好啊。
10:01
诶,回调函数啊。使用这个。赋值语句啊,加这个箭头函数。来,呃,这时候也就是说我们ref,它这里面我们一样传的是回调函数对吧,只不过这个回调函数我们不是直接写到这里面的,而是把这个回调函数放到了这个实例的身上,对吧,我们通过这个实例哎,去调用我们这个回调函数。对不对,好,其实这就是上面这种写法,就是内联的哎函数内联的回调函数这个写法就是我们使用的是class上面的这个绑定的这个回答函数,明白了吗?这就是官网它说的这个意思啊,就当我们以内联的形式当组件更新的时候,哎,当数据更新的时候,它会执行两次,哎,当我们以这个class绑定函数的形式去写的时候,就不会出现来我们做一个验证啊,那既然我们内联的形式可以接收一个参数,哎,我们是不是这种来使用class绑定方式一样可以接收受一个参数C,好,那我们里面写什么呢?就把这个里面的内容,哎,原封不动的写过来,哎,这样回事。
11:07
我们还检查一下,看现在使用这种卡拉绑定的形式会不会执行两次啊,找到我们的页面这里刷新,哎,首先第一次是组件,哎,就是我们在渲染到页面的时候,渲染的时候只能一次,哎,我们把它清掉,接下来我来点击这个标题,让数据发生更新,看它会不会执行两次,可以看到没有输出啊。是不是?没有任何输出吧,对不对。就不会再去重新执行了,为什么?因为我们已经提前把这个函数去绑到了这个实例上面,就是它能从这个实例上面去找到这个函数,知道吧,它能从实际上面去找到这个方法。他就不用再去生成新的了,他不用去生成新的。对吧,那就不用再去重复执行了,好,那我们来看一下最关心的问题,我们的功能还正不正常,你看主要是这个功能来点一下显示,哎,是不是正常的,好,我再随便去改变改变这个数据啊,再来点一下显示,哎,我们功能没问题对不对,好这个就是。
12:05
哎,我们使用这个class绑定啊方法的时候,这种方式,哎,使用这种回调就可以避免。这个问题对吧,避免它这个,呃,Ref里面的回调执行两次的一个问题,好接着我们来看一看手册。人家说的最后一句话,但是大多数这种情况下是无关紧要的。看到了无关紧要的,哎,所以说啊,即使是以这种内敛的形式,他执行两次,你就让他执行呗,那没有任何影响,对吧,这是人家react的一个机制,人家官方都说了,哎,没有什么影响,无关紧要对不对?哎,我们一切以官方的这个为准啊,所以说大家不要迷茫啊,哎,我们这种写法肯定比较麻烦,那我们在开发中使用哪种写法呢?还是直接使用内联,哎,怼就完了,使用内敛啊。把注释给大家写一下啊。啊。写到哪里呢?写到这儿了啊,实际开发中,嗯,直接使用。
13:04
Ref的。内联回调函数即可。啊,没有什么影响啊,嗯,但是呃,有人问起你这个问题说哎,这个内联的这个回调函数和这个ref的这个,使用这个class绑定的这个,呃,回调函数有什么区别,哎,我们要能说出来这个区别,但是我们真正开发中,我们去使用的话,直接使用这种内联的方式就可以。好吧。
我来说两句