00:00
啊。下一个我们来看。涉及到一个新的一个API叫。不过我们先来看一个问题,就是看component它存在的一个几个问题,这里面我总结了两个问题,我们来看一下。啊,第一个问题说的是。啊,这里有两个组件,一个是副组件,一个是子组件,那副组件调S它是不是会渲染了,那渲染的时候它。会不会去重新渲染这个子组件呢?因为子组件标签是不是在父组件里面了,它就会。啊,自动的去渲染这个组件,那站在子组件的角度看,就是如果副组件重新render,那我当前这个组件你就会重新执行什么等等。即使没有任何变化,什么意思?诶,这个后面即使没有任何变化很重要。
01:03
来看一下。我这里面呢,已经准备一点代码啊。就准备了一个A组件,它的状态呢,是M1等于一,能看到吧。啊,接着render的时候啊,去显示一个H1标签去读取一显示啊有一个按钮绑定了一个。点击的回调,再点击回调,你干了个什么事啊,将状态什么。是不是加一,那你说我一点一下,哎,这个时候还要去注意观察那个render的执行啊。首先初始肯定要执行是吧,我点一下是要执行一次。这个正常的对不对,这个应该吧,你要不同意怎么能显示呢,是不是没任何问题好。看好了。下面呢,我再创建个组件,为了简单体验,我就再复制一下改改。
02:01
啊,创建一个什么组件呢?B组件。可以吧,啊B键它的这个呢是MR。这个12可以吧,啊对吧,达好了,这个是哪个需要呢。B吧。这是B组件嘛,啊,那就是B,那这里面是M级啊,那不是它一是吗?它是二啊是B对不对啊测是二。好来啊,我们来说是这个B组件呢,我把它写在A组件里面,那我的B是不是就A的子组件。证明是吧,啊好来看一下界面先。这个是读他自己的状态显示的吧,啊好,这是读的AB的字显示的啊,读的B的,这里面写一下这个是M1等于多少是吧。
03:11
M1等于多少,这个呢,是M等于多少是吧。再看,看清楚一点,各是各的字啊,没问题,好看好了。我现在我去点a.a是不是更新A的状态,也就更新副组状态走你。毕业几?但是必变了吗?没变没有变,你看他状态变了吗?没有,他有接受新的属性吗?有你要说这样,你要说是把这个,你要是把这个M1给他传过去了。那你说更新这个B还说的过去,是不是是应该更新的吧,但是你现在根本就没传呢,是不是这就是个问题,B现在应该更新吗?不应该重新去扔的对不对?界面其实没变化,听懂不,界面其实最后也没变化,但是它是不是多掉了一次人。
04:11
因为结果肯定跟以前是一样,一模一样。因为状态变化,又没有接受新的属性,那当然是一模一样的是吧?这是一个问题吧。第一个问题。这是component啊的一个问题啊,第二个问题什么问题呢,这样的。看好了。我这么做。哎,这个不在这改B啊,别改A。嗯,改B。你说我这么做状态变了吗?变不变,没有变。说白了,你指定空对象跟以前的对象进行合并,那还不是一样的结果吗?
05:00
能听到不这个啊。我三岁的根本本质上最后状态没有变,是不是,那这个时候你来看一下。我显示M啊,是不是还有一啊,接着我点一下。要了没有?掉了,但实际上结果跟以前什么一模一样,说白了就是我他去调这个的,后来一比较,发现跟以前一模一样。但是是不是多掉一吨的呀。这能听懂不?这都是这两个问题,是我们component,只要你是继承component的组件,那就有问题。那我们要去解决component存在的这两个问题啊,要怎么做呢?这个地方首先要想找到解决办法,先说清楚原因对不对,先要把原因搞清楚。
06:01
原因是什么呢?这里面涉及到组件的一个生命周期函数。昨天是不是给那个把那个图给大家了啊来。现在我们需要去看一下react的生命周期图。在爱的生命周期图里面,哎。有一个非常重要的一个图。把它放大一点。有个非常重要的一个一个视频收集回答函数叫should component是吗?Update,它的返回值是个负值,看这个箭头是在说什么意思。一个是return to,一个是什么return for return to进入了什么真正的什么更新的流程?哪天饿死了又回去了。也就是说,如果它会重新调用更新的吗?
07:00
不会不会。那说明这个地方就要说一个事情,它的默认值是多少的问题。这个地方大家应该要知道了,它的moon值是主,就是should什么。Component update这个。啊,当然这个也可以去。来找一下。文档呗,是吧。是不是这个方法?有吧,来这个方法看一下它是不是接收这么两个参数。而且我要告诉他,他默认值就是true,我刚刚说看到这个结构图里面出什么意思,是不是继续更新的流程。
08:03
是不是进入re啊,返回处就代表你看到名字你就知道了他说的什么意思。说我的这个组件应该更新吗?那返回数那不就应该理解,那返回first呢。不应该更新默认值,Component中就是component,我们呢继成component组件。看Poland。总的默认值。为什么呢?尾数,尾数就代表什么。总是。跟琪那。对不对,也就是说怎么说呢。打开了,刚才我们说了吗?不组件重新扔的。会不会更新?会啊,父组件重新认,他去尝试,去更新子组件,这是他应该尽的责任。
09:00
这个说一下啊,我这是副组件,这是子组件,子组件是不是副组件内部。我父组件去重新认的,他就有责任去干嘛呢?去让我们的这个子组件进入更新的流程,但是你到底要不要更新,你自己来控制,我有责任通知你,说白了。这能听懂不?啊,父组件去更新的时候,去触发子组件的那个更新流程,这是是他的责任,大家看到这个图,这个是不是父组件去更新了。他是不是要进入这个流程呢?当然最终能不能更新,是不是由你自己来决定。我自己靠哪个方法决定的。不就是这个方法吗?秀的看是吗?啊不对。用来决定当前组件是否应该真正更新。
10:07
重新什么render对吗?这能听懂了吗?好。那这个防得住好吗?不好,也就是说无论是副组件重新了,还是当前组件,只要set大家知道你要调色的,不管状态有没有变,它是不是都会进入这样一个流程,你看。能听懂,不只是说,只是说要不要变,是不是用这个方法来判断。来控制吧。那到底要不要调人呢?你说我怎么去解决这个问题,把两这两个问题给避免掉啊。是不在这个地方,我们方法一就是重写这个方法吧。判断,如果数据发生了改变,反馈什么就否则什么。记住,否则或。
11:07
这能听懂不好看好了啊,我这一次做的那个点,我把那个M1。你给他传过来可以吧。我有可能我一个指子间是不可能接升他的属性的。这个可能是吧,可能那也就是说我的这个B是不是还可能接收F1这样一个属性啊,我就不去声明了啊,那我这一边我的这div这一边,嗯,这个B这边除了M2是不是还可能要显示M1。那我就来个M1 M1等于多少了?Z时间,时间。M1。这能不能听懂,不声明没关系啊,声明只是说声明好一点,能听到不,我们这一次就不管这么严格啊,因为咱们重心不在那上面。来看一下。
12:01
就这吧,是吧。那我现在点它现在B根基是应该的。能听懂不,现在必更新是应该的,这是明显应该吧,不然的话他怎么写差嘞。是不是,但是如果说看着。我不是这么做的。我是这么多。看到了吗?看到吧。我其实状态变了吗?没有,刚刚刚刚看到状态没变,我的这个主线是不是还不写在这里啊,写错了看一下啊。我写在把这个should。看,我不写在这里。我来控制二啊,我来控制二,别控制一了,大家注意观察啊,注意观察我现在副组件是不是set并没有去真正改数据,但是他肯定还是为什么。
13:02
重新我们说一旦认就会重新渲染B码,因为它子主页码。没什么,没问题,但是B要不要去分析呢?现在是不是也是更新了,你看吧。大家看实战数据没变都没变。是不是掉了?能看到吧,这因为是主键嘛,是吧,是component对不对,但是我希望B根基嘛,不希望不希望啊,而且我点击这个B啊,点击这个它是也掉了,但实际上我的状态变了吗。没有,这就说一个事情啊,如果我这个里面的数据没有发生变化。并且这个里面的数据也没有发生变化的话,那我需要更新吗?不需要吧,这个代表的是我接受的属性嘛。的对象对不对,这个里面包含的是什么,我自身的什么。
14:02
状态数据对不对。这个时候里面要做一个判断,判断什么呢?看好了啊。这个是如果返回处说明什么,就会去重新render对不对,否则结束。结束有同性论的吗?没有这个,这个生命周期就中断了,是不是好看好了,你们应该怎么做?很简单,比较。啊,比较什么呢。嗯,前后新旧的。这一个数据这一个中的和什么呢?这个啊,就pro中的。
15:00
这些个props中的啊和什么呢中的数据。如果没有一个变化的法,为什么?或否则了。数只要有一个变化呢,是不是就函数因为有一个变化,就说明你当前组件是不是要更新了。好,那这个时候就涉及到一个比较的问题啊,来先比较它里面的数据,我们知道它里面有个什么数据。有个MG。M1,因为我传过来是M1对不对,那我应该这么给你看好了,ifthis.prop.M一等不等于。Next最新的。点什么?M1,因为它已经是个pro了。这能看到这是相等,并且。
16:02
谁Z点点什么MR?它等不等于什么?那是的,State中的什么M啊,也最新的是吧?看它们是不是相等的,如果相等。开什么因为的吗。到家。把这个做掉。这边能听懂。可以吧,可以啊,那来吧,那我们现在就来去看一下,现在按来说就应该不会重新调用B了,试一下。我先连他。有吗?没有,为什么有?啊,很简单,我们可以在这个代码里面打印输出一下,是不是这能听懂吧,打印输出一下他。
17:08
能听到吧。打印输出一下这个的值都行啊,当然有什么用啊,你们返回就知道了来。太好了。走理是不答应他,但最后认得了吗?没有,因为他返回什么,因为数据没有变化。能听懂吧,好,再来一个。A,打印什么呀?A是不是重的,因A没有重写,重新重写那个的是不是,这个里面是不是调用了这个方法他什么。那这个时候有人吗?没有,但是如果我换一种方式来,我把这个。把这个打开怎么。会不会重新的会会来看一下走,你会吗?会因为有一个数据不同了,是不是。
18:06
这能听到吧。啊,这个地方要注意这个事情。但是得说一个事情啊,有一个小事情,我们的这个数据现在都基本类型。看得出来吧,那有可能不是基本类型,我告诉你有可能几个类型,比如说这个时候这个值吧,假设啊,假设它是个对象,对象里有个name能听懂吗?可以吧,可以啊,那更新的时候就不太一样了,那更新的时候就不一样来。哎,我这个地方把那个改稍微改一下。可以吧,可以,那我这个地方该怎么做呢。啊,正常的写法啊,正常的写法应该是我要去产生一个,产生一个对象对吧,对象里面有一个count值为几呢?就要在原本值上什么去加一。
19:05
能听到吧,那我这个怎么做state点一点什么看加上几加一。那如果我这么做,我的这一个M1是改变了,是变成了一个新的是吧。变成了一个新的对象吗?现在听到吧。能不能懂能懂啊,那M一传过来,传到这个里面来,那传过来之后呢,我的这一边拿到这个M1对不是这么写了,就是写M1里面的什么是不看显示一下。你写这个对象不行。你们看到。这个M1里面看了吗。是吧,好。大家看好了,诶这个地方还是那个。还是这个问题啊,还是这个问题看一下。我一点一点count看什么。
20:11
嗯,这是一个什么呀,对象不是合法的,作为一个作为一个什么呢,孩子。我看呀。我这个地方去取,我看再看一下这个啊,这里面这里面这里面这里面显示有问题,不能直接去显示对象,而是要把对象的数据给它展现出来显示啊,他得这么做。你要么调用对象图性方法也行。能看到吧,诶还有问题,我还有哪个地方有写。啊,这这这。不是MM1这一个吧,这个这个这个还有呢。
21:04
点什么count这个的船,这个船可以穿M1,这个是看错了啊,刚才船可以穿对象是不是我们前面属性有没有超过对象。有肯定有传过,速度有长过,对不对。是吧,但显示的时候可没显示过,直接显示过对象,是显示对象里面某一个一般的数据啊,传可以传对象,但是我显示的时候只能去显示对象里面某个属性。能看见吧。可以不可以,好了,这个地方出了一个事情。啊,说一个什么事情呢,嗯,我现在我现在去大家看呢,我去点它这个肯是会更新的。啊,有一个小事情,刚才写的位置吧,都不太对啊,应该是因为我现在现在我去有一个判断啊,有这个判断现在也会去做。嗯。看看啊,我的这个做法其实影响到的是下面这个。
22:02
这个没有关系,我们现在不是去诊断一下他啊,诊断一下它,我应该把它改成什么呢?搞到搞到这个里面来看啊。我要这么写了。我不这么写啊,这个写没问题,我要换一种写法。好,再换就行了。换成什么写法呢?这么写,我先把是this.state点M1等于啊点com等于一个。我把这个做掉。我把这个做掉,接着我这么做,你看对不对。啊,这个时候我来去写一下M1啊,接着来直接取出this.state点M1。嗯。
23:01
这个地方就要有一个事情啊,对于我们来说,我们的现在的这个这这个实际上它还是以前那个是吧,只是内部的值发生了什么,发生了改变。那对于看来说,它能识别不看一下啊,我们来看一下,看一下就知道啊,看一下才知道啊,来点一下它。你会发现A是不是重选染,因为A是一个什么呢?一般的control呢,只要调用S,它必然调用是不是。但是为什么?这个B没有重新渲染。那是不,这个地方就要说一个事情,改变的只是内部对象内部的数据吧,而对象本身的这个变量也变吗?没有一本身变了吗?没有没有,那是不是他发现了没有变他那你变了没有。变了,所以说你不要去这么做,听到了不。能懂不啊,当然你有可能有的时候有可能有人可能会这么写啊,大家看好了,可能先去把M1取出来。
24:07
啊,一样的啊,M1取出来,接着呢,把M1.count。一样的写法是一个意思,接着给改一下M1,这样就简洁,看起来舒服一点。问题是一样的。能听到不?这样是有问题的吧,有问题也就说你只是去改变状态对象内部的数据,而你这个状态这个变量本身没有改变是不行的吧。这能听到不?好,那这种方式其实就要说你不应该这么去更新,你要这么更新,那其实你有了should,那反倒成为了一个什么。反倒成为一个你不渲染的,应该要应该要渲染吧。因为我的数据发生了变化嘛,只是你这种更新的方式是不是有问题。
25:00
不应该这么去做啊,不应该这么做。好,这是这个需要去注意的地方,那还有一个事情啊,我们刚才的这种写法,其实是不是写的比较死,你说我这个写法能针对所有组件都行吗?我这个写法不能,因为我写的比较死,我知道我是前提是知道我的属性有个吧,我知道我是不是状态有个,我是不是有可能别的状态别的属性,那你怎办。是不是?那你是不是要去便利啊,要自己去比较是不是。啊,那这个东西就比较麻烦。啊,这个地方注意啊,我现在只是比较M2M1,这个M1它内部我比较了嘛。没有,这个东西叫什么比较,跟大家说一下,叫前比较。听懂了吧,叫钱比较,是不是就比较最外层,那对象里面数据比较吗?没有你就说对象里面变了,我知道吗?不知道我们不应该这么做,是不是好,那有人说老师我要这么写了,我该怎么怎么去写呢?我前面就这么写了,我该怎么做。
26:18
你可以这么写。啊,怎么写了?你要是换一种写法是可以的。各位,这可会,因为我又是重新创建个新的对象,我这个本身是变了。实现了一个新的对象。上面开始这种写法是错误的。直接直接me是不是这种写法有问题,能听懂不,这个不行,他这个了。可以,你来看一下,这样子可以当啊,一般能不这么做就不这么做啊,来我检查一下是不这些。
27:01
可以吧?这可以呀,是不是。是不是?能不听懂?啊。那当然最好的写法啊,最好最好的写法还是前面的这种啊去根据,因为我是基于他以前的改嘛,啊,这样去做是比较好的。那其实是这样一种这样一种当前的这种写法。最有问题的就是这种。年轻的吗?好,这是这个。
我来说两句