React 的 Virtual DOM 如何比 DOM 快？答案

【问题标题】：How is React's Virtual DOM faster than DOM?React 的 Virtual DOM 如何比 DOM 快？
【发布时间】：2018-12-28 08:13:20
【问题描述】：

我知道 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>

【问题讨论】：

你的代码和你的问题有什么关系？
看看reactjs.org/docs/reconciliation.html

标签： javascript reactjs virtual-dom

【解决方案1】：

更改虚拟 DOM 与更改真实 DOM 应该没有太大区别。问题在于后果：真实 DOM 的变化会触发重新布局和重新绘制，所以我们接触真实的东西越少越好。

进行模板渲染的一种方法是渲染模板，然后用新渲染的模板替换整个容器元素。这需要重新计算容器中刚刚出现的所有内容，以及受其影响的所有内容。基本上，如果浏览器是你的厨房，你的模板容器是一个冰箱（你的冰箱图像在五分钟后就会变成你的虚拟 DOM），并且你买了一个柠檬，典型的模板渲染会扔掉你的冰箱，想象一下加柠檬的冰箱会是什么样子，买你以前的所有原料和一个柠檬，然后装满新冰箱。

React 和其他类似框架加速这一过程的是 diff 过程，它找到最小的更改集以使真实 DOM 反映虚拟 DOM，这可以大大减少浏览器重新计算的次数需要做才能画它。在前面的类比中，你想象一下你买了一个柠檬后你的冰箱会是什么样子（没有柠檬的冰箱与有柠檬的冰箱），找出最小的变化（添加柠檬）并执行它。

碰巧每次更换冰箱时都扔掉它有点贵。

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

【讨论】：

我想我不明白The comparison is between two ways of dealing with changes in complex subtrees, not single elements.。因此混乱。你能举一个复杂子树的例子吗？
如果我执行document.getElementById("myList"); 然后在这种情况下更新它，浏览器上也会发生“重新布局和重绘”，如果是 React，它也会更新相同的组件在这种情况下，该组件的“重新布局和重新绘制”也会发生。那么反应如何有效呢？ @Amadan
再一次，与手动更改一个元素相比，它效率不高。与手动更改一个元素相比，更改一个元素的组件更多工作。它可以有效地改变一个小部分发生变化的复杂结构：例如列出 100 个项目的组件，其中一项已更改（天真的模板，例如 container.innerHTML = newHTML，更改所有 100 个项目，差异算法仅更改那一项）。
哦，所以您的意思是，如果对于 100 个项目的列表，我要么 a) 必须手动知道哪个项目已更改，然后我可以执行 getElementById，但如果我必须更改其中的 20 个，然后我必须编写更多代码并知道每个 20 个元素的 ID，或者 b) 要保存代码行，只需删除整个列表并重新创建一个新列表。这个重新创建将重新渲染 100 个项目，但如果我使用 react 那么它只会更新 20 个项目，我不必担心知道这 20 个元素的 id（react 会弄清楚）？跨度>
这是有道理的，但是为什么 browsercontainer.innerHTML = newHTML, 会更改所有 100 项？为什么它不在内部使用这种差异机制？（如果他们这样做了，那么我们就不需要做出反应了？）