React-为什么要使用虚拟DOM

最新推荐文章于 2025-06-13 09:47:34 发布

原创

最新推荐文章于 2025-06-13 09:47:34 发布 · 6.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#React #虚拟DOM

本文介绍了React中虚拟DOM的概念，它用于保存真实DOM的状态，并通过diff算法高效地更新DOM。diff算法通过特定假设将复杂度降低到O(n)，包括节点替换、属性更新和列表节点处理。虚拟DOM的主要优势在于其计算速度优于DOM操作，减少了回流和重绘，且允许开发者控制更新时机，提高了应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是虚拟DOM（Virtual DOM）

首先，解释下虚拟DOM。虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一一对应。虚拟DOM的工作原理是：数据 -> 全新的虚拟DOM -> 与上一个状态的虚拟DOM进行diff算法比较，得到一个Patch -> 把这个Patch打到浏览器的DOM上。所以虚拟DOM叫的挺高端，其实就有点类似DocumentFragment，把多次DOM操作做一个批处理。于是，有一件很有意思的事情，如果你手动在DOM里删除一些节点，使得虚拟DOM与真实DOM不能一一对应了，再改变state重新render页面，页面就乱了。

diff算法

其次，想分享下diff算法。前两天看司徒正美推销他的Avalon，也分析了下React，说了一句话，现在前端框架比的是算法。diff算法说白了就是比较两个文件不同的算法。一般diff算法的复杂度是O(n3)。Facebook工程师根据前端页面特点做了两个假设（如果你好奇是什么假设这么神奇，可以来问我），把比较前后两个状态虚拟DOM的diff算法的复杂度降到了O(n)。这个diff算法分为三部分，我用三句话总结：
1. 虚拟DOM树同一位置不同类型（标签不同）的节点：删除前一状态节点，插入后一状态节点，哪怕节点有子节点也这样做；
2. 虚拟DOM树同一位置相同类型但个别属性不同的节点，对前一状态节点进行属性重设；
3. 列表节点（就是我们用循环创建的类似Array的节点），如果没有unique key（没有控制台会报警告的）就按照前面两种方式解决，如果有unique key就找到key相应的位置插入节点。
真的很简单，印证了一句话，简单的算法往往效率最高，好像我做推荐算法，单个算法不混合的话，依然是协同过滤效果最好。