React Virtual DOM 理解

React Virtual DOM

1、概念

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

2、原理

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

3、实现过程

4、算法的理解与实现

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

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

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

二、比较两棵Virtual DOM的差别

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

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

三、将差别的应用到真正的DOM树上

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

5、参考资料

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