iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
自我挑戰組

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

Day3 Virtual DOM vs Actual DOM

  • 分享至 

  • xImage
  •  

在介紹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實例作講解。


上一篇
Day2React安裝方式簡介
下一篇
Day4簡單實例練習
系列文
React自我學習心得30天~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言