第三組讀書會 2-1 ~ 2-3 筆記

[apple890493]

Summary

2-1 什麼是 Virtual Dom ?

• Virtual Dom 概念，描述真實畫面的虛擬資料，再透過程式去建立成真實的 DOM，簡單來說 Virtual Dom 是實體 DOM 的假資料，可以解決直接操作 DOM 的效能問題。
• 更新 DOM 的方式為比較舊的 Virtual DOM 跟新的 Virtual DOM 針對差異更新。Virtual DOM → DOM 為單向轉換與同步化

2-2 什麼是 React element ?

• React element 為 react 中最小單位且為 Javascript 物件，在 React 中就是透過 React 的 API 創建 React element 來實踐 virtual DOM ，一但被創建之後就不可以被改變。

2-3 如何 Render React element ?

• React DOM 的建構步驟
  • 準備一個實際輸出實際 DOM 結果的目錄
  • 建立 root 並指定目標容器
  • 準備一個用來描述畫面的 react element
  • 以建立好的 root 來將 react element 會製成實際的 DOM element
• React 將畫面管理流程分成兩階段：
  • Reconciler
    • 負責定義畫面有什麼樣，並去比對新舊比較，把差異丟給 renderer
  • Renderer
    • 拿到 reconciler 的差異，負責去操作瀏覽器並將結果繪製出來

QA

Ｑ1：Virtual DOM 是什麼？其與 DOM 的關係是?
Ａ： Virtual DOM 是一種虛擬畫面資料結構模擬真實 DOM，並透過舊有的 Virtual DOM 與 新的 Virtual DOM 做比對，針對差異處更新真實 DOM。

Ｑ2： 為什麼 React element 一但被建立後就是不可被事後修改的？
Ａ：描述歷史畫面的一個時刻，為了讓後續可以被新的 virtual DOM 比對，故不能夠創建後再被修改。

Ｑ3：解釋 React element 繪製成實際 DOM 的操作流程以及每個步驟對應的意義？
Ａ：

1. 在 document body 中創建 react 容器，假設創建一個
   並命名為 id='root-container' ，不使用 document.body 來當作 root 容器元素，是因為避免其他的第三方套件同步操作 document.bod
2. 建立一個 root 將目標容器指定到剛剛創建的容器 root-container
3. 透過 React API createElement 創建 React element
4. 建立好的 root 去執行 root.render() 將 React element 繪製出來並掛載到目標容器上。

Ｑ4：React 是怎麼做到只操作那些真正需要被更新的 DOM element？
Ａ：透過新舊的 Virtual DOM 比對，React 只會操作那些需要被更新的 DOM。

Discussion

• 如何把 React 學得好？
  • 學習方式主要建立一個正確模型認知（mental model），避免錯誤的行為發生。先理解本質是什麼並且存在的意義是什麼，再來思考如何去使用它。
• React 跟 Vue 的更新機制不太一樣：
  • Vue
    • 觀察為細粒度以 component 為單位，存在 view model 關連並對 componet 的綁定與監聽，當元件資料改動時，會去重新 render component。
    • Vue 本身還是單向資料，只是透過 v-model 語法糖（v-on+v-bind）做到雙向綁定。
  • React
    • 以 app 為單位，不監聽資料也不管新舊資料差異而是直接重新繪製，而避免大量不必要重新繪製行為，故衍生出 virtual DOM 概念，簡單來說 React 並沒有資料綁定概念。