为什么需要虚拟DOM
传统网页在进行更新的时候会有一个很棘手的问题，那就是需要用繁杂的DOMApi去操作DOM，很容易出现bug且难以维护，对于如何从这种繁杂的dom操作中脱离出来，react提出了一个新的思想，-始终整体刷新页面，当数据发生变化时，react会自动更新UI, 从而让我们只关心数据以及最后UI是什么样子。
这种方式虽然简单，但是有一个很明显的问题，慢。每次数据改变就重新渲染整个页面会做大量的“无用功”，而且无法保存节点状态，比如失去焦点，为了解决这个问题，react又提出了一个解决方案，就是虚拟DOM以及Diff算法。react根据原生DOM节点数创建了一个虚拟DOM，每次UI状态改变时生成新的虚拟DOM， 与原来的相比对，对于没有改变的节点，让其保持原样不动，只创建并替换发生改变的DOM节点。
虚拟DOM做了什么
完整的树形结构的Diff算法的时间复杂度为On的三次方，这个时间复杂度太高了，Facebook工程师经过优化，将复杂度降低到On(Diff算法的厉害之处在这里),至此，react更新UI的操作大致分为以下三步：
- 维护一个使用js对象表示的虚拟DOM，与真实DOM相对应。
- UI状态发生改变时，将新旧两个DOM做diff
- 更新发生变化的真实DOM
可以看出，最后还是要操作真实DOM的，所以仔细思考一下，其实虚拟DOM并不会比真实操作DOM效率高，反而会低。虚拟DOM是为了解决声明式编程以及数据驱动所带来的DOM操作的性能问题。Diff算法也是要消耗性能的，而我们传统直接操作DOM的方法是有的放矢，我们知道该更新哪个DOM，所以不需要比较过程，所以直接操作DOM的效率可能更高。
虚拟DOM比直接操作DOM快吗？
React的厉害之处不是说它比直接操作DOM快，而是在声明式编程的方式下，无论数据怎么变化，都能以最小的代价更新DOM。
像React和Vue之类的框架，其目的在于帮你掩盖底层的DOM操作，让你用声明式的方式来描述你的目的，只专注于数据的变化。没有任何框架可以比直接手动操作DOM快，框架更新DOM的操作必须要能够应对所有上层API的操作，其实现必须是普适的。
网友评论