React 重温之 虚拟DOM

什么是虚拟DOM

虚拟DOM可以说是现代前端库的标配了，好像你一个前端框架不实现一个虚拟DOM出门都不好意思跟人打招呼，那么到底什么是虚拟DOM呢？

根据百度百科：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

那么与之相对应的，我们可以简单理解成虚拟DOM就是用其他语言模拟出一个DOM的树形结构

为什么要用虚拟DOM

那么问题来了，为什么要用其它语言模拟DOM，人家本来就已经是一个很完整的树形结构对象了啊？

这就涉及到前端一个性能问题，那就是DOM操作非常非常耗费性能，我们在很多前端优化的文章中都被告知要尽量减少、合并DOM操作，就是因为DOM非常非常耗费性能，因为太慢了。。。

为什么慢？ 因为干的事儿多啊，创建一个DOM的时候要继承一堆属性、方法，涉及到多个DOM节点的话还会有节点的嵌套啊，父子关系的维护之类的；同时，我们使用原生js API去操作DOM的时候，效率也是很低的，这也是为啥JQuery当年可以流行的原因（因为它做了许多优化。。。）

因为直接去操作真实的DOM效率很低，聪明的人决定用比较快的js去模拟实现一个DOM树，所有需要对DOM节点进行的操作，都可以现在虚拟DOM上进行创建、更新、销毁等一系列计算操作，最后得出一个更新后的虚拟DOM，然后再一次性的更新到真实DOM上，从而提高页面效率。

React 虚拟DOM diff算法

上面已经大概说了虚拟DOM是怎么回事，那么虚拟DOM最核心的就是diff算法，简单的说就是比对新旧DOM树来确定如何去更新真实DOM。

学术上有一些解决将一棵树转换为另一棵树的最小操作数算法问题的通用方案。然而，树中元素个数为n，最先进的算法 的时间复杂度为O(n3)算法链接 。

这是通用的算法，考虑的是所有情况，但React并不需要一个通用的算法，基于以下两个假设，React 实现了一个 O(n)算法：

• 不同类型的根节点对应不同的两棵树
• 开发者可以使用key属性来标识一个子节点是否需要更新。

基于以上两点，我们来详细说说React中的对比策略：

不同元素

如果更新前后是两种不同类型的DOM元素,那就没什么说的,直接销毁原来的节点,创建新的节点.(比如原来是div,更新为span)在这个过程中,原来节点的componentWillUnmount函数被触犯, 新节点的componentWillMount和componentDidMount依次被触发.

需要特别指出的是,当前更新节点的所有子节点都会被销毁重建,而不管子节点是否有更新. 简单的来说,就是根变了,那么这个根上的所有叶子都要更新了.

相同元素,不同属性

当节点类型没有发生变化,而只是熟悉变化的话,React就智能多了,只会更新变化的部分. 好比是一个元素有多个CSS样式,如果只变化了一个样式,那么React也只更新一个.

当元素不是叶子节点的时候,也就是一个组件元素的时候,会继续深入的去比较子元素来更新子元素.

子元素变动.

当子元素有变动的时候,React会更新子元素.

子元素的变动指的是节点的类型/属性/位置等的变动. 类型和属性的变动会触发更新,这个比较好理解.子元素的位置变动,指的是如果一个资源原来在第一位,更新后到第二位了,React会认为这是一种变动,从而触发更新.

key属性的重要作用

这样看起来React也没有那么智能.那么这个时候就要引入一个很重要的key属性.React通过给子组件一个key属性.来唯一标识一个子组件,如果更新前后的组件key值一样,并且除了位置之外其他属性没有变化,那么就不会触发更新.

One more thing

我们知道另一个经常被提起的前端框架Vue也实现了虚拟DOM，Vue是一个传统意义上的mvc模型.通过实例化一个vue对象来绑定dom和data的关系,也就是绑定view和model.通过对model中每个属性添加[反射]来完成监视器的注册. 当model中的数据模型变化时,watcher会重新计算,从而引发view层的更新.

Vue的更新.

上面提到,vue的更新是model中数据的变化引发在初始化时注入的watcher的变化,从而引起view层的更新.只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会一次推入到队列中。

根据以上特点,我们知道vue中的组件更新是由model数据的更新引起的,因为view和model在初始化时已经完成绑定,所以当model发生变化时,哪些view需要变化已经很明确了,所以就不需要像React那般去判断比对了.