首页 文章

React的Virtual DOM如何比DOM更快？

提问于
浏览 次
2

我知道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>
javascript reactjs virtual-dom

1 回答

  • 3

    改变虚拟DOM应该与改变真正的DOM没有多大区别 . 问题在于后果：真实DOM中的更改会触发重新布局和重新绘制，因此我们触摸真实内容越少越好 .

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

    React和其他类似框架所做的事情加快了这一点，即diff过程，它找到最小的变化集来获得真正的DOM来反映虚拟DOM，这可以大大减少浏览器需要做的重新计算次数为了画它 . 在上一个比喻中，你想象一下你买了一个柠檬（没有柠檬的冰箱和带有柠檬的冰箱）后你的冰箱会是什么样的，找出最小的变化（添加柠檬）并进行操作 .

    碰巧每次更换任何东西都扔掉冰箱有点贵 .

    请注意，Virtual DOM并不比简单地通过 getElementById 获取一个元素并更改它更快 . 比较是在处理复杂子树的变化的两种方式之间，而不是单个元素 .

    回复于

相关问题