16_尚硅谷_虚拟DOM和DOM diff算法.avi原创

呃，下面呢，我们来去通过一个例子来演示一下那个虚引动和动就算法它的一个作用。嗯。我们前面说过，这个虚拟动，它有起了一个什么作用啊，有了它以后。我们是可以更少的去操作什么真实度。就减少操作动物的次数吧，那这样的话，我更新界面的次数就变变少吧，啊还有一个这个算法。是用来干嘛的呢，它是用来去判断诶，哪片区域需要更新，哪片区域它不需要更新。这样是最终减小什么？更新的一个区域。这个怎么弄？啊OK，就最终的目标都是为了提高效率啊，让那个界面更快的更新。好，这里面有个例子，这个例子代码呢，不用写，我们要读懂就行啊。

好，那效果也不用去打开看了，因为这里面的代码已经有了。我们打开就行啊。啊，它是这样一个代码啊，就是里面呢是一个组件啊，我们来看一下这个代码的结构啊，这个代码很好的啊，这个hello word组件啊。它里面呢，这个组件里面有一个状态叫date，初始值是就是当前的时间吧，记得初始值就是当前时间。好，我重写了一下生命周期里面的方法。这个方法执行几次，一次是不是在我第一个阶段执行啊，就初始化显示执行在里面干嘛呢。启动了一个循环定时器。啊，你看这一次我们就没有用办了。我用的什么箭头函数？就经常就非常用啊。就是一旦你用回调函数，你选择用间的函数啊，99%都是比较好的选择。

好在这个里面干嘛呢。干嘛去，是不是更新状态啊，让那个date是不是指向最新的时间，说白了就是每隔一秒钟你的这个date。是不是就变了啊好。看下里面，我这里面有一个re的方法。扔到谁去了？有一个P标签，有一个hello，好，这里面有一个input。啊，接着呢，去显示当前的一个什么时间的一个字符串值，那这个值应该每隔一秒钟就会变化。能不能因为我的状态不断的在变嘛。不好意思啊。好，那最终呢，我去渲染这个hello word组件啊，我们想看的。大概能不在变吗？我们想看到不这个看来看着啊，这个东西确实也是在变，你打开你也能看得到啊。

打开它。往下翻。把它打开。它是不断在更新的啊，那从打印上来说，我的render是不是也在不断调用，这没有任何问题，好你来看啊，这这现在关键点来了，关键了AAAA。说明什么问题？这个地方再说一个事啊，你看我的这个输入框。动了吗？有没有动，没有动。只是是不是这一个右边的这一个文本动了。就这个音input的标签懂了吗？没有，因为他知道这个音input的不需要更新。Input不要更新了，那input更新的话，那不就输入数据就没了吗。

那么呢，它只是是不是更新了我所需要更新的区域是不是。能不能？这不是实现了一个最小化的一个更新区域吗？这个能懂吗？啊OK。这个例子就是用来去演示啊，在组件进行更新的时候，它并不是全部更新，而是需要更新的区域才更新，你不需要更新的区域是不是还是。跟跟你之前是一样的呀，没有动，说白了啊。好，那这里面还有一个图来演示这个组件的一个显示的过程。啊，我这里面主要强调两个过程，一个是初始化的过程，一个是什么呢？更新的过程，那死亡没什么太多好研究的啊，所以呢，我们来看一下啊，初始化的过程线。放大一。那首先第一个第一次初始化的过程，我把它分为了三步。

第一步。先干嘛呀，我们是不是要创建虚拟，有一个概念叫创建虚拟动数，它也是一个数的结构，因为你你想想看，你这个re的方法返回的是一个训动吧，它是不是有一个div div里面假设有一个P是吧，假设有一个失败，这不形成的是不是个树状结构，就是外面有个根嘛。他必须只有一个跟标签，跟标签里面有孩子，孩子里面是不是也有，又有可能有孩子啊，就有一个啊。虚拟动数啊，这个要知道啊，他们都是普通的GS对象。就不是真实的do，其实现在我搞出来这个div创建的对象是真实的div吗？不是。前面我跟大家比较过，真实的那个动物元素对象，是不是里面很多很多的属性呢，好几十个。不懂，而虚拟动物呢，也就这么几个。

