00:00
好了各位,我们继续接下来呢,咱聊聊这个DOM的低平算法啊,分为两步啊,第一步我们验证一下这个算法到底存不存在,第二件事儿,我们研究明白了,就是你每一次去遍历数据的时候呀,你不是给了一个K吗?那个K到底有什么作用啊是吧?来,首先呢,咱们回忆一下,在开篇的时候呢,我跟大家聊过一个事儿啊,各位打开我们的PPT。说react最大的优势呢,就在于它不是每一次都把页面上的真实盗目给你做出修改,每一个真实盗墓都是对应着一个虚拟盗墓的,当你生成了一个新的虚拟盗墓,它会把新的虚拟盗墓数和旧的虚拟盗墓数进行一次比较,比较之后发现这两条数据没有任何的变化,那所以说呢,页面上这两个真实的道墓是没有任何改变的啊,那只把你新增加的这一条映射成一个新的真实倒目是不放上去啊。哎,那我们就验证一下它到底有没有这个低分算法呢?
01:13
关掉我们的PPT,然后回到我们的课件里边来啊,进入第一步验证盗墓的低平算法,那来同学我提前写好了一个例子啊,大家一起看一下,一点也不难啊,非常的简短。首先我定义了一个组件,名字叫啥呀?叫time,好了,这呢,我写了一个状态,状态里边维护着时间,对吧?啊,New,一个date啊,Nu出来的这么一个时间,然后在data mount里边啊,组建一挂载,我就开启了一个循环定时器,对吧?各位每隔一秒钟我都去更新一下状态,对不?哎,而且每一次都把最新的时间放进去对不?所以说每一次的时间,你每一次调这个时间是不是都是不一样的呀?好,那再往下看看render来造,里边写了一个div结构,哎,写了一个hello,写了一个input,写了一个SPA标签,说现在式啊。
02:13
读出来那个时间,然后two time string,对吧,变成一个我们能读懂的,哎,这么一串文字,要不你直接new date是吧,那出来的那是一个日期是吧?哎,得给它整理一下格式好,然后呢,就放到页面上了来,那你看到的效果呢,那就是邮件打开。好,各位发现啊,这个页面上啊,是不是有时间在不断的变化呀,你比如说52,五十三五十四对吧,那同学我跟你讲,现在这个低平算法就正在起作用。哎,它就正在起作用,怎么起作用的呢?同学,回到我们的代码当中,这是你写的固定的结构,对吧,你每一次啊,是不是都在更新时间呀,你每一次呢,哎,都是这些结构,所以说一遍一遍的调render,它就会形成第一个这种结构,也会形成第二个这种结构。
03:12
好,然后呢,同学你看这是一个节点对吧,这是一个节点对吧,那你注意这是一个节点对吗?但是为什么我把这个节点变成红色的了呢?那是因为啊。当你再过了一秒钟,我问一下各位,时间是不是就变成新的时间了呀?好,变成新的时间之后,是不是得重新调render啊,那重新调render是不是拿到一堆新的虚拟倒数啊,那就得跟之前的进行一个比较,这一比较不要紧,各位他发现。你这H1呀,还是之前的H1,你这input呀,还是之前的input,所以说这个对应的真实盗墓,这个对应的真实盗墓都在页面上没有变化,还直接放在页面上,那变的是哪里呢?
04:04
变的是这个死SPA标签,你要注意啊,同学变的不是说,哎,说老师只是这一块,因为这块在变,不它对比的最小力度呢,是标签。哎,也就是说它没那么的智能,说标签里边这仨文字是吧,这四个没变完,这块变不是,它是把整个死办标签呢,都一遍一遍的去更新,说老师什么叫最小力度呢?那跟大家开个玩笑话啊,同学说你去买房子啊,人说这房子多少钱一平啊啊说8万啊,你说你给我来两平,同学没人买房的对吧?啊所以说买房的最小力度呢,是套对吧?去超市买苹果呢,最小的力度是个对吗?那所以说同学它那个DOM的diff算法啊,就每一次比较的时候,最小的力度是什么呢?是标签,哎,是节点,好,那回到页面当中,同学所以说就你这个漏啊,就你这个input呀,其实都是属于直接在页面上放了一次以后啊,再就没有去重新放置,还是用之前的,怎么证明呢?非常简单,如果你在这个input里边,各位你看着我输入一个123。
05:16
如果这个input是每隔一秒钟都重新生成一个真实道往这里边放,那你输入的东西是不是肯定会丢啊,那你看一下123走。怎么样,同学,时间是不是在更新呀?哎,东西丢了吗?没有,所以说就强有力的证明了这些东西用的还是之前的真实道,你说对吧?哎,但是时间所在的那个节点呀,是不是在不断的更新啊,就这回事儿。那我问一下,现在是这三个字儿。是不是每一次都在更新,是的,哎,因为呢,回到代码,现在是这三个字,是不是属于SPA里边的节点呀。
06:00
啊,不是节点了,是死SPA里边的内容,你说对吧,死SPA标签都重新放了,你说这个呢,这个呢,是不是也得重新放啊,它是标签体的内容嘛,那我知道大家可能会有一个感觉,老师我明白了,我想这么测试一下,我在死SPA里边,诶我再给你来个input,那同学你想想这个input里的东西丢还是不丢吧。想想丢还是不丢吧。回到页面刷一下,这是不是有一个音谱的框啊,来写个123丢吗?不丢老师这解释不清了呀,你不是说整个死SPA都得重新放置吗?同学,你以为他的低拼算法只对比了一层的,它是对比很多层的,你有多少层它对比多少层,所以说同学人家没那么傻,是死SPA标签啊,确实得重新生成,但是死SPA标签里边是不是还有标签啊?那这个标签是不是还得跟之前的进行对比呀,那一对比发现是不是都是一个input呀?OK,所以说同学input有重新生成,重新放纸吗?没有,哎,所以说这块你一定要知道,同学标签里边套标签太常见了,那你以为那算法是个傻子吗?对吧?哎,就对比一层,不是的,它也得是逐层对比,而且注意最小的力度是什么呢?是标签,哎,好了,或者说是节点都可以,好,那我们就验证了一下同学这个低星算法它是不是真的存在呀?哎,好了啊,那你看如果不存在的话,那这些东西那我问一下,那不就得重新往页面上放吗?哎,那肯定不是这样做的是吧?好,那知道了这个算法存在,那我们再聊一聊就是啊,你在进行这个对比的时候啊,或者说自大家之前自己在编码的时候,这个K它有什么作用?
07:57
来同学,这个呢,就不能提前写好案例了,咱就得慢慢来了,其实这小节主要想给大家讲的是这个一个经典的面试题,面试官可能会问你在REACT5中。
08:11
你遍历的时候所指定的那个K呀,它有什么作用?K的内部原理是什么?哎,我们给大家说好了这么多是吧,先不用看这儿,来,咱先写一个小案例啊,特别特别的经典class啊,他这儿呢,我一写它就展开,那让它展开着吧,往下滚动一下class,呃,叫什么组件呢?叫组件啊,react.component,然后呢,走,Render得有了,嗯,走,然后里边呢,Return得返回一堆结构,那是这样的,我想变了一堆人啊,我想变了一堆人,那首先是不是得有自己的状态啊,好了,走着,State等于一堆人,那就是person思好,呃,ID,第一个人的ID,就让他是一名字写好。
09:07
叫做小张吧,好,小张,然后年龄18岁,再来三个人吧,小李啊,两个人够了,就两个人吧,小李写多了浪费时间啊小李好,ID为几呢?为二啊,年龄呢,19岁,好一堆人的信息,各位注意了,我是不是准备好了呀?好嘞,Return返回一堆结构啊,写一个u Li和Li的列表吧,也行,好,每一个Li呢,就是一个人,那所以说呢,这Li有几个,我是不是得便历啊,this.state点谁呢?Person丝点是不是map啊好,那你拿到的每一个同学是不是都是一个人的OBBJ啊,一个人的对象啊好,那走着吧,Ren返回,返回谁呢?Li?
10:04
啊,这Li里边啊,就展示这么两个消息,一个是人的名字啊,还有呢,就是人的什么呢?年龄好嘞,啊人的名字人的年龄对吧?好同学别忘了便利的时候是不是得用T呀。我们之前跟大家聊过,说呀,你可以临时用一下index,但是在某些情况下,这个index会引起一些严重的问题啊,那我们先先不管,我就喜欢用这个index,我先写着,好吧,来右键打开页面,咱瞧瞧效果啊,没有东西,那是因为没渲染组件是吧,折叠起来还差最后一步来走着react DOM render。Did啊,这组键标签别忘了闭合往哪放呢?我那容器啊,一直叫做T是吧?好了,右键这回再打开,关掉关掉,这是不是一堆人啊,同学啊,好,我现在想做这么一个东西,在这有一个按钮啊,就添加一个小王,好回到代码当中。
11:15
走在这儿写一个H标题吧,来准备一下啊,Div走之前的东西不破坏,还放在这里,在上边啊,写一个H2啊,就是展示人员哎,信息在下边来一按钮b to,这按钮叫什么呢?叫添加一个小王好。哎,写死的啊,就是添加一个小王,写上on click等于this.ad啊添加好走定义好这方法是吧,那怎么添加呀?首先第一步是不是获取原来有多少个人呢?第data拿到谁呢?Person思,那接下来怎么办呀,是不是得弄出来一个小王来呀,那走着呗,比如说叫做P等于他得有ID吧,那我问你ID。
12:11
ID是不是得自增长啊各位,小张一小李二,小王三,那小孙可能就是四,所以说呢,是不是这个数组的长度加一呀,哎,名字呢,咱们是写好的对吧?各位走啊,名字咱就直接写了,就叫做小王好了,年龄呢,也让他长一岁吧,是20,嗯,这是英文的逗号,好了,数据准备好了,接下来呢,是不是set state呀?哎,往里边放东西来放谁呢?首先啊,这一堆人肯定得放进去person丝,那么我这么写点儿点儿点儿person啥意思呀?爱把这原来的那一堆人呢放在这儿,然后把我新弄出来的这个人呢,注意了,放在前方,哎,我放在前方,好哎,就能添加一个小王了,我们试试这玩意儿好不好用。回到页面刷新一下展示人员信息,同学注意了啊,我添加一个小王来走,你是不是添进去了呀?
13:13
那大家可能觉得,哎呀老师,那你这功能就实现了呀,这挺好的呀,气不知啊同学在这里边你有一个非常严重的效率问题,非常严重,说老师页面效果展示是没问题的呀,那那我把控制台打开也没见到什么错误呀,是吧?那这东西咋回事,咱那个Bible用的不太标准对吧?说老师这没事啊同学你可要记着啊。很多的时候呢,啊,一些深层次的问题,不能说控制台没报错,它就是最好的,这个里边呢,同学有一些严重的效率问题。啊,什么效率问题呢?嗯,慢慢来往上看,我们读一读啊,它这个规则。首先呢,我给你讲解的是一道经典面试题,你要知道它有两种问法啊,各位第一种问法呢,他会问你说请你给我聊聊rear和view中那个key有什么作用啊,或者说它那个内部原理是什么呀。
14:13
或者还有一种问法就是哎,你给我聊一聊,在react和view当中,为什么我们便利列表的时候P最好不要用index,你能给我聊一聊吗?哎,这是哎两种问法是吧?好了,同学,来吧,我们读一读吧,放轻松啊各位规则非常之简单,读虚拟盗墓中K的作用。我们读一读啊,各位简单说。那先简单来一句,Key是虚拟盗墓对象的标识,在更新显示时,Key起着极其重要的作用。哎,那我跟各位说一下,你说面试官问你的时候,咱能这么聊吗?啊,面试官问你啊,说这个虚拟到那key有什么作用啊,你说我先简单的说吧,啊,Key就是标识,在更新时起着极其重要的作用,然后可能问了,啊,那什么作用呢?不知道,那不行对吧?所以说简单说呀,就是一个概括,咱们得会仔细的聊,来同学聊聊吧,详细的说,当状态中的数据发生变化时。
15:20
React会根据新数据生成新的虚拟do。同学,你千万不要陷入一个误区,说新的数据啊,就不会把新的虚拟盗墓都生成,同学会的,你只要给了人家新的数据,你放心,React会以最快的速度根据你的新数据产生一堆新的虚拟do,再读第二句,随后react进行新的虚拟盗墓与旧的虚拟盗墓的dif比较,有的时候呢,呃,我们说Di比较,有的时候呢,我们就简称就叫dif比较,这个dif其实就是different啊,不同那个词。
16:02
啊,也就是说同学新的数据生成新的虚拟盗,旧的数据生成旧的虚拟盗墓,最终呢,新的虚拟盗墓和旧的虚拟盗墓是不是得进行一个比较啊,哎,也就是同学来回到我的桌面,也就是我们开篇的时候说的这玩意儿谁呢?就是这一堆和这一堆的比较,一定要注意呀,各位对比的是什么呀?虚拟盗墓真实盗墓压根儿就不用对比,真实盗墓都跑页面上去了,你还对比啥呀,对吧?回到我们的代码当中。早规则如下,其实就两条来,咱读一读同学。第一条早。虚拟盗墓中找到了与新的虚拟盗墓相同的K。啥意思?就是旧的虚拟盗墓中如果找到了哎,跟新的虚拟盗墓相同的那个key,那怎么办呀?你先读同学先别想太多,先读嘛,旧的虚拟盗墓中找到了与新的虚拟盗墓相同的key,那咋的若?
17:07
虚拟盗墓内容没有改变。那啥意思,我有KV1的,然后你说哎,巧了,我这也有K1的,那然后咋办呀,那咱俩K是不是一致了呀。然后呢啊,那我就直接用你不行啊,咱俩key是一样,但是咱俩里的内容是不是可能不一样啊,那所以说你再往后读,若虚拟盗墓中的内容也没有变,也就是说咱俩的key是一样的,你就想象一下那种场景,同学,一个新的虚拟盗墓,一个旧的虚拟盗墓,对不对,你那有KVE的,我这也有,我这是这个内容,我这也是这个内容,那还说啥了。是不是直接使用真实盗墓就可以了呀?同学,你这儿呢,先读着,一会儿我给你来一个慢动作回放,让你看的明明白白的,现在咱先读一下这规则,这规则不读,接下来图我都没法画,你说是吧,各位走,那么还有一种情况。
18:02
我这有KV1的,哎,你说你那也有,那咱俩对比一下内容吧,完了不行。咱俩的内容不一样,那怎么办呀?那咱俩不一样,我就不能复用你了呀,那我就只能根据我自己这个生成一个真实的盗目,然后替换掉页面之前的真实盗,对不对,对吧,那没办法了嘛,没办法复用了吗?好了,还有一种情况就是旧的虚拟盗墓中没有找到,未找到,那就是没有找到与新的虚拟盗墓相同的T啥意思?哎呀,我是新来的虚拟盗墓,我有一个KV1的节点,你那儿有没有啊?他说你容我找一找,我这KV1的你没有。那就完了。同学,如果有,我还能进一步的对比一下内容,你说对吧?但如果你连P都对不上,那怎么办?没办法了。根据数据是不是创建新的真实道,随后是不是放到页面上去渲染啊,好同学,不适合再往下读了,咱就读到这儿,咱就读到这儿,好,折叠起来,我给你来一个慢动作回放,慢动作回放同学慢慢捋,刚才我用什么作为key。
19:11
我用什么作为key,是不是索引值?好,那接下来呢,我们就去写一个逻辑,叫做慢动作回放啊,走好,在这个位置呢,写个注释。来慢动作回放,回放的是什么呢?使用index索引值,索引值做好走,首先呢就得有数据对吧,数据长什么样,各位。数据是不是长这样啊,同学,我就把这一堆拿出来就得了啊,我就不把这些都写着了,你看它也不清晰啊,好复制数据啊。
20:06
长这模样。请问初次挂载的时候,我是不是得根据数据生成初始的虚拟对吧?走虚拟盗墓长什么样?同学,这些咱就不考虑了,因为都是不变的东西,是不是长这样?对吧。这不是变化的东西吗?好复制。划到上方几条数据啊,两条,那几条虚拟到没呀,两个。来。T等于什么?K等于什么index啊?那别写index呀,便利的时候来走,先变利的K是不是零,后变利的K是不是一好来走?
21:01
是不是拿名字呀,直接写嘛,第一个谁小张复制。年龄对吧,删掉。多大呀,19那这块同理,删掉。这是什么呀,小李。好年龄拿过来。19这呢,写好了是18是吧,好。来这儿划括号删掉,请问。这是不是数据,哎,是不是生成了初始的虚拟盗墓?哎,对,好,这是初始数据,咱也写上,那就对应着初始虚拟do,这是第一次,这些东西是不是得转成真实do挂到页面呀,OK,好,来走。那你说后期是不是得更新数据啊,那所以说写上这叫做什么呢?更新后的数据,那请你告诉我更新数,更新后的数据长什么样啊。
22:06
好像在它们的前方。多了一个人,ID为己。注意了,注意了,小王的ID为几,是不是数组的长度加一,哎,所以说各位小王的ID应该为三才对是吗?啊,然后这是谁呢?小王好多大呢,20岁对吧,我在这写死的好。那是不是就得有一个更新后的虚拟do呀,来走更新数据后的虚拟do。缩进一下啊,你说长什么样呢?孩儿这一堆拿过来是吧,都是一样的,但是注意了,在前方是不是得来一个小王呀,王年龄是不是20啊,注意了,请问P。
23:05
小王是不是放在了前方?那我想问各位的是,小王啊,是不是先变力的T是不是为零?小张是不是一,小李是不是二?OK同学,然后怎么做呀?啊,老师我知道了,然后呢,就是这一堆虚拟do全都转成真实do,全都放到页面,同学你忽略了一个环节呀,是不是旧的虚拟倒墓数和新的虚拟盗墓数要形成一个对比呀,好,那对比规则呢。老师忘了忘了再读来规则一。取旧的虚拟盗墓中找找谁,找新的虚拟盗墓,相同的key有没有?那所以说来找同学新的虚拟盗墓,先看第一条。K是等于零,上哪找去,上哪儿找去上旧的虚拟盗墓中找,说兄弟,你有没有KV0的?他说我有,然后呢?
24:05
然后呢,各位。是不是进而对比内容啊,结果一对比内容发现完了。你这是不是小王20?人呢,是不是小张18呀?完了是不是对不上了呀?同学,我想问一下对不上的后果是什么呢?说老师忘了,忘了再找来对不上的后果怎么办?你对不上了,你看就是内容变了呗。变了咋办?变了我就用不了你了呀,我就得生成新的真实盗墓,你说对吗?随后怎么办呀,替换掉页面中之前的真实盗墓,那所以说呀,同学你觉不觉得是这么一个场景?这是旧的虚拟do,这是新的虚拟do,好,来再分析。他说了,我这有一个KV0的,你那有没有啊,他说有啊。哎,这事太好了,那我再对一下,我这小王20你那儿呢,完了,我这小张18,所以说同学我问一下。这条虚拟盗墓。
25:00
能不能利用这里边K为零呢?能不能,不能,那咋办?把这条虚拟盗墓是不是转成真实do true do是不是挂载到页面?好,再往下对比,你这是不是有一个KV1的。然后他说哎,我这也有结果一对比,你是小张18,人是小李19,完了同样是不是转成真实道是不是放到页面好再走,你这是不是有一个K等于二,然后你问人家,你说你那儿啊,有没有一个K等于二的呀?人家说我这可没这玩意儿,没办法了,人家压根就没有跟你这个key相同的,所以说呢,来吧,转成真实道,然后呢放到页面。同学,我想问一下,其实明明小张18,小李19,明明这俩人是不是可以复用,但是由于你的错误,你使用了索引值作为key。
26:00
你使用了index作为key?而且小王还是往前边放的。你有没有觉得同学你把顺序给打乱了?你之前用索引值,那个索引值的顺序被打乱了,你觉没觉得?明明两个虚拟盗墓可以进行复用,页面上不用进行三次真实盗墓的更新,但是由于你用了索引值作为key,而且索引值它还变了,你觉没觉得你无缘无故导致了没有必要的真实盗墓更新,对吗?各位?好,所以说这是一个问题。啊说老师,但是这问题也不严重啊,那你想一下同学,如果你页面上有2000条数据。你用index作为索引值,你在前方加了一条,在前方啊,我没说在后方,在前方加了一条。你觉没觉得明明页面上重新绘制一个真实盗墓的代价呢?是一条?
27:02
但是因为你的错误操作。你用index作为key,你还往前加数据,你觉没觉得你无缘无故就导致了页面真实盗墓,发生了多少次变化2001次,所以说这是一个严重的效率问题,所以说这问题怎么解决呢?同学,简单,我们不用index作为索引值,我们用每一条数据的唯一标识做索引值就可以了,谁呢?就是这个ID。好,各位。我在这儿啊,就在这个位置,我做一个分隔线HR。写两条啊。把这一堆复制。好回车。你这是不是说展示人员信息呀,好,那我这样写,前面写个H3。
28:07
三叫什么呢?使用index索引值。作为K。把这句话复制来到这个的前方,叫做使用ID。同学,Index也叫索引值对不对?所以说写个括号,那我这要使ID就得咋说呢,是不是数据的唯一标识啊?I使用ID作为K。那我就得说到做到,不能用index,用每一个人的啥呢ID。好,我们再看看效果,右键打开。是吧?这是不是用index索引值作为key,这是不是ID用数据的唯一标识作为K呀,来添加一个小王,你可能说老师这也有小王,这儿也有小王,是效果都是一样的,那我告诉你各位,这个的效率要比上边的高得多,为什么呢?那你一分析你就能出结果了。
29:18
滑到上方这一堆重新来,我依然叫慢动作回放,但是这回这个慢动作回放呢,来我做个分割啊。好,但是这回慢动作回放的不是别人,是使用ID呀,这个唯一标识啊,唯一标识A使用ID,这个唯一标识作为什么呢?哎,作为这个K,那这个作为呢,给他换一下错别字啊作为好来往下。说老师那就来吧,行啊,初始数据是不是在这儿。初始的虚拟盗呢?注意了,Key不是索引值的,小张的key是小张的ID,小李的key是小李的ID,来走更新后的数据是不是长这样啊?来,那你告诉我小王的ID是三,小张的是一,小李的是二。来同学,这是旧的虚拟盗墓对不?嗯,这是新的虚拟盗墓对不好来对比。
30:22
开始问了。K等于三哈啊,问旧的虚拟盗墓,你那有K等于三的吗?他说别找我了,我这没有,那没办法了,只能是这条虚拟墓转成真实盗墓,进而放在页面。进入第二条。问,你那有K等于一的吗?有,我这小张18,我也是,我这也是,那怎么办呀同学,这条数据根本就不再生成新的真实盗了,也不再往页面上摆了,那这我就写一个字叫复用的,复啥意思啊各位。
31:02
你原来这条数据是不是已经在页面上生生成那个真实do了呀,那在这怎么办呀,别再生成了,直接复用,那同理你觉不觉得啊,各位小李是不是也可以进行复用啊,那所以说同学我添加了一个人,那其实呢,我只引起了页面一次真实盗墓的更新,你说对吧?所以说呀,各位哪个效率高一点呢?用ID作为key高。啊,用索引值作为key呢,可能会引发一些问题,但是事情并没有到此结束,我就讲到这儿,各位可能会反驳我一句,老师,他爱高就高,他爱不高就不高,效率的高低跟我没关系,我就负责把功能怼出来,这底层的东西我也不想了解是吧?那也行,同学,接下来我再给你提一个需求,你发现你就不得不了解这套规则。啥需求呢,看着。
32:00
来,各位听我说啊,这是Li对吧?好,Li里边你听我说,Li的里边每一个人都有一个input框。好,写上。这是用index作为的输入框,这是用ID作为K的输入框,对吧?哎,同学你看这不两套吗?输入框输入框我是不是都加上了呀,各位好。调整一下保存。右键打开页面,说老师这能咋的呢?那你看看这能咋的吧,就是如果说刚才我讲的那么多东西,你都想说老师我不想了解爱啥啥效率高低跟我没关系,功能我怼出来了爱啥啥是吧,好,那接下来呢,那你看你还能不能这么说了啊,小张后边输入小张的信息,小李后边输入小李的信息,小张小张小李小李。注意了啊,各位注意了。我添加一个小王,首先观察你用index作为key发生了什么严重的问题啊。
33:07
同学觉没觉得数据串了?小张18是这儿的,小李19是这儿的。这个20这个小王是不是应该是这儿的呀,你整体的数据都是错乱的,但是你看看如果你用ID作为K啊,各位感受一下,小王新添加的没输入内容呢?小张18,小张18小李19小李19。同学,我想问一下,页面里边一旦出现了输入类的节点,你还能说这套规则跟你没关系吗?你还能说我随便的用index就行吗?说老师那这咋回事呢?非常简单,咱再分析一遍各位,回到代码当中,我其实无非就是多加了一个输入的节点,对吧?来,我们先分析,用index索引值作为K。
34:01
这是初始数据对吗?对,这是初始的虚拟盗墓,但是这里边儿是不是得加个input框对吧?各位好,更新后的数据是不是这样啊,来input框input框input框。那么对比的时候就出现问题了,来,各位这是不是旧的虚拟盗呀,嗯,这时候新的虚拟盗呀,嗯,是不是得做对比啊,好了,你瞧着。拿到新的虚拟盗墓里的第一行,去这儿问去,去这儿问,去问什么?旧的虚拟盗墓,你好。你那边有没有一个K等于零的那个节点,他说有,我这有一个K等于零的。他说那太棒了,我们再对比一下,我们里边的内容一不一样呢。然后他说我这是小王20,他说完了完了完了完了,我这是小张18。然后呢,你别忘了各位里边是不是还有节点啊,有节点我想问各位是不是得继续对比啊,咱咋说的那个东西是不是得一层一层找啊是吧,是一个递归的查找,一直会找下去的,对不对,好来同学。
35:10
这是不是有个音input的框啊,嗯,他说我这里边儿还有音input的框呢,咱俩再对比一下呗,小张18小王20,咱是用不上了,那咱再对比对比这个呗,好,你对比下来,你对比。新的虚拟弹幕说。我这有一个input框。然后他说呀,哎,我这也有个input框,说那看看咱俩的属性一不一样吧,我这是type等于test,他说诶,你看巧不巧,我这也是。他说,既然呀,咱俩这个节点是一样的,那就这样吧。我就把我原来这个虚拟盗墓所对应的真实盗墓呀,我就给你用了,但是同学万万没想到啊。这个input框所对应的虚拟里边。啊,那个转为的那个真实盗墓里边。是不是残留着小张的信息的呀,啊各位。
36:04
虚拟do音的框都长一个模样,里边都写的是等于text,但是我想问各位的是,这虚拟早晚也得放到页面变成真实吧。但是万万没想到啊,同学,真实盗目是不是有点value值啊?真实盗墓是不是用户能往里输入东西啊?哎呦喂,不要紧,你这里边是不是残留着小张的信息呢?一个错乱,小张的信息直接展示到小王的后边了,那么以此类推,同学,小李的信息是不是就展示到了小张的后面?那你再往后进行这一次对比的时候不好意思了。他说我的TV2。他说哎呀,那我这没有KB2的。那你自己去吧,你转成真实盗墓往页面上放吧,一转小李19出来了,那这个呢?那就只能对应一个空空的,一个干干净净的音input的框了,那所以说回到页面走,小李后边为啥是空的就解释明白了,那回头同学们,咱们再分析另外一个问题,就是说如果你拿ID作为key,这个问题就完美的避免了,走走走走,这是谁呀?旧的虚拟do这谁呀?新的虚拟do?那我想问各位的是,是不是得进行对比啊?好了,来,走起第一波对比来。
37:20
旧的新的第一个跟他对比来走,说旧的虚拟盗墓你好,你那儿有一个KV3的吗?那旧的虚拟弹幕说不好意思了,兄弟,这个靠你自己了,我这儿没有K3的,我这儿没有曾经渲染好的真实盗给你用,你不能复用了,所以说小王20新的input框新的,所以说小王没问题,再往下走咋的K是不是等于一呀?啊,然后就开始对比了,旧的虚拟盗吗?你好,你那有一个KV1的吗?他说有,那咱俩再对比一下内容呗,啊,我这是小张18,哎,我这也是,我这有个input框,我这也有,OK,这节点是不是都复用了呀?所以说同学之前小张的那个input框啊,其实还给谁用啊,嗯,还是给谁用啊,是不是给小张啊,所以说有问题吗?没问题,那同理小李的是不是也没问题啊阿同学你一定要记住一个事儿,就是只有真实盗墓摆在了页面上,用户才能往里面输入东西,你说对吧?那虚拟盗墓是个啥呀?虚拟盗墓身上的属性太少了,都没超过20个,你说对呗?啊,虚拟盗墓我问一下。
38:30
有Y6值吗?没有,是不是只有真实道才有Y6值啊,你只有把这个东西是不是放在了页面上,用户输入东西了。是不是才有点Y流值啊,哎,这个问题你得想好对吧,只有放在页面上了它才有,诶这个点Y流值才能留下用户的输入,你说对不对,所以说同学综上所述,那你觉得以后我们用谁更好呢?就是ID滑到上方总结一波就完事了,走。
39:05
这个规则大家都知道了吧,哎,其实啊,同学那个key啊,就是在那些虚拟盗墓的脑门上编个号,等以后我这边再出来的时候,我问问你,你那边曾经渲没渲染过,渲染过那我就直接用了,就这么回事好了,所以说来走着吧,同学用index作为key可能会引发的问题,你注意了,各位,我说的是可能,为啥为啥是可能?其实刚才反应快的同学在听视频的时候一定会反应出来,老师你套路我,你这不是把添加的小王往前摆吗?老师,你这不是故意在玩我吗?我这边用index作为key呢,你那边好家伙,一个东西往前边一添加,那索引值都给我破坏了,那就别怪我这会儿错乱,那同学我问各位一下,我如果添加那小王,我是往后边添加的,来吧各位,咱用事实说话,你说还有这问题吗?我给你讲一点这个问题都没有了,对吧?同学来复制,走小李,走同学,添个小王你看。
40:14
你看对吧,哎,回到代码当中啊,所以说同学你如果,哎,撤回你如果。用索引值作为K,咱只能说可能会引发问题,你说对不对,可能呢啊,那什么时候可能呢读。你是不是以索引值作为K了?好,那么接下来你但凡对数据有这种操作。逆序添加、逆序删除等等这些破坏顺序性操作。那么就会造成什么呢?没有必要的,真实盗墓更新界面的效果吧,它没啥问题,就是效率低,你说对吧,各位。
41:01
哎,所以说嘛,同学你只有进行了破坏顺序性操作,哎,人家怎么办才会出问题,效率才会低,是不是好,再读第二句。如果你的结构中还包含着输入类的盗,那您就小心着点儿吧,如果你进行了破坏顺序性操作,而且你用了I,呃,那个index索引值作为key,而且页面上还有输入类的道,各位,那就不是效率的问步问题了啊,那就不是效率这事儿了,是你直接就产生了错误的盗墓更新。不是效率高低的问题,是页面显示是不是都有问题啊。同学就说句不好听的,那玩意儿效率低能咋的,我的东西出来了对吧,谁知道高低是吧,你就可能看慢一会儿,那能怎么的,但是同学见面有问题,这事儿你说不过去吧?哎,所以说同学,如果你结构中还有包含输入类的道目,悠着点吧,你用index可能会引发严重的问题,所以说第三个来注意,如果呀,你不存在对数据的逆序添加,逆序删除这种破坏顺序性操作,那其实呢,你仅用于列表的渲染展示,我问各位用index有没有问题?
42:21
没有问题,索以说,同学一定得聊明白这事儿,用索引值作为key可能会引发问题,引发啥问题?如果你对数据进行了逆序添加、逆序删除等等这些破坏顺序性操作,那怎么着?界面显示没问题,但是咋的?小李,如果页面上还有输入类的同学,我可没光说input框啊,你的check box。对吧,你的radio选择器啊,这些都属于输入类的道,包括你的select框啊,只要你的页面上出入输入类的道,那就是页面显示,它都是废掉的。
43:01
嗯,好了,读最后一个总结,同学开发中我们如何选择T呢?我们的原则就是如果每条数据都有自己的唯一标识,比如说手机号啊,ID啊,身份证号啊,学号啊,那您最好用这个唯一标识作为key,如果说你很确定啊,你非常确定。你的这个东西呢,就是简单展示一个列表以后,不涉及到对数据的增删改查,也不涉及到逆序的或者破坏顺序性的操作,那么其实用index怎么着呀,也是可以的,同学啊,我就这样跟你讲吧,如果有ID为啥不用ID,如果有手机号,身份证号,学号为啥不用呢?所以说一个原则,同学,只要有这些东西,我们必须就得用。你可能会说了,老师啊。那有这么一个情况啊,他确实给我返回了一堆数据。但是啊,没有唯一标识。
44:00
比如说举个例子,老师,我要做一个学生管理系统。他给我返回了一堆的学生。对吧,但是他却没有给我返回学生的唯一标识,学号也没给我返回,就给我一堆学生,小张小李小王,然后呢,我也后期也得做这个增删改查,那怎么办呀,及时找后端人员进行沟通,说兄弟你这样做会有问题呀,你都没有把数据的唯一标识给我呀,是吧?同学你放心,但凡是个合格点的后端不会给你一堆数据,这些数据要做增删改查,连个ID都不给你,同学我就问你一个问题啊,咱往上滑动啊,在这儿找这找到咱们的数据,同学我问你如果不给你ID啊,就假设说ID不给你好了,小张18,小李19,哎,我问一下再出来一个小李19咋办?重名啊,也叫小李,年龄咋的同岁呀,也叫19,那我问一下你前端做增删改查的时候,同学,我就问一个事儿,是不是得根据ID进行删除啊,根据I进行修改吧,你不能说拿着名字吧,我想把这小李的年龄改成20岁,结果你一改好,数据库里所有的小九啊,那个小李啊,小九数据库里所有的小李是不是都改成了20啊,你觉得这事合适吗?
45:16
不合适,所以说同学数据的唯一标识就应该是后端为咱们提供好的行了吧,诶我们就把这个DOM的diff算法呢,就说了一下,同时跟大家深入的说了一下这个key的工作原理,一句话,以后有唯一标识就用唯一标识这小节我们停一下。
我来说两句