00:00
去看一下另外一个东西。看一下CC的异步和同步的问题。我们前面不是说CC的更新状态是同拜一不的。意义不了,我前面就说过这句话不对。你说垃圾同步了呗,那也不对。啊,有可能是异步,也有可能是什么呢,同步。而且set对象的模式和函数的模式吧,它还不太一样。还有点细微的区别,这个细微的区别就是容易考的问题,你懂吗?如果是特别明显的一些东西,他不会考你。嗯,永远考的试一些细微的区别,我们最后说完之后需要去关于做一个关于啊CD的打印顺序的一个打印数据的一个面试题。啊,这个面试题是我整合了一些面试题以后写的一个面试题啊,如果你能把它啊彻底的搞清楚,那只要是关于csd的调用顺序的一个问题,你基本上都能搞定,其实这里面也涉及到promise和out,就是微队列和什么宏队列的问题也会涉及到。
01:08
啊,是整合在一起的,我们先来说这个问题。说set啊,更新状态到底是异步还是同步的。其实我们要先搞清楚我什么时候掉的。是吧,什么时候去交四的就决定了它到底是异步还是同步,说白了执行的位置很关键,听懂不?那有哪些位置呢?哎,我把它分成两大类,两大类一种是react相关的回调。React的相当回照有一些。生命周期回调还有什么?事件监听毁掉。是不是事件监听啊,记住啊,因为艾的事件监听是原生多么的事件监听的吗?不是,它是用了合成事界,自定义事界,懂不懂它不是用了原生的动物世界?
02:05
二。再一个其他的异步回调中。那也就是说结果是什么呢?如果你在react相关的回调中去执行set out set state执行set,那他的这个操作就什么意呢?那如果你是在其他的异步回调中,那它就是同步的,其他的有哪些啊。我们常见的。定时器还有什么?啊,多么监听多么监听,毁掉是不是还有吗promise?能听到不?这能懂吧,好来,我们现在就来去验证一下,对吧,来去验证一下。看好了,这里面呢,我啊有这样一个例子啊,这个例子,这个例子呢,现在没写太多东西啊,只是做了一个准备工作而已。
03:00
啊,有很多按钮加了很多监听,我还没写回掉,我有一个count为初值为零,现在是打印re count值为零呢。好,下面呢,我们来去做一做看好了。我们先来说第一种情况,我在react相关的回调函数中去进行。比如说我在这个react事件回调函数中去做,这个是react事件监听回调吧。是吧,那我就写一个看好了,this.set。可以吧,嗯,写来,因为我是在原来的数据上加一,那我就用什么,是不是用函数的方式去更新啊,写什么呢?大小括号大括号对吧,更新的是看的吧,在原有值上什么加一。杨明呢?
04:00
能听懂是吧,那能听懂这个事情我。看好了。我是异步还是同步,很简单,我只需要在这里面做一个什么。是不是打印输出就行啊,这是UPDATE1,这是是不是之后这能听到不啊,那这个时候来我们打印一下什么呢?This点是state点什么,我们甚至可以在更新之前和更新之后是不是都做一个打印输出。没什么。没问题,我们来看一下啊,看一下是一个什么样的状况,其实这个咱说过,咱应该很懂啊。走,你。但是呢,他是不是先。跟三之前是零吧,马上是不是调用三之后还是零,但最终变成一。
05:02
那也就是说这个render肯定是在更新状态之后执行吧。这个比的对不对,不然的话他怎么能得到最新的状态是不是。这里第题这个说明了什么啊,说明一个事情,一个什么事啊,这个在哪个情况下是在它的react什么事件监听啊,回调中什么是E的set state是什么异步的是异步更新状态对吧。这个可以吧,以啊,好,下面再说另外一个来这个另外一个我还有一种叫生命周期的钩子,也就生命周期毁掉呗。我来一个啊,我来一个。我来一个什么呢,比如说来个。这里没提示啊,写自己写一下啊,Component did,什么mount,这个是在什么时候标啊,这个did。
06:09
在第一是什么render之后吧。这能听到吧,来把他来一下,把他再来一下吧,没问题,好,我们就来看一下,注意观察。大家看一下。这个打印顺序是不是还是在说明。这个是一个什么异步的操作对不。在伦吧。啊,能懂没问题,那也就是说这一次证明的是什么?是了,证明的是这个事情在的什么生命周期钩子里面。你就生命周期回来还是弱对吧,3C的是什么?一更新状态没有吧。这个跟你用函数的方式,函数的方式分析还是对象方式分析有关系吗?没有这个没有啊好。
07:07
下面我们要说说同步的情况。同步的情况是不是有这么一些,大家看到定时器原声多么时间监听或者promise回调对吧?好,我们都来试一试,这实际上是有三种情况吧。测试下就行,很简单,现在说定时器来一个啊,我们再来一个太的爸爸一个来呗,正面是要搞个什么,在太慢了可以吧,啊,也不用指定什么时间了。有没有延迟多长时间不是问题,能听懂吧?好,那我在这里干嘛呢?一样类似的,把这个代码什么发一下是吧,只是这是在定时器里面呗。
08:04
没什么。没问题,好。把这个其他也搞得了啊,其他也搞得。嗯。再来一个。嗯,这个是假如三,这个假如是四。换一个,比如说原声事件监听毁掉,那我这个时候得做点事情。做点什么事呢?我得在这个里面去找一下HR。找一下这个标签,给大家绑上原生的这种视频监听,这个怎么搞?最简单办法,我们就不用那个if的那种最新的方式了,我们用它最老的方式,因为那种方式呢比较简洁,我来用一下,先给它取一个名字,If,取一个字符串的名字记在后面,怎么找到那个HR了,看好了。我给大家写一下啊,this.res。
09:02
点刚才叫的什么名字来着。是不是叫抗的,这样就得到哪个标签呢。H标签听到吧,HR标签,下一步是不是写一个安个小写的吧的一个方形,当然可以,最好是给一个进的函数,因为this才是对的是不是。这能听到吗?这是不是绑定了原生的动物世界接听?好,那我们在这个里面干嘛去。他吧。这个吧。没没啊,好,这是一个还一个。啊,我们是不是还有promise回调啊,那首先我们得来一个什么promise太简单,要创建一个promise,象最简洁的方法是不是通过promise函数对象的方法来去创建一个。
10:03
不要指不指定成功的值是多少。说白了,此时我要问你了,我接受的白点是多少嘞,多少?看到吧,好,这个我也不要,这个我也不要,我主要是要把。这个代码。完了,这里。这能听到吗?可微信吗?可以吧,只是我要稍微的改一下。OK吧,OK,好,那现在我们就要去看一个东西,这是在三种不同的回调函数里面去做,我们来看一看会是什么样子。来一共是不是有三个按钮。对应的就是我三个吧,我们先来看第一个定时器的回调。想你。大家注意观察。
11:00
看这个顺序,你觉得我们的这个S那个sentence是对了之后是在什么时候执行呢。人的时候。说白了,这个set state内部大家看啊,这个set state内部是不是会导致于我们的状态进行更新的,整个流程会出发。整完之后,更新完状态之后,后面是不是才会去执行下面代码,说白了就这个更新是一个什么。同步的。这能听到不?那同理啊同理,我们来看下一个。点他。没没加上。二哦,HR我再点HR是吧,点完它以后再点HR是不是点完它再点一下走你。这也看到了一样的效果吧,一样也是同步的,好,再来一个。
12:04
下一个啊。点它走,你你看你。黄渤的。那这个地方就要去说一个事情啊,这个里面啊,回想一下我们以前的代码啊,我们有以前好一些不同的代码,比如说我们,嗯,前面是不是做过一个分类管理的。我们有一个分类管理的,好,回到我们分类管理这里来。当时我们是不是在说这个是一个异背心呢?是不是为什么是异步更新呢。因为这是一个事件回调函数,事件回调函数听懂不?好,那我要问大家啊,我要问大家看好了。看好了,我这是一个啊大好了,在这个里面开里面,我这里面不也有更新吗。
13:02
我要问大家,如果我在这里面去打印输出。输出呢?因为他认识原本是零。现在给他设计了一个,设计了一个新的一个数组,有数据的数组,这个认识是零还是不是零呢?不是零,为什么呢?因为我们现在是在之后执行wait之后相当于在哪里执行的。那个成功的任成功的还对吗?这能听到不?啊,这个时候啊,这个啊,大家注意观察,我在这里面啊写个它,我们来看一下我们的当前的这个。看一下就知道了。诶,是不是服务器没系统,怎么着找不到数据。有11吧,看看多少。
14:01
事实说明什么?他是不是同步更新的呀,因为我们是OV的之后,执行OV的之后,就相当于在点任的成功回调还是没执行。这人到不,嗯,好,这还是有点不太一样的啊,稍微有点不太一样好了。这这一个事情啊,这个是回到我们这里来啊,回到这来,这是我跟大家提醒一下啊下面。啊,这个地方就要去说一个事情啊,说一个事情,它其实啊这个提一下就行,它内部用到的是一个什么呢?主要是大家不知道这个概念。它内部是利用了事物嗯来去嗯实现的,嗯,异步更新状态。嗯,但是呢,如果你的这个三的是在其他的相关回流函数里面,它的这个事物就起不了效果。
15:00
那起不了效果呢,就没办法实现异步的效果,它是靠他的义务,靠他的这样一个技术,它里面内部的一个技术。但有个前提,你,你得在什么呢?在react相关的毁掉函数中,它的这个事物才能起到效果。那如果你是在别的异步回调函数里面,比如说我们的定时器,比如说我们的promise回调里面,那它的这个事物呢,就起不到任何的效果,那最终就导致于他更新状态,更新界面是一个什么?是恐怖的。能听到不?嗯,对,稍微的知道一下,主要是大家对于这个东西的没有太好的一个理解,都没接触过,其实大家不用去太管这个事情,只要知道结果就行,这个结果很重要。这没问题吧,啊,就是这样一个事情好。好了,那下面有了这一个东西以后来啊,先把这个停一下。
我来说两句