00:00
好了,各位在对比完了旧的生命周期和新的生命周期之后呢,我们把新的生命周期拉出来好好的看一下。同学,东西虽然多,但是你别乱,最后呢,我们也会有一个总结,好吧,我们慢慢来,就如同你当年学这个图一样,咱们慢慢的看一下啊,来,打开新的生命周期图,同学一个一个研究,我们先研究,挂载时只研究这一块。其实这块呢,你压力不是很大的对吧,同学构造器,哎,然后就走了一个我们不认识的那个钩子,然后就render了,然后咱说这是一个固定的小环节啊,咱就不再一直强调这个了,然后data mount完事,挂载完了。那整个这四个红色的对勾呢,只有一个你不知道,就是它来吧,是时候聊聊他了,通过图观察,它是横跨挂载和更新的,对不对?挂载的时候也掉它,更新的时候一上来也掉它,那么咱就读读它是个什么东西啊,读一下啊,叫做get derived state from props,这什么意思呢?
01:08
Get这个单词叫得到啊,大家知道state呢,我们学的状态啊,From呢是从哪里?Pro也是咱们学的三大属性其中的一个对吧?那么问题是这个derived是什么意思呢?说一下这个词呢,有衍生的意思,哎,那我们带大家查一下啊,有道我打开derived啊,这个单词呢,你得会拼啊d derived哎,导出的衍生的,派生的对吧?其实官方文档里用的是这个词叫派生的,好关掉,那么直译过来就是。我把我的有道退出去啊,已经退了好,那么直译过来就是得到一个派生的状态,从哪得呀,从pro。相信大家读完了肯定就晕了,不如这个看起来这么明白,组件挂载完了是不是?哎,来,那咱试试啊,同学,是不是在构造器之后掉的这家伙呀,好嘞,就验证它关掉,回到react的生命周期括号新这个代码里边,那接下来呢,我把它不太推荐呢,准备要弃用的那钩子我给它删掉,就是这个component view mount,因为什么呢?图里边已经体现不出来了,咱再研究它也没有那个必要了,那所以说这儿呢,我给它删掉。
02:28
删掉,还有一个也得删掉,就是那个will update对不对?哎,这个也给它删掉再走好呃,那该删的呢,我就都删完了,然后这里边吧,我不想写的那么复杂啊同学,呃,我再精简一下,我把这A和B呀,我就给它删了下了,A和B主要想掩示这个东西,就是component view receive props,这个东西也是即将要被弃用的了,所以说我们也不再去研究它了,诶,给这个删掉,目前我们只用一个count组件就能说明白问题啊说老师,那目前这个顺序,那你看一下呗,打开来到控制台刷新一波构造器对吗?Render,对吗?Data mount,那来对比新的图,咱们去说刚才你所看到的是构造器render data mount,回到图里面,构造器render data mount,对吧?同学,这没有什么输出啊,这没有,那还有一个人,他说老师,那走没走啊,你没。
03:29
写它怎么走呢?那那你就写一下呗,同学,由于它是在构造器后边掉的,那我就直接写在这儿吧,好吧,其实你知我知跟写的顺序是没关系的啊,Get derived state from pros,哎,走,我写了啊,如果它当真是在构造器之后掉的,这行输出一定会有,您觉得呢?哎,好了,保存,那回到代码当中,我们看一下,哎呀,同学首先观察控制台上有输出这一行东西吗?没有,那就证明它没工作起来,没工作起来呢?又这么几个原因啊,第一个可能就像咱说的啊,你写错了,你比如说from,你写成了form,那这个错误太常见了,对不对?哎,你保存老师他没出,没出是没出,它也没报错,你这么写就和你定义一个普普通通的函数是没区别的,不是生命。
04:29
周期函数,那如果你写对了,那他就应该去执行,但是写对了也没执行呢,就有可能是另外一个原因了,你写的不符合规范,我们读一读这个警告啊同学,其实啊,我就跟大家这样讲,就咱们这一小节分析,这哥们儿就是getived state from props,几乎在你未来的开发之路上,你用不到它,但是我们得说一下啊,因为毕竟新提出来的一个东西是吧,嗯,来同学读,他说怎么的呢?他说在你count组件里的呀,这个生命周期钩子再往后读,定义在了,这啥意思啊,实力。
05:04
说说,按照你这么写,这个get derived state from props,那不就是给实例用的吗?然后呢,再往后读,它将会被忽略。你不能写成这个方法是给实例用的,说老师那得给谁用呢?你往后再读,请定义它作为一个静态方法,也就是说明你不应该把这个钩子给实例用,也就是说这钩子其实都不是实力点调用的喽,加上一个关键字叫static,所以说同学觉不觉得它很特殊,哎,那逼着你没办法把这static呢给它复制走下边为什么出这么多呢?是因为我刚才点了一下啊,复制这个static加在哪呢?加在这,你这么一写,这不就是静态方法了吗?好来保存,说老师这回呢,它应该行了,嗯,试试吧,回到页面,同学怎么样怎么样,是不是出来了,但是呢,还是差点意思,再往后读,他说什么呢?他说你can't点get dived state from props是不是?同学这是count'那个组件吧,或者咱究其本质,这是count那个类吧,你加。
06:14
Static是不是给类自身加了这个东西啊?他说类身上的get derived state from props应该返回一个状态对象或者是no啊,你看后边must be returned必须要返回,但是你却返回了一个undein。他这句话的意思是,哥们,你不是写了get derived state from props吗?你得给我返回值,你可以给我返回两种东西,你给我返回的第一种东西是状态对象,或者是你给我返回一个now也行,但是你现在返回under find就不行。那同学,我问你一下,啥叫状态对象啊?
07:00
哎,说老师,状态对象是这么回事儿,同学你说对于一个组件来讲,它的状态是不是得是一个对象啊,所谓的状态对象就是状态里边那东西啊,好了,说老师,那我们返回啥呢?那你返回一个状态对象,我们先试试啊,我返回一个闹,看看能怎么样,返回一个now啊同学,闹什么含义呢?就是我什么事也不做,我不影响任何的人,返回一个no啊,OK,回头来,乔同学首先观察这顺序啊,看它对不对,构造器先走的对吗?好,然后是不是就来到了这个get direct state from props,然后是render,然后是statement mount,对吧?哎,回头来到咱们新的生命周期图里边,同学你瞧嘛,顺序来够造气吧。Get direct it from pro吧,Render吧,Did amount吧,同学,顺序跟我现在看到的一不一样一样。那如果我就这样跟你讲,我说同学啊,讲完了,那你看我也给你验证了,对吧,这玩意儿它也输出了顺序,它也对介于构造器和软底之间,这不就得了吗。
08:06
同学,那你说这要是真这样的话,那讲了个寂寞是吧,那没说明白嘛,人为什么要叫这方法呀,什么叫做衍生的状态呀,是吧,什么叫派生的呀?或者说那为什么要设计它有什么用啊,啊,慢慢来,同学回到我们的代码当中,刚刚啊,你是不是返回了一个闹啊?同学好,我看看页面的功能有没有受影响啊,当前求和是不是零啊,来点我加一走是吧?哎,没问题,能加,你先别看这的输出啊,输出肯定是很多的,哎,能不能加,能卸载组件能不能卸载呢?也能那刷新一下,那不更改任何状态中的数据,我强制更新一下走是不是也可以,功能没受到影响,好,那接下来呢,回到代码当中,这回呢,我不返回闹了,人之前不说了吗?你返回两种东西都可以,一个是状态对象,一个是闹,那我就返回一个状态对象,状态对象,状态对象本质是不是也是一个对象啊?
09:05
那你知道为什么叫状态对象吗?因为你得和状态里的这些KY6能对得上,哎,你就比如说同学状态里的Y6是不是有一个COUNT0,那我也可以写一个呀,Count,但这回我不写零,我写108,这回呢,你瞧瞧啊,同学就有意思了,保存啊,我返回的是一个对象,对象里边是count 108就跟我这个对象的形式啊,跟我这个状态对象的形式长得很像。好了,回到页面中走,哎呀,同学,你发现了一个事情哟。求和不再是零了,而是108,老师那我改成109保存回来啊,老师明白了,好像啊,利用这个返回值能指定状态。哎,你目前这么理解好像也没什么问题是不啊,那咱看看这功能啊,它受不受到影响吧,来这是不是点我加一啊,如果没受到影响,你点加它应该变成110,你点。
10:07
嗯。同学你再点,你再点,我问一下它变一百一了吗?没有,也就是说你这儿一旦返回了一个状态对象,好像你这个状态目前观察啊,是不是就改不了了,嗯,那别的功能呢,试试卸载组件,哎,是可以的。啊,那不更改任何状态中的数据,我强制更一下呢,啊也行,那你看也掉render了,所以说同学你这一旦返回了一个状态对象,你就把谁影响了,你就把状态的更新给影响了,无论你这怎么点加号,它是不是也不更新了呀,好说老师那明白了,就是这只要返回一个对象,如果对象里边包含的这组key原来的初始状态里边也有,那么它就不以初始化的这个为主了,以这个为主,对,而且不仅以这个为主,以后你永远都改不了了,对。
11:04
说老师那存在有什么意义呢?但是到现在好像我还没有琢磨出来什么叫做派生啊,那这东西又跟pro有什么关系啊?目前我只发现这个返回值对状态有影响呀,那跟props又有什么关系呢?那我再告诉你一下同学,他能收到参数,收到的不是别的,正是props来我们输出的时候呢,我给你输出一下pros。好,注意观察啊,同学说,老师,那现在能输出什么呢?现在什么也输出不了,因为你没有给count组件传递任何的props,那不需你瞧我保存一下,回到这,同学有东西吗?没有空对象,一旦你要是给can't组件传递props了,来,比如说传一个name,等于叫做Tom,好了,保存代码,回到页面看效果,同学收没收到,收到了,哎,那你想一个问题,同学,如果我给count组件传递的不是名字Tom,而是count。
12:03
对,就是那个count值,我写了个199。同学呢,我想问你啊,你说这个props是不是就收到了199,是不是就会输出199呢?好的,那回头嗨,还真是199,那你觉不觉得这个对象和你那个状态对象基本上长得就是一样的呀?哎,那同学你说如果我在这儿不做这种事儿,我不自己亲自写,我直接pro,你说这是什么后果呀?那你看着吧,走是不是199,你点加是不是也没用啊,所以说同学这就能解释的通了,什么叫做得到一个派生的状态,从pro我问你,你接到的是什么呢。Pros,那你把S在这做了一个return,那pros就当什么用了,是不是当状态用了?所以说同学你得没得到一个状态,得到了从哪得到的pro,这状态不是你自己写的,是不是你从pros那得到的呀?不是你自己写的状态是从这儿得到的,那么就叫做派生的状态。
13:09
Hi OK。说老师们什么时候用这个东西呢?我们去官网看一眼,复制来到react的官网,在这搜索,一点一点找,太费事了,搜索。等着出来这个了吧,点来同学看看吧,他是不是也加了static这个关键字呀?同学看啊,他官方说的很明确,此方法适用于一个罕见的用例,如果呢,你时间够,自己可以去看一下这个罕见的用例,那当然了,同学他写的也比较复杂,所以说在这儿呢,我们暂且就不去,哎,深入的去研究这个用例啊,往后读同学我们把原则记住就可以了,记贝的值在任何时候都取决于pro。同学,你回到咱们刚才写的代码当中,你觉不觉得如果你把这段代码加上了,那么你的状态值在任何的时候都取决于pros,无论你的初始化还是你的修改,其实是都不起作用的,对吗?完全听pro的指挥。
14:15
啊,回到文档中,就是他所说的g state值在任何时候都取决于pro OK。说老师那就是我的状态,如果完全取决于pro的时候,我就用它呗,对啊,适用于一些极特殊的情况,因为有些时候确实也有这需求嘛,但是他又说了一下派生状态,对,就你写的这个东西会导致诶代码冗余,定时组件难以维护。哎呀,说老师那意思到底用还是不用呢?同学就一句话了解即可知道有这么一个东西能让你的state什么时候都取决于props就可以了,而且注意它的写法,其实还能接到第二个参数谁state。
15:03
来,回到我们的代码当中,我们试一下state啊,好,那在这呢,再输出这个state,别急,我给你做个测试,滑到上方,我自己初始化的state是不是COUNT0。他给你传到这儿了。哎,然后你是不是在下边渲染这个count的时候,传了一个值叫199,那是在这儿的,那最终你返回的是不是这个pro,所以说以那199为主,保存回到页面看效果怎么样。你写的初始化状态,哎,确实是零,那人这写的看看呢,是不是199啊啊,你可能说老师那这是数字,那这不是字符串嘛,那你当然可以改一下嘛,那在这咱又不是没学过,对不对,走100,诶调回来199走那你瞧嘛,是吧?哎,所以说你在这里边还可以进行一些判断,同学你比如说你传递过来的pros里边某一个属性的某一个值是多少,我再看看我初始化的状态里的某一个属性的,哎里边的值是多少,然后做一个对比,如果你是奇数,我就以谁为主,偶数就以谁为主,哎,所以说同学它就有这个作用。
16:18
好,那我们再说一下,为什么这个东西把更新也影响了呢?你看你点更新的时候说也影响了,也以这199为主,那是因为你看图说话,同学,因为这个人横跨挂载和更新,只要这个人在前边一拦着,你所有的状态都得听pro的好了,那视频呢,我们停一下。
我来说两句