为啥 React 的性能优于使用 JQuery 的直接 DOM 操作？

Posted 2023-05-09

【中文标题】为啥 React 的性能优于使用 JQuery 的直接 DOM 操作？

【英文标题】：Why is the reason of React's better performance over direct DOM manipulation using JQuery?为什么 React 的性能优于使用 JQuery 的直接 DOM 操作？

【发布时间】：2019-03-04 10:28:46

【问题描述】：

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

A）通过使用 React.js ：

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

渲染()

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

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

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

B) 相同，但使用 JQuery：

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

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

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

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

【问题讨论】：

检查一次***.com/a/52555662/3555775

【参考方案1】：

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