React 的 Virtual DOM 比 DOM 快多少？

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，这可以大大减少浏览器为了绘制它而需要重新计算的次数。在前面的类比中，你想象你的冰箱在你买了一个柠檬后会是什么样子（没有柠檬的冰箱 vs 有柠檬的冰箱），找出最小的变化（添加柠檬）并执行它。

碰巧每次换冰箱就扔掉它有点贵。

请注意，虚拟 DOM 而非比通过 getElementById 简单地获取一个元素并对其进行更改要快。比较的是两种处理复杂子树变化的方式，而不是单个元素。

React 的 Virtual DOM 比 DOM 快多少？

How is React's Virtual DOM faster than DOM?

javascript

reactjs

virtual-dom