00:00
好了各位,那刚刚呢,我们说了一下这个钩子对吧,叫做get derived state from props什么意思呀,翻译过来从props那里得到一个衍生的状态,或者说得到一个派生的状态,这个钩子呀,同学就直接说使用场景极其罕见,使用概率也极低,那所以说呢,对于它我们就不在这周旋太久,我们就本着一个原则就可以了,就是官网里边所说的,如果有一天你的state值在任何时候都取决于props,包括后期的更新也取决于S,那你应该用一下这个走前面加个词叫弱是吧?哎,若state的值任何时候都取决于prop,诶,逗号,那么可以使用,我说是可以使用,不是代表必须使用,对不对?同学,如果你state的值在任何时候都取决于props,我问你是不是可以在勾。
01:00
塑造器里边做点事儿,构造器是不是能收到props,那你在这把收到的props往这里一放是不是也行,哎,所以说不是必须要用的,是说你可以使用啊,但是吧,同学这东西你回到官网,他刚才你也看到了,说如果你真的用了派生状态会导致代码冗余,会使组件难以维护,所以说呀,同学就这钩子,说实在话没啥太大意义啊,这东西就删了,世界上消失了,其实都没啥影响,所以说我们不做过多探讨啊,那么我们打开新的生命周期图,我们看另外一个朋友,就是他走。同学这个人呢,和他还有点儿小区别,他俩其实使用概率都挺低的啊,但是这个人呢,相对来说还能比他呀有点意义,就我接下来要讲的这个,能比刚才你那个衍生的状态还能再有点意义,但凡他有点意义的东西,你就比如说接下来我要讲的这个snapshot before update,我会给你写案例,哎,咱们用一个案例去看一看它到底在什么场景下能去使用,对吗?你像刚才这个同学,哎呀,花费好大的劲儿创造出来这种场景了,而且呢,你还违背了一些原则,而且这么写呢,还引发一些问题,所以说没必要了啊,所以说走吧,接下来学这个同学注意观察它处于谁和谁之间。
02:22
它的上游是render,它的下游是data update,它处于render和data update之间,哎,所以说我们研究的是更新的这个过程,对不对,只有更新你才有资格去谈data update嘛,对吧,打开旧的生命周期图,你会发现呢,Render和data update之间呢,是没有任何东西的。啊,原来是没有任何的,那现在呢,有了多了一个人,哎,就是他那研究研究他吧,首先第一步我们验证一下这个钩子到底是不是介于render和data update之间的,好了,关掉,回到代码当中,那我先把代码做出一番更改,同学,我这儿不能返回props,我这一返回props,很多的东西我就没有办法演示了,你这么一写,同学我问你,那是不是就意味着你的状态完全取决于pros了,那以后我要想更新的话,那没法往下走了嘛,对不对?哎,那所以说呢,在这儿呢,我先写一个no,其实我还有一种做法,就是把它整个都注掉,但是我不想这样做,为什么呢?因为你看这个图里边来说,同学,这个get dive state from props是更新里的一步,如果把它注掉了,你总觉得,哎,好像他没走似的是吧,哎,所以说我不想让它影响,不想让它有影响,还想让它写上那所以说我返回了一个闹,OK,好来。
03:44
往下走,来吧,读读这个人叫什么呀?Get得到得到一个什么东西在更新之前对吗?那研究研究吧,Snapshot啥意思呀啊,有道搜一下,为啥这俩词我特别喜欢用有道搜呢,搜完之后你能记住,因为本身它使用的这个场景就很少啊,所以说搜一下能记住snapshot啥意思呢?快照,哎,想想你去旅游的时候拍的那个拍立得,那照片同学就立等可取那种照片,啪一拍底下啪就出来那种。哎,Snaphot快照好了关掉,那他的意思就是在更新之前获取快照,那么问题来了,在更新之前获取谁的快照?这个快照获取完了之后它有什么用呢?我们慢慢探讨啊,对,单词你得会写啊。snapshot before update关掉来验证它get,对吧?Get snapshot before update输出走首先验证它调用的时。
04:49
击对还是不对,那右键打开控制台呢,调出来,这是初始化的过程,我们已经不研究了,对不对,哎,清掉来,接下来呢,我们点击更新啊,走123走好同学注意观察啊,首先迎接你的就是刚刚你学过的那个人对不对?获取一个派生的状态,从pros,然后呢,更新的阀门,由于我的阀门是开启的,所以说render就赶掉了,掉完render来吧,出现你要学的那个人了,然后才是正常的data update同学,首先第一件事调用的时机对不对,对,跟图里边展示的是一样的,好,那再说第二个问题,怎么出现警告了呢?读一读,他说什么呢?他说呀,一个快照纸。
05:35
或者是一个no,这snapshot刚说完吗?不是快照吗?VALUE6不是值吗?一个快照值或者是一个nor必须得返回,但是你却返回了一个and find觉不觉得跟刚才他的套路是挺像的,他说的是要么你给我返回一个什么东西状态对象,要么你给我返回一个闹啊,那这说的意思是要么你给我一个快照,要么你给我一个闹,啥是快照我们也不知道啊,那所以说怎么办?先保证它没错误,我先返回一个闹,咱试试啊,走起好嘞。
06:09
回到案例当中啊,初始化这一下子肯定不算啊,来清掉它不处罚更新嘛,来走同学警告是不是没了,调用时机是不是也对,但是这东西不能讲到这就停了说同学你看吧,它的调用时机是在这的啊,Render和data update之间。那这我不返回闹,我返回一个别的呢,那快照有什么用呢?对吧,慢慢探讨,首先说第一个问题,就是如果你不写这个闹呢,大家都能看得见,有一个警告说老师我知道什么叫做闹,但是我不知道什么叫做快照值。对吧,说老师你像刚才这块呢,你给我解释了,说我不知道什么叫做状态对象,然后你给我解释了啊,我知道了,状态对象呢,其实就跟状态长得一样的一种对象啊,就叫做状态对象,或者返回到老师,那什么叫做快照值呢?我说一下同学,任何值都可以作为快照值,字符串,数组,对象函数都可以作为快照值。
07:02
说老师那听你这意思呢,我这不返回呢,我返回一也行,可以返回艾特硅谷也行,好我们就返回艾特硅谷,随便返回老师能行吗?试试呗,初始化的清掉更新有问题吗?没有,那么接下来探讨这艾特硅谷交给谁了呀,他这东西又有什么用呢?是吧,好慢慢研究,但是在研究这个东西之前呀,同学我先带着你探讨一个问题,之前呢,没有给大家那么大的压力,有一个地方呢,我没有去仔细的提,但是在这儿值得提一下了,谁呢?同学,我把这两个新的钩子我都注掉了哈,我都注掉了,然后你找这么一个钩子叫data update。Date update,同学,默认能接到两个参数,我用一个A一个B给你演示B,你注意观察啊,同学,我怎么能触发data呀,你得更新嘛,然后才能触发data update嘛,对不对?好,来,回到案例当中清掉啊,接下来点这个走,同学,Date update是不是被调用了,它是不是接到了两个参数?同学,你看它像谁呢?老师,我觉得它有点像状态啊,那你觉得他像谁呢?老师,我觉得有点像我传递的props啊,那我说一下啊,同学,它确实是状态,但是啊,可不是当前的状态喽。
08:32
说老师这怎么理解呢?瞧一下啊,刷新现在求和为几,我先清掉求和为几,零我点了这按钮,零是不是得变一好走零变没变一变了,但是你发现它传给data update的是最新的状态值吗?不是最新的,是先前的,哎,是之前的。所以说呢,同学你不能说它是state,前边加个词就合适了,叫pre state啊,我这写的可能稍微诶紧凑了一点,Pre re什么意思?用英文单词叫做previous,是不代表之前的呀啊,取它的首字母pre re代表先前的状态,而且跟大家讲,这会儿呢,你也不能称之为props,这也得加一个pre re props啊,先前传递的props,说老师这怎么理解呢?那你瞧吗?同学,你是不是传递props了?你什么时候传的呀?是不是在初次渲染的时候传的呀?那现在你是在什么时候拿过来的呀?是不是在data update。
09:32
的时候才,诶拿到的这个呀,所以说也得说是先前的props,那所以说同学这块pre re pros到这呢,哎,Pre state啊同学我说一下啊,可能讲到这啊,有些同学就累了,就倦了,说老师哎呀太累了,这么多生命周期钩子,同学啊,记不记得之前我说句说句话呀,就是你学了可多的生命周期钩子了,以后常用的就三个啊,讲完了咱有一个最终的大总结,你不要着结啊,那这呢,输出的分别就是之前的props和之前的状态好,那这个时候呢,我重新把这两个人打开,诶打开走说老师对功能有没有什么影响呢?啥影响没有,初次挂载在这儿呢,点击更新来是吧,啊pre prop pre state对吧,如果说这这人家可没说是pre state啊,人这说的可是state,你没看官。
10:32
更文档吗?你看人说的这是不是叫state啊?OK,好了,回到咱们的代码当中走,说老师,那我就想问问,我返回这个快照值,这个艾特硅谷到底交给谁了?那这个人怎么用呢?是吧,那有必要去官方看一下,回到官方文档中,其实不用再搜了,你往下一滚动,那人就在这儿呢,你看是吧?同学,你看它呢,没用pre是吧?咱说那单词叫previous,它又加了一个小字母叫V同学,怎么样?之前的状态吧,之前的pro吧?好同学,你读一读吧,看他怎么说的,他说get snapshot before update,在最近一次渲染输出之前调用,也就是说你这个东西马上就要提交给盗墓节点了,你的页面马上就要出效果了。
11:24
同学,页面马上就要出效果了,是不是还没出呢呀,那所以说就更新之前嘛,如果现在页面上已经出效果了,那还何谈?比方update呀啊,再往后读,它使得组件能在发生更改之前从do中捕获一些信息,例如滚轮的滚动位置。啊,好,再往后读,此生命周期的任何返回值都将作为参数传递给aua谁呀,Update,它咋就这么相中data update呢?它咋不传给构造器呢?它咋不传给render呢?那看图说话,因为它的下游是date update,所以说它会往下传递的啊说老师,那也就意味着我写这艾硅谷其实传给date update了呗,对,那我咋接呀?嗯,第三个参数就是,所以说写上啊snapshot,嗯,然后呢,Value啥意思呢?就是快照值,你把快照值诶往这一放好了,那我们试试吧。哈,走,回到案例当中,点击加来瞧的同学,这儿呢,有点太长了,看这快照值是不是来了。
12:39
哎,传没传给data update传了说老师刚才你读那什么意思呀,说什么在最近一次什么之前调用,同学,我觉得看图来说说的更明白,同学你说如果有一天react帮你把update这个钩子给掉,完了,你说意味着什么呢?就有一天他把这个钩子掉完了,是不是意味着组件完成更新了呀,是不是意味着页面上已经出现更新之后的效果了呀,那同学我问你在这个环节呢,在这个环节是不是在更新之前呀。
13:14
同学,为什么人说获取快照在更新之前,你觉不觉得?你更新的时候肯定得让页面发生一些变化,如果这个钩子啊,它掉完了,就这个钩子都掉完了,那你说页面是不是已经完成更新了呀?那我想问一下之前的一些东西你可能就获取不到了,你说对吗?那你利用这个快照呢,就可以在它马上更新之前获取一些信息,比如说举个例子,同学,我原来页面上有十个人,我点了一下按钮,我添加了一个人,页面上是不是11个,那这11个人生成了,那我想问一下人的列表,之前那十个人的列表它有多高呢?那如果你不在这个位置,你拿一下,可能你就不知道那十个人他有多高了,那个列表对不对,列表是有高度的吧,哎,所以说同学有没有一种感觉,就跟人们走亲访友一样,你比如说过年的时候大家都串亲戚对不对啊,你这七大姑八大姨都来了是吧?然后大家呢,一般就说,哎,咱们合照一下吧,是吧,哎,咱合个影吧,为啥合个影呢?
14:17
因为过年这几天过去了,大家就都回到自己的城市了,是吧,回到自己的工作岗位了,可能未来一年甚至几年是不是都见不到了呀?那所以说同学们就是聚会,在散场之前是不是得来个快照啊,那么组建同理,在他更新之前你也得来一个快照,就是这么回事儿啊,说老师那快照里边我都拍一些什么呢?是吧,拍照吗?我都拍些什么呢?你想拍什么你就拍什么,我在这儿吧,写的当然是很简单了,我就返回一个艾特硅谷,那我问一下同学,你说我是不可以拿到当前浏览器视口的宽度往下传,我是不是可以拿到之前学生列表或者汽车列表的高度,我再往下传,哎,所以说他给你的一种感觉就是你可做好准备哦,我这个钩子掉完了,我跟你讲,那可就更新完了啊,我更新完了,你之前的东西你可就拿不到了,你有什么想说的吗?你有什么想做的吗?在这儿做好,然后你传下去在这诶我就收到啊。
15:18
啊,我知道我就这么说,大家也只能是,嗯,懂了,那但是还是不知道在什么场景去用,是吧?那所以说讲完这个之后啊,同学下一小节我就带着你写案例,咱在案例上见,对不像这种有点意义的,咱就得写案例了,OK啊好,所以说这块呢,大家要知道啊,就是在更新之前呢,获取快照,写好注释,在更新之前获取,诶快照好了保存啊那这个小钩子呢,咱就说完了,别急啊,同学看一下官方文档,它说一个东西叫此用法并不常见,同学呀,我再次强调,就新的生命周期里边提出那俩新的钩子,一个这个一个这个使用概率极低,使用场景极其罕见啊OK,好了,那这一小节呢,我们停一下,其实啊,同学那再看一下啊,再看一下这个文档里边啊,已经给我们写了一个案例了。但是可。
16:18
机,他这案例呢,不能执行,他残缺了很多东西,他就给你写了一个大概的壳子,就说白了,这东西你放到页面上啥也不出,啥也不出,我顺着他写这个案例,诶,我又给你完善了一下,就让东西有意义了,啊,我们下一节见,这一节先停。
我来说两句