第 4 組讀書會 2-1 ~ 2-3

[CK642509]

簡報連結

https://hackmd.io/@jBtIOIbzQw6TAP6mgQvCYQ/2-1

觀念檢測

2-1 DOM 與 Virtual DOM

1. DOM 是什麼？為什麼操作 DOM 是一種效能成本昂貴的操作？
   DOM 是一種樹狀結構。操作 DOM 時，需要渲染引擎進行重繪，所以是高效能成本的操作。

2. Virtual DOM 是什麼？與 DOM 的關係是？
   virtual DOM 是一個試作品，再依據 virtual DOM 去畫 DOM (成品)。virtual DOM 有分版本，更新 DOM 時會去看 virtual DOM 的版本差異。

3. Virtual DOM 為什麼可以幫助解決頻繁或大範圍的畫面變動時帶來的效能浪費？
   因為不是直接操作瀏覽器，而是在比較 virtual DOM 新舊版的差異後，才去操作需要的部分。雖然比較、操作 virtual DOM 也會耗費成本，但還是比較省效能。

2-2 建構畫面的最小單位：React element

1. React element 是什麼？與 Virtual DOM 的關係為何？與實際 DOM 的關係為何？
   React element 是 React 中的最小單位，本身也是一個 JavaScript 物件；virtual DOM 為一個更大一點的物件，是由 React element 組成的；最後可以依照 virtual DOM 去產生 DOM。

2. 為什麼 React element 一旦被建立後就無法被修改？
   有版本紀錄，不應該被修改，不然後續就無法進行新舊版本比較了。

2-3 Render React element

1. react-dom 是什麼？ Root 是什麽？

   我認為的 React-dom 是來把 React Element 渲染成真實 dom 元素的方法，而 Root 是指定哪一塊元素給 React 有完全的控制權

2. 解釋 React DOM 繪製成實際 DOM 的流程以及每個步驟的意義

   1. 準備一個空的目標容器
   2. 建立 root 並指定目標容器
   3. 準備用來描述畫面的 React element
   4. 用建立好的 root 將 react element 繪製成實際的 DOM element

3. React 怎麽做到只操作那些需要被更新的 DOM element？
   React 會比較新舊版本之間的差異，因此可以只操作差異之處對應的 DOM element

4. React 將「定義以及管理畫面結構的描述(reconciler)」和「將畫面結構描述製成實際畫面成品(renderder)」拆分成兩階段處理，這樣設計有什麼好處？
   有兩個好處:

   1. 降低耦合
   2. 可以改用其他 renderer，e.g. react-dom、React Native

聊天室的討論

1. 這個是像 Vue 一樣把資料跟畫面分開的意思嗎？(針對 2-3 第四題的提問)

   • 在 Vue 中所謂的「把資料跟畫面分開」指的應該是關注點分離，也就是會分成 template (畫面) 與 script (資料) 兩個部分，跟這題所討論的內容不太一樣。

2. 想重新理解 Virtual Dom 與最後被產出的 Dom 之間的關係

   Virtual DOM 會透過 diff 演算方式，進行 react element 新舊版本的差異比較再將差異的地方透過 renderer 交給 react-dom 來重新渲染

   React element 是 React 基於 Virtual DOM 概念所實現的虛擬畫面結構元素，在 React 的實作中，Virtual DOM 畫面結構裡的每個元素被稱為「React element」，作為描述並組成畫面的最小單位；當需要更新實際 DOM 時，應當重新產生一份全新的 React element ，並且與舊版的 React element 進行結構比較，並根據差異之處做轉換並更新實際 DOM