在介紹react實例之前,首先來介紹一下其操作原理---Virtual DOM,並比較和Actual DOM的差異。
瀏覽器在完成連線,並收到HTTP response後,便會開始進行渲染畫面階段,在這階段瀏覽器會讀取HTML並轉換成DOM,DOM展現HTML的內容與架構,開發人員可透過加入CSS style,計算這些樣式並放到對應的DOM元素上;或是使用 JavaScript透過DOM來操作畫面或功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Actual DOM簡單練習</title>
</head>
<body>
<h2>一分鐘快速建立react</h2>
</body>
</html>
<style>
h2{
color: red;
}
</style>
<script>
var h2 = document.getElementById('app');
h2.remove();
</script>
Virtual DOM是一個JavaScript物件,存在於Memory中。前端框架便是建立於Virtual DOM中,會先複製一份Actual DOM出來,但不會完整複製全部資訊,只複製出和畫面渲染有高度相關的資訊,如HTML tag、tag上面的屬性等。每當有事件產生或資料結構有異動時,前端框架會先建立一個新的Virtual DOM,再比較和舊的Virtual DOM差異,將其差異處更新在Actual DOM上。詳細的操作方式待明天的React實例作講解。