React Virtual DOM 理解

React Virtual DOM

一、概念

• 在react中，对于每个DOM对象都有一个相应的“虚拟DOM对象”，相当于DOM对象的轻量级副本
• 由于是Virtual DOM只是一个副本，具有与真实的DOM对象相同的属性，但是无法直接更改浏览器屏幕上内容的真实功能
• 当直接操作DOM时涉及到直接更改页面，所有操作DOM会比较慢，正因为操作Virtual DOM不会直接改变真实的DOM，所以操作Virtual DOM速度会更快。

二、原理

每个Virtual DOM都有两个DOM Tree，一个是新的，一个是原来的。当Virtual DOM更新后，React会将Virtual DOM与更新前获取的Virtual DOM进行比较（这个过程叫做“差异化”，是整个实现Virtual DOM更新的核心），但获取到了变化的Virtual DOM对象之后，React就可以直接在真实的DOM更新这些对象，并且只更新更改的对象。

三、实现过程

四、算法的理解与实现

• Virtual DOM本质上就是在JS和DOM之间做了一个缓存。JS只操作Virtual DOM，最后的时候把变更的内容写入到DOM
• Virtual DOM算法包括几个步骤：

1、用JavaScript对象结构表示DOM树的结构

• 记录节点的类型、属性和子节点，将其转化成具有相同属性（tagName=''、props={}、children=[]和key=''），并且对每个节点进行标记
• 对于Element创建一个原型链render()方法，用于渲染oldTree

2、比较两棵Virtual DOM的差异

• 记录差异类型
• 通过采用深度优先遍历来标识每一个节点，深度优先遍历本质是通过循环递归创建栈
• 当替换当前节点或子节点或文本，新增、删除子节点或文本以及对节点重新排序等，可以通过定义几种差异类型来对virtual DOM的差异进行判断

• 列表对比算法，当知道了新旧tree的顺序，这主要是要去解决字符串的最小编辑距离问题，一般采用动态规划来求解。

3、将差异的应用到真正的DOM树上

• 对真实DOM上的树进行深度优先遍历，在所有的差异列表中找出当前遍历的节点差异，然后根据不同进行操作。比如说，如果其差异类型是替换节点，可通过DOM节点的parentNode.replaceChild()的方法进行替换；如果是排序的话，通过动态规划的方法将其DOM上的元素进行排列；如果有子节点的话，将其设置与真实DOM上相同的属性，然后插入；如果是文本的话还需对浏览器做兼容处理，在IE浏览器上文本是放在node.nodeValue, 其他标准浏览器都是放在node.textContent

五、参考资料

理解 Virtual DOM
深度剖析：如何实现一个 Virtual DOM 算法
Virtual DOM实现代码