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，這可以大大減少瀏覽器需要做的重新計算次數為了畫它。在上一個比喻中，你想象一下你買了一個檸檬（沒有檸檬的冰箱和帶有檸檬的冰箱）之后你的冰箱會是什么樣的，找出最小的變化（添加檸檬）並進行操作。

碰巧每次更換任何東西都扔掉冰箱有點貴。

請注意，Virtual DOM 並不比通過getElementById簡單地獲取一個元素並更改它更快。 比較是在處理復雜子樹的變化的兩種方式之間，而不是單個元素。

React的Virtual DOM如何比DOM更快？

問題描述

1 個解決方案

解決方案1
5 已采納 2018-07-20 05:14:19

React的Virtual DOM如何比DOM更快？

問題描述

1 個解決方案

解決方案1 5 已采納 2018-07-20 05:14:19

解決方案1
5 已采納 2018-07-20 05:14:19