jquery - 为什么 React 的性能优于使用 JQuery 的直接 DOM 操作？

Question

参考 React Virtual DOM 和 JQuery 直接 DOM 操作之间的比较，我对 DOM 操作有疑问。假设我们要更新一个 DOM 节点：

A）通过使用 React.js ：

1.React 创建 Virtual DOM (in-memory, 'javascript-made' representation of real DOM )，我们称之为 VD1

2. 使成为（）

3.React 创建一个新的 Virtual DOM 实例，我们称之为 VD2

4.React比较VD1和VD2，检测到它们在一个节点元素上不同

5.React 定位该位置并通过仅完整的“更改”位置“注入”更改，而无需从根到 DOM 树的顶部重建整个真实 DOM

B）相同但使用JQuery：

1.我们通过JQuery命令直接操作真实的DOM进行了更改

2. 浏览器检测到更改，因此它会遍历整个（真实）DOM 树并寻找更改的位置

   3.发现它应用更改并重建 DOM 以向用户呈现新版本的页面

如果我理解正确，这是放弃 JQuery 和直接 DOM 操作以支持虚拟 DOM 和更好的 React 性能的主要原因吗？

标签： jqueryreactjsperformancedom

Answer 1

React 使用虚拟 DOM，因此它以它想要的方式将所有内容存储在内存中，因此可以轻松搜索以获取所需的元素。它进行所需的修改，然后运行差异算法，因此它只需要更新绝对必要的内容。使用 jQuery，DOM 操作都是内联的，因此没有虚拟版本，必须解析实际 DOM，这比解析存储在虚拟 DOM 中的版本效率低得多。