React virtualDOM和真正的DOM如何区别对待样式？

Question

所有

我是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上找到post提及3详细操作：

  

真正快速的是：

     

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

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

1. 不太有效的diff算法或没有diff算法（只是更新 一切）？
2. 单个读/写操作，如果我将3个样式更新到同一个DOM元素，浏览器将在DOM树中查找该元素3次并更新样式？
3. 从根目录更新整个DOM（基本上就像转储当前树并重新构建整个DOM树，无论树的哪个部分需要更新，并找到节点并更新）

由于

Answer 1

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

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