深入理解React虚拟DOM

一、什么是虚拟DOM

虚拟DOM可以看做一棵模拟了DOM树的JavaScript对象树。比如：

 1 var element = {
 2     element: ‘ul‘, 3     props: {
 4         id:"ulist"
 5     }, 6     children: [
 7     { element: ‘li‘,props: { id:"first" },children: [‘这是第一个List元素‘] }, 8     { element: ‘li‘,props: { id:"second" },children: [‘这是第二个List元素‘] }
 9     ]
10 }

二、为什么使用虚拟DOM

在传统的 Web 应用中，我们往往会把数据的变化实时地更新到用户界面中，于是每次数据的微小变动都会引起 DOM 树的重新渲染。

虚拟DOM的目的是将所有操作累加起来，统计计算出所有的变化后，统一更新一次DOM。

三、虚拟DOM的原理

当Node节点的更新，虚拟DOM会比较两棵DOM树的区别，保证最小化的DOM操作，使得执行效率得到保证。

计算两棵树的常规算法是O(n^3)级别，所以需要优化深度遍历的算法。React diff算法的时间复杂度为O(n)。

React diff 算法