Question

我知道React会创建一个虚拟DOM并比较差异，然后才更新真实DOM的实际元素，但是如果我手动更改它，效率会更高吗？通过getElementById还是使用jQuery函数？

<!DOCTYPE html>
<html>
<body>

<form>
Select your favorite browser:
<select id="myList" onchange="myFunction()">
  <option></option>
  <option>Google Chrome</option>
  <option>Firefox</option>  
  <option>Internet Explorer</option>
  <option>Safari</option>
  <option>Opera</option>
</select>
<p>Your favorite browser is: <input type="text" id="demo" size="20"></p>
</form>

<script>
function myFunction() {
    var mylist = document.getElementById("myList");
    document.getElementById("demo").value = mylist.options[mylist.selectedIndex].text;
}
</script>

</body>
</html>

Answer 1

更改虚拟DOM与更改真实DOM不应有太大不同。问题出在余波中：真实DOM的更改触发了重新布局和重绘，因此我们触摸真实物体的次数越少越好。

进行模板渲染的一种方法是渲染模板，然后用新渲染的模板替换整个容器元素。这需要重新计算刚出现在容器中的所有内容以及受容器影响的所有内容。基本上，如果浏览器是您的厨房，并且您的模板是一台冰箱（以及您在五分钟内的冰箱图像，您的虚拟DOM），并且您购买了一个柠檬，那么典型的模板渲染将扔掉您的冰箱，加柠檬的冰箱会是什么样子，请购买您以前所有的食材以及柠檬，然后填充新冰箱。

React和其他类似框架所做的就是加快diff进程的过程，该过程查找最小的更改集以使真实DOM反映虚拟DOM，从而可以大大减少浏览器将进行的重新计算次数需要做才能画它。在上一个类比中，您想象买了柠檬（没有柠檬的冰箱与有柠檬的冰箱）之后，冰箱的样子，找出最小的变化（添加柠檬）并执行。

碰巧的是，每次更换冰箱时扔掉冰箱都很贵。

请注意，虚拟DOM并非比通过getElementById获取一个元素并进行更改来更快。比较是在两种处理复杂子树而不是单个元素的变化的方法之间进行的。

React的Virtual DOM如何比DOM快？

1 个答案: