00:00
好了各位,那接下来呢,我们写一个案例去给大家演示一下这个get snapshot before update的使用场景,虽然呢它很罕见,但是你要是用它的时候呢,还是挺有意义的,它不同于你之前学的geterive state from props那个东西真是意义不大啊,那所以说呢,它还是有点小意义的,用的时候还觉得诶一品还是这么回事儿,那所以说呢,我们给大家演示一下,好吧,文件呢,我已经建立好了,但是啊,同学我不想在这儿直接写东西,我想在一个干净的页面里边,不跟react有任何的交集,我给你写一些固定的结构,带着你复习一些特定的属性,然后呢,哎,你都透了之后呢,我再告诉你,我把它得写成组件,得渲染组件,好吧,我这关掉来右键呢,我新建一个叫做demo.html,一会儿这HTML我会删掉啊,来右键打开。现在肯定是什么都没有,我说一下接下来我要写什么啊,做一个新闻列表的展示,红色的呢,是一个容器里边放着的呢,是一条一条的新闻啊,这是一条,中间呢可能还有很多条,哎,那在打头这个位置呢,还有一条好模拟微信朋友圈,还有微博那种感觉。
01:12
最开始的那条新闻,一是在这儿的,二呢是在这儿的,可能中间经历了3456,那最终那个七是在这的,对吧,中间可能还有3456,我就不再画了,对吧?想想朋友圈和微博那种感觉,新的东西,新回来的新闻肯定是放在上方的,对吗?诶,就这么一个列表来开始写走。来个div啊,点儿给他来一个样式的类名啊,叫list,嗯,那里边呢,放的都是新闻,走着叫做新闻一,还有234567,那打头的呢是7654321啊,那给每一个新闻呢,也给它加一个样式的类名class啊,叫做news新闻好写点样式给这个list呀,来点这个宽度和高度宽,就让它200高度啊,我先说一下同学,我不能写的太高,太高一会儿就没有办法演示问题了,我先写个一百五啊,然后呢,来个背景色好看点的,让它是天蓝色,右键打开看一下效果,诶之前那关掉7654321是不是都在这儿了,接着写接着写啊,我让每一个新闻呢,都有一个自己的高度,比如说是30,这个时候你就注意了,容器多高150,每条新闻多高?30容器只能放?
02:32
啊,五条新闻,而你却写了七条,那么效果就是。是不是被挤下去了,是不是溢出来呀,我不想让它溢出。也就是说,如果放不下了,你给我出个滚动条,那所以说在这儿呢,我得给副容器来一个overflow,不叫hidden,叫out two,好了,回到页面看效果走新闻七是不是打头三下边其实还有二和一没来得及展示,对吧?你可以滚动这个滚动条去查看,好的,那我们呢,先把代码写到这儿,同学,我问一下啊,我想让新闻六大头,我得怎么滚动这个滚动条呢?是不是得?
03:08
这么来啊,我想让新闻五打头,我是不是还得继续往下再滚动点啊?同学们,我想问你的是,其实呢,很简单啊,我想问你的是,这是不是容器,这是不是容器里的内容,我给你好好画着啊同学,走三,其实在三的下方,是不是还有个二在这儿呢?是不是还有个一呀?好,六想打头,是不是把容器往上窜,窜多高呢?窜30PX就够了,为啥呀?因为每条新闻的高度就是30PX。同学,我想让五打头,那你觉不觉得你往上窜的就得更多,你得窜两条新闻的高度是不是60PX?好,我不想自己去用鼠标滚动这个滚动条去实现,我想通过GS代码去实现,那你怎么写。
04:00
那就不知道你还记不记得那个属性了是吧?来说说首先第一步呢,同学,你要获取到这个外壳的容器,就是那个list list呢,我是拿这个写的,叫样式的类名class,那所以说呢,我可以这样去写,直接在控制台上写啊,List等于document点儿get element by class name对吧?啊,然后走class name叫做list,但是你这么拿,拿到的是不是一个数组,哎,我得写个零,是不是才能拿到list?现在打头的是不是七啊?我想往上窜一条新闻的高度让六打头,你是不是得这么写,List点有一个属性,不知道大家还记不记得了啊,就刚才我想问你的叫做sc top,等于来看着我写一个30,注意观察啊,我没摁回车呢,没执行呢,我按下回车,你看右啊左侧的效果啊,123走是不是窜了一位同学,我如果想要新闻五打头说老师,那你就再窜一遍,30不是它本身没有累计这块功能,你得这么写,改成60,注意观察五是不是窜上去了,好,那你就知道了这个sc top这个值是干嘛的?好再带着你复习。另外一个list身上还有一个属性叫做score tight,啥意思呢?内容区的高度list这个容器内容区的高度走是多少?210,二百一咋来的?一共七条,每条30PX,那30乘以七是不是二百一好。
05:31
那同学我想问你一下啊,你说如果现在我把新闻删下去一条是不是六条,那每条如果要是30的话,那是不是一百八呀,我们看一下啊,删掉走首先第一步呢,肯定还得是拿到list,然后呢,我再给你输出list.score是不是180 OK,这会儿如果你懂了,咱们就能接着写下去了,好,关掉这个页面,接下来我把这些结构呢搬到组件里边,首先来到这儿啊同学先把组件啥的给它定义好了,Class,我要展示的是新闻的列表,所以说我就叫做news list啊I呢是小写的啊list,然后呢,固定的结构了,继承react.component,对吧,哎,O是小写的啊走,然后里边呢得写render,得有返回值是吧?哎,缩进的调一下多级的结构,所以说这呢得报一个div行了,接下来的别自己写了,上那边把他刚才写那个咱给它粘过来。
06:29
从这到这儿剪切走,然后在这儿粘过来,然后你要注意,你得把所有的class改成class name这儿改这儿这儿这儿这儿是不是都得改好,然后再把样式是不是拿过来,整个style标签全都带走,那这文件呢,咱也不要了,给它删掉,回到这儿把style丢在这儿啊,来右键打开瞧一下效果。这就改成了react里的组件,但是没出东西是吧?那来看一下吧,他说怎么的了呢,刷新,诶,同学,我写了,怎么没出东西呢?嗨,你没有渲染组件对不对?好了,走啊,到这儿取消渲染组件,React DOM render啊,走,然后渲染的是news list新闻列表容器一直叫test,回头看一下效果,诶,列表是不是来了呀,同学,接下来呢,听我所说啊,我呢想让他刚开始的时候没有新闻。
07:28
然后页面的每隔一秒钟回来一个新闻。刚开始是没有的,然后新闻1234567,哎,就不断的往回回,那同学你想想页面是不是有东西在动啊,是不是东西在变,状态中的数据驱动着页面的显示,所以说回来咱们是不是得定义状态了呀,走初始化状态,状态里边呢,存一个东西,那这东西呢,就叫做news AR吧,一个新闻的数组啊,新闻的数组里边每一项都是一条新闻,好,那接下来怎么办呢?组件一挂载,每隔一秒钟就回来一条,所以说得写那钩子component mount,对吧,一挂载那就开启一个循环定时器,每隔一秒钟。
08:15
啊,回来一条新闻,那首先第一步是不是得是获取原状态呀,看看原来里边有什么新闻,同学,那你比如说啊,新闻七回来的时候咋了,新闻654321就都不要了呀,不可能的嘛,啊结构赋值等于z.state获取谁呢?News a2好了,写在这儿走,接下来呢,是不是得模拟一条新闻呢?啊,模拟一条,哎,新闻我知道,同学啊,如果是真实项目开发,得发网络请求,对不对?但你别急嘛啊那接下来怎么办?写呗,Con news一个新闻啊,那新闻写着吧,我的格式很统一,每条新闻都叫新闻啥啥啥啊,那所以说在这儿先写上每一条新闻都叫做新闻,怎么怎么地。
09:01
那怎么把这编号写上呢?是不是用这个数组的长度就可以啊,但是我不想让第一条新闻叫新闻零,我想让第一条新闻就叫做新闻一,那你说你是不是得这么写,加上news a.lengths然后呢,加一,你不加那个一打头的啊,就是最开始的那个肯定叫新闻零是吧?不太好,好了同学,新闻呢,也模拟完了,原来的新闻呢,也拿得到了,那接下来呢,是不是更新状态啊,好,写着this.set state,更新状态里的哪个属性呢?叫做news AR,然后接下来我这么写,看大家能不能懂啊,数组我把新的新闻最新一条的放在前方,那后边的是不是也别丢啊,点点点来把它呢拿回来。同学这么写啥意思呀?我把没把一个数组交给news AR交给了,这数组长什么样子呀?打头的是你新生成的,后边呢是之前的对吧?哎,是可以这么写的啊来,那咱看一下效果啊,右键打开走一些同学他咋不动呢?这还是654321呢,很简单,状态你是维护好了,但是这是不是没有动态的便利啊,哎,好了,那这些呢,给它删掉走,然后这得写上this.state.news ar.map便利,你拿到的每一个都是一个新闻,我就用小写的N了,就代表news,那在这呢,得有返回值written这些结构,那不叫新闻六,这得叫做N,好了,保存回头呢,瞧一下效果,右键打开,刚开始肯定是没有的,然后就是新闻12345同学是不是不断的就往回来了呀?啊,那你看一下控制台上应该有一个警告,同学来告诉我这是怎么回事呢?
10:52
哎,每一个节点的里边是不是都得有一个唯一的K啊,那所以说你把谁丢了呢?你把那个K丢了,那咱之前咋说的了,同学这个K呢,每一个人都是唯一的,你用一个唯一的标识就可以一个最方便的标识,是不是用index,但是咱之前好像聊过这个问题,同学用index可能会引发一些问题,对吗?
11:13
啊,说老师那在在这用不用呢?你这不用,你也没有办法用别的了,所以说先用着,说老师你不是说会有一些问题吗?这就涉及到它那个DOM的低平算法,咱们会单独开一小节给大家讲解,就这个K到底怎么去取值,对吧,我就用index能在什么时候产生什么问题,好吧,在这儿呢,你先别急,所以说我在这写一个A等于什么呢?Index,好,那这回呢,回头它就不会有那个问题了,啊说老师那这就写完了呗,但是你没有用上那个钩子呀,同学你注意观察,现在呀,他这种感觉就是新回来的新闻肯定是在最前方的,而且把旧的新闻是不是都往下顶呀,说老师这不挺正常的吗?那接下来我有这么一个需求,瞧着啊,就是你看现在是新的20对吧,我选中啊新的20同学你说等一会儿那新闻20是不是被挤下去了,但是我还想再看看,没看完呢,刚才那文字多,那你说你肯定有这么一个动作,就是往下滚动,哎,走好了,同学就比如说这我想。
12:14
看新闻12,新闻12是不是在这儿了,说老师那不就停在这儿了吗?这是我开了画笔,同学整个页面就冻结了,所以说你看到诶好像停在这儿了,其实它停不住,你看我画笔一取消,同学怎么样是吧,新闻12早就被顶没了,你再往下,比如说我想看哎新闻22,你等会儿22就开始被往下挤,一会儿就挤没了,那我想实现的效果呢,是这样的,来整体刷新一下,是这样的啊,你注意看得出现滚动条,再讨论这个问题啊,你比如说同学新闻四马上就要被挤走。是不挤走了,那我的目的是,哎,我往下一滚动,我就给它停在这个位置了,来往下走的同学不说在哪儿啊,新闻四是不是能让你看得见,不一定说把它放在最上方,或者把它放在最下方,只要新闻四能出现在这个区域内,是不是就可以,我的目的就是这样,我鼠标滚轮如果说滚动到这个位置了,你就别动了,鼠标滚轮始终停在这个位置,你始终停在这个位置,新的新闻依然不断的往回回,依然不断的做展示,但是呢,不要去打乱我看新闻的,哎,这种感觉啊,就比如说来,我想看看新闻17啊,我看着不要往下挤,停留在这儿,新的新闻也要往回回,而且怎么办?这会儿你别给我往下挤,那怎么实现呢?就可以利用刚才咱们说的那个钩子来,我先写着啊同学,那钩子叫什么名呢?Get snapshot。
13:46
Before update对吧?打开新的生命周期图观察一下,同学为什么调render啊,因为我要更新对吧?那么调完render之后,它是不是调这个东西叫做get snapshot before update,同学一再强调人家都能叫before update,什么意思?是不是在更新之前,也就是新的新闻还没有放在页面上呢?
14:13
是不是掉的它,那同学我问你data update呢,你都掉data update了,是不是意味着页面已经更新完了,也就意味着新的新闻已经放到页面上了,对吗?同学,那我问你这个时机和这个时机是不是差一条新闻,那你说你是不是可以计算一下在这个时机内容区的高度和这个时机内容区的内容区的高度,算出它俩的差值,然后动态的决定整个内容区往上往下窜多少,是不是就能实现新的新闻持续的往回回做展示啊,而且还不影响你现在看新闻对吧?哎,就这效果,这也不是它官网上你所说的吗?同学,我们打开官网,你看它官网是怎么形容的这个东西的啊,来,咱直接搜索这个啊,Get。这个snapshot before update在这呢。
15:01
你看一下它官网里边是怎么形容的啊,稍等一下,可能这个速度呢,有点慢,诶好嘞,他打开了是吧?哎,那我们看一下同学他说呀,在发生更改之前,从盗墓中获取一些信息,例如滚动的位置是吧?哎,就是我们现在的需求,好回到案例当中,那接下来呢,我开始写。在调这个get snapshot before update的时候,注意新的新闻还没有被放在页面上呢,那你说这个时候我是不是可以拿一下内容区的高度,因为接下来再走下去,新的新闻就回来了,我得知道一下这个新的新闻回来之前,你的内容区有多高,那是不是得拿到list内容区的高度啊?说老师那这怎么写呢?document.get a不对,你在react里边了,所以说我做这么一件事,我打个ref,然后写上叫做list,我就先临时用一下字符串的这种形式,好吧,因为这简单啊,我就直接开始写this.right点谁list。
16:05
把它的什么接着往下传呢?或者说把它的什么留下一份呢?拍一个快照呢?是不是它的内容区高度啊,那怎么写scar是吧,你这得加上return,同学,你一加这个return不要紧,东西是不往下传了,那主要是传给谁了呀?Update对吧?他能接到三个,一个是之前的prop,一个是之前的状态,还有一个就是你传的那个高度,对吗?好了,同学,那你想想啊,马上又更新了,新闻还没有放到页面上呢,那哥们儿,这样吧,我把现在的高度给你一份,那你在这儿呢?那你在这儿呢,你想想同学,如果说你想保持东西依然不变,咱回头分析一下,同学,比如说现在已经是新闻200多了,那比如说咔我滑到这儿,咔我滑到这儿,我保证它不变,那你是不是得算出来新闻38和现在这个高度来讲啊,它应该往上窜多少,而且你要注意一个事情,就这个新闻呢,是不断不断不断回来的,那所以说你说在这里边我是不是得动态的调整一个人才对,this.res点儿动态的调整谁是不是list内容区往上窜多少,那往上窜那值叫score top。
17:34
对吧,那我问一下它的值得是多少呢?我拿到它了,我要调它的sc top值得是多少呢?同学你说如果说已经开始调data update了,是不是证明组件已经更新完了,是不是证明新的新闻已经出现到页面上了,所以说我问你高度是不是已经增加了呀,那你应该做这么一件事。拿到一下他现在的高度,然后再减去在这一步传过来的这个高度,对吧?哎,这是新的新闻出现之后的高度,减去之前的高度,那是不是就是差值啊。
18:05
好同学,如果你要是这样写的话呢,其实也是有点小问题啊,我们先这么写的,来你看一下效果啊,刷新新闻一二是吧,等会儿出滚动条的时候,五同学注意啊,六说老师这不挺好的吗?你发现东西依然在往下挤啊。说老师,那我这不是计算差值放上去了吗?同学,你要这样放啊,就挺有意思的,你说这俩人的差值,这两个人的差值是不是永远是30。比如说现在是101条,那你刚才是100条,那你剪肯定就是差那一条对吧,所以说你想让滚动条真正的停在这个位置,不要再来回再窜了,你不应该是等于得是加等。啥意思,你持续的有新的新闻回来,那我就持续的往上窜,而不是说窜一位,你说对不对,你写成一个加等,那你这回再看效果来,注意啊同学,新闻12345,你看着滚动条出现了,同学我问你,我现在是不是依然能看到54321,但是滚动条为什么逐渐逐渐在变矮呢?因为东西逐渐逐渐变多,你比如说同学现在最新的已经到了新闻17,但是你看我一放在这儿,我一停十七十六,哎,依然停在这儿,新的新闻呢,继续往回回,那我划到这儿呢,也可以,你想看哪就看哪,那我要想看最新的,行,那就是29,三十三十一,其实依然往回回,对吗?哎,所以说同学你看这就是它的使用场景,对吧?一定要注意这是甲等。
19:36
有一种感觉,你持续的有新的新闻回来,我就持续的往上窜,就这回事啊,用这个案例呢,就给大家简单的演示了一下啊,这个get snapshot before update有什么作用好吗?哎,那我们这一小节呢,停一下。
我来说两句