iT邦幫忙

2021 iThome 鐵人賽

DAY 4
3
Modern Web

React.js 30 天學習全記錄系列 第 4

[ Day 04 ] Virtual DOM ? ReactDOM ?

https://ithelp.ithome.com.tw/upload/images/20210903/20134153AhPF2pqWyn.png
還記得我們在 Day 02 的時候有跟大家提到 React.js 是使用 Virtual DOM 的概念來進行渲染的嗎?
那今天就一起來看看什麼是 Virtual DOM 吧!


Virtual DOM

一個存在於 Memory 當中的 JavaScript 物件,並且模擬了 DOM 本身的樹狀結構。當資料結構產生變更時,會比較新舊之間的差異有哪些?最後再將有差異的部分確實更新到該瀏覽器的 DOM 中。

Virtual 的中文翻譯就是模擬,所以白話文來說就是指模擬 DOM 的意思。我們一般在使用 JavaScript 做撰寫時很常會要綁定和操作許多的 DOM ,但是每次的操作都會讓瀏覽器重新的渲染畫面。而在現今的開發環境下, DOM 的數量都比以往還要更加的龐大,因此多次的頁面渲染對於效能上肯定會造成影響。
所以這時候 Virtaul DOM 的存在就可以在大部分的情況下,大大解決網頁渲染的效能問題。

為什麼需要 Virtual DOM ?

現今的主流框架和函式庫使用了 Vitrual DOM 的概念,透過 Diff 演算法比較新舊 Virtual DOM 之間的差異後再去更新到實際的 DOM 上,主要是希望能夠讓網頁的效能提升之外也讓使用者體驗更佳友善。
所以 React.js 中就是使用到這個 Virtual DOM 的概念來進行綁定和渲染而提高了效能和使用體驗。不過它究竟是應用在哪一個部分呢?


React DOM

打開昨天 Day 03 中我們所建立的 React.js 專案中的 index.js 檔案,我們可以看到以下這段程式碼:
https://ithelp.ithome.com.tw/upload/images/20210919/201341537s7MKhi3TQ.png
這段程式碼中的 ReactDOM 函式就是 React.js 自己所產生的 Virtual DOM 物件。

剛剛上面有提到過,React.js 透過操作自己的 Virtual DOM( 也就是 ReactDOM )來取代實際操作瀏覽器本身的 DOM , 因此 ReactDOM 其實就是我們整個 React.js App 的進入點。

進入點?

https://ithelp.ithome.com.tw/upload/images/20210919/20134153xbvmA6NhKl.png
從上面 index.js 檔案中的程式碼可以發現,在 ReactDOM.render() 的函式中有一個 App 的元件被引入使用了。這時候我們打開 App.js 的檔案來看看:
https://ithelp.ithome.com.tw/upload/images/20210919/20134153GPIm7ES6Tb.png
上面 App.js 中的內容現在都有確實呈現在瀏覽器的畫面上,不過這是為什麼呢?

因為我們將該元件 App.js 引入到了 ReactDOM 中,而 ReactDOM 會將其函式內的元件或參數內容進行比對,並以此來判定需要重新渲染的部分為哪些?接著才會操作在實際 DOM 的位置上並完成渲染的動作。
所以進入點的概念就是指這個 App 內所有的元件或參數都是由這個函式來進行渲染,而且是綁定在一個 idrootdiv 標籤。

備註:可以打開 public 資料夾中的 index.html 檔案就可以看到下面程式碼中倒數第三行標籤 divid 名為 root 的進入點
https://ithelp.ithome.com.tw/upload/images/20210919/20134153cLN7fZFAdb.png


現在大家對於 React.js 畫面渲染的背後原理有了基本概念後,我們下一篇要來介紹如何在 React.js 中撰寫元件內的 HTML 囉!
有任何問題的話還是一樣都非常非常歡迎提出和指教~
那我們下篇見ʘ‿ʘ


上一篇
[ Day 03 ] 建立一個 React.js 專案
下一篇
[ Day 05 ] JSX 語法
系列文
React.js 30 天學習全記錄30

尚未有邦友留言

立即登入留言