时间戳

首页 > 解决方案 > React 的 Virtual DOM 如何比 DOM 快？

javascript - React 的 Virtual DOM 如何比 DOM 快？

问题描述

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

标签： javascriptreactjsvirtual-dom

解决方案

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

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

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

碰巧的是，每次更换冰箱时都要扔掉冰箱，这有点贵。

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

推荐阅读