那么呢，一个是重的，一个是什么轻的，还一个问题很重要，就我去更新虚拟洞。界面会重会吗？界面不会动，但是你要去更新那个真实动。这个界面肯定会变。也就是说，我们要想更新界面，最终的最终肯定要更新真实度。对不对，但是是直接去我们去操作了，还是框架去操作的问题，那么懂对来说，我们是不需要基本上不需要更新真实的们了，对不对，我们只需要更新什么虚拟的。那怎么样触发虚拟动更新，是不是去更新一些状态啊。这能不懂我们更新状态，去年多我们就会去重新产生嘛。啊，这个时候最终产生真实的什么呢？多数这初始化的时候，因为初始化的时候，我们那个真实多是不是也没有啊，只有一个空的那一个div。

因为最终我们不也产生了里面的结构吗？这个肯定是要产生的。接着最后挂到那个div里面进行什么。是不是显示。就显示出来这是初始化的时候。其实效率高不高，其实主要体现在什么呢？更新更新最关键，因为大部分的时候都是在做什么。更新的操作你想嘛，你界面一旦显示来以后，你是不是各种各样的操作呀，啊，你点这里操作操作这里操作令。啊，这个时候就能体现出来你的这个应用做的好与不好。啊，非常的关键。好。下面这个下面这个部分就是在说啊，更新的时候他是如何做到啊。最小化重绘的，其实右边的这个图也在说这个事情。好，我们前面说过一个事情，我们要想更新状态，是直接更新吗？譬如说我状态里面有一个有一个有一个一字秀，我是直接一字秀等于一个什么，值吗？不是那样更新没用。

懂不懂你只能去调用什么sad？为什么要这呢？里面是有原因的，其实里面是有原因的。我set state是不是指定了一个新的状态对象？以前本来是不是有个老的。啊，有一个老的状态，有一个新的状态，他们会进行什么呢。进行比较的。懂不懂？这就是为什么我不能直接去改变以前的状态。我要改变了，这就没法比较了。懂吗？啊，OK，我这是一个假设，这是一个以前的数据，这是一个新的数据。懂吗？啊，这是个指定新的，以前的数据还在不在。在，因为我根本就没动它，对不对，我是产生了一个新的数据。这个要知道啊，他们就可以进行什么呢对比。而数据的差异就会体现，为什么呢？虚拟多姆的差异，你看我加了一个数据，看到吗？相当于从这里看得出来，加了一个数据，那最终就产生了一个新的虚拟多姆。

能看到吧，啊OK，他们会。进行什么对比？啊，对比哎，发现它是有区别的，对不对，最终体现出来就真实多也多了一个。看懂吧，大概他就是表达这个意思。啊，OK set啊，Set state更新状态，重新创建新的什么虚拟多数，新旧两个数进行什么比较差异，这个时候就需要它的这个多么算法了吧，它那个算法啊，能非常高效的算出来哪部分有变化，是新增了呢，还是减少了，还是改变了。更新。啊，差异对应的真实度，最终我的界面是不是实现一个什么局部页面的橱柜。它只更新需要变化的部分。

这个虚拟DOM啊，存在的一个很大意义，就是我们经常会去操作虚拟动，在操作的过程中界面是不会动的，它后面是比较完了以后是不是要统一的一起去变。那不就批量更新吗？能不能啊，OK，这样相当于有一个缓冲，在我改变的过程中啊，它是不会变的，只有批量的去变，还有一个事情就是这个算法，这个diff算法，它能够去实现最小的一个重汇。这有两个方面能够提高你整个的效率，我们说不说效率高吗？那你要说明他是怎么做到效率高的，这个一定要说清楚啊，就是这个看似很简单的一个事情，但是你要说不清楚，那他就觉得你是不太懂了。啊OK，大家需要去自己也把这个图啊缩一缩。也就相当于你问你一个这样的问题，你最终你自己回答一下，看能不能回答的好一点啊。

代码是不需要大家去写的，大家主要通过演示的方式让他看到。确实。它是有用的。行。