我知道 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>
最佳答案
更改虚拟 DOM 与更改真实 DOM 应该没有太大区别。问题在于后果:真实 DOM 的变化会触发重新布局和重绘，因此我们接触真实事物的次数越少越好。
进行模板渲染的一种方法是渲染模板，然后用新渲染的模板替换整个容器元素。这需要重新计算容器内刚刚出现的所有内容，以及受其影响的所有内容。基本上，如果浏览器是你的厨房，而你的模板容器是冰箱(你的冰箱图像在五分钟后就是你的虚拟 DOM)，而你买了一个柠檬，典型的模板渲染会把你的冰箱扔掉，想象一下装柠檬的冰箱会是什么样子，买你以前所有的原料和柠檬，然后装满新冰箱。
React 和其他类似框架所做的加快速度的事情是 diff 过程，它找到最小的更改集以使真实 DOM 反射(reflect)虚拟 DOM，这可以大大减少浏览器重新计算的次数需要做才能画它。在前面的类比中，您想象买了柠檬后冰箱会是什么样子(没有柠檬的冰箱与有柠檬的冰箱)，找出最小的变化(添加柠檬)并执行。
碰巧，每次更换冰箱里的任何东西都扔掉它有点昂贵。
请注意，虚拟 DOM 并不比简单地通过 getElementById 获取一个元素并更改它更快。比较的是两种处理复杂子树变化的方式，而不是单个元素。
关于javascript - React 的 Virtual DOM 比 DOM 快多少？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51435371/