1

全部：

我对 React.js 很陌生，听说过很多关于 React 虚拟 dom，但我有点想知道它和真实 DOM 在处理像改变元素样式这样的简单案例时的主要区别是什么：

假设我想改变一个 div 与其他人的距离，我可以使用 jQuery：

$("div#test").css("margin-left","10px");

我对浏览器如何处理真实 dom 的理解是：

  1. 向下搜索 DOM 树并找到该节点。
  2. 根据样式属性更新（我猜是 CSSOM 树）
  3. 渲染视图

所以我的问题是：

  1. 我的理解正确吗？
  2. 如果基本正确，那么虚拟 DOM 做了什么来提升性能呢？它不只是使用 diff 算法来比较其轻量级版本 DOM 树中需要更新的内容并发现 margin-left 需要更新，并将与 jquery 中相同的内容应用于真实 DOM 吗？

或者

  1. 如果不正确，谁能详细说明浏览器对真实 DOM 做了哪些繁重的工作，而 React 虚拟 DOM 跳过以提高性能？

我发现一篇文章提到了关于虚拟 DOM 的 3 个详细操作：

让它真正快速的原因是：

  1. 高效的差异算法。
  2. 批处理 DOM 读/写操作。
  3. 仅有效更新子树。

因此，与此相比，这是否意味着在真实的 DOM 中：

  1. 不是很有效的差异算法或没有差异算法（只更新所有内容）？
  2. 单个读/写操作，例如如果我对相同的 DOM 元素进行 3 次样式更新，浏览器会在 DOM 树中查找该元素 3 次并更新样式？
  3. 从根更新整个DOM（基本上就像转储当前树并重新构建整个DOM树，无论树的哪个部分需要更新，并找到节点并更新）

谢谢

4

1 回答 1

0

首先，您对“真实” DOM 操作的工作方式是正确的。

React 保留了“真实”DOM 的内存表示，我们称之为虚拟 DOM。无需遍历“真实” DOM 以供节点修改，此虚拟 DOM 可以轻松快速地访问，因此可以更快地提供更新。另外，想象一下 DOM 中有很多变化，遍历“真实”DOM 需要很长时间。这是虚拟 DOM 真正擅长的一种情况。

于 2016-08-18T23:41:44.913 回答