Day3 Virtual DOM vs Actual DOM

2021 iThome 鐵人賽

DAY 3

自我挑戰組

React自我學習心得30天~系列第 3 篇

13th鐵人賽

拉比豆

2021-09-18 23:51:33

897 瀏覽

分享至

在介紹react實例之前，首先來介紹一下其操作原理---Virtual DOM，並比較和Actual DOM的差異。

Actual DOM

瀏覽器在完成連線，並收到HTTP response後，便會開始進行渲染畫面階段，在這階段瀏覽器會讀取HTML並轉換成DOM，DOM展現HTML的內容與架構，開發人員可透過加入CSS style，計算這些樣式並放到對應的DOM元素上；或是使用 JavaScript透過DOM來操作畫面或功能。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Actual DOM簡單練習</title>
  </head>
  <body>
    <h2>一分鐘快速建立react</h2>
  </body>
</html>

CSS

  <style>
      h2{
          color: red;
      }
  </style>

CSS JavaScript

  <script>
      var h2 = document.getElementById('app');
      h2.remove();
  </script>

Virtual DOM

Virtual DOM是一個JavaScript物件，存在於Memory中。前端框架便是建立於Virtual DOM中，會先複製一份Actual DOM出來，但不會完整複製全部資訊，只複製出和畫面渲染有高度相關的資訊，如HTML tag、tag上面的屬性等。每當有事件產生或資料結構有異動時，前端框架會先建立一個新的Virtual DOM，再比較和舊的Virtual DOM差異，將其差異處更新在Actual DOM上。詳細的操作方式待明天的React實例作講解。