第 1 組讀書會 2-1 ~ 2-3 #12

Aya-X · 2024-02-18T15:32:54Z

Aya-X
Feb 18, 2024
Collaborator

今日簡報
https://hackmd.io/YuqYjrh6SMiDY-maqGWqmg#/

QA

【DOM 是什麼？】
- 是瀏覽器特殊的 JavaScript 物件
- 包含方法，讓我們可以操作
【短時間操作 DOM，會讓畫面卡卡的是為什麼？】
- 如何衡量效能昂貴？
  - 因為 DOM 跟瀏覽器的引擎有連動
React 的效能改善
- 著重在畫面沒有變化的 React element
- 避免產生不必要的 React element
【補充】p.19
- ~~Virtual DOM 並不是絕對都比 DOM 快~~
  - ~~是在多數情況下，確保可以有水準之上~~
- ~~如果都已經知道具體操作什麼 DOM，並且操作範圍都是最小化，那就沒必要再去跑 Virtual DOM 做新舊比較~~
- 不是 A、B 比較速度的問題，而是操作 A 的時候可能會有額外的成本
- 比喻：寫測試要額外花力氣規劃跟寫測試，直接寫可能有時候比較快
  - 但寫測試可以避免在多數專案發生的各種鬼故事跟非預期錯誤發生時，去辨認他們？最終反而耗費更多時間
- 所以真正的命題不是『寫測試比不寫測試更省時間嗎？』
  - 而是『寫測試比不寫測試更省麻煩嗎？』
    
    （非預期錯誤、計算成本、其他處理⋯⋯）
- Virtual DOM 和實際操作 DOM 都會損耗效能。
  - 理想狀況：精準知道 DOM 的差異做最小改變
  - 目前有個相對好的方案：
    
    利用 Virtual DOM 去比較新舊 DOM，近一步更新 DOM
  - 這樣的形式：確保大部分情況都是能讓效能在一定水準之上，避免更大或是潛在損失。
【什麼是 Virtual DOM？】
- 模擬 DOM 結構的資料
- 要更新畫面的時候，會去比較新舊，找出需要改變的部分，再去執行 DOM 操作
【Virtual DOM 只有在 React 有嗎？】
- 目前的前端框架幾乎都有
Virtual DOM 的重點
- 先用自定義的草稿，再透過程式轉換為實際的畫面結構
【補充】
- 讀書的時候要問為什麼
【什麼是 React Element？】
- React 基於 Virtual DOM 概念所實現的虛擬畫面結構元素
- 是組成畫面的最小單位
- 補充：延伸到使用 JSX 的說法是一種向外解釋的講法
- ⇒ 可以改成問自己【為什麼需要 React Element？】
  - 所以要說上層的概念 Virtual DOM
【補充】通常講 Virtual DOM 有 2 種意思
- Virtual DOM 的概念本身
- 在 React 裡面指的是 React Element
DOM 裡面的元素不是 DOM，還是存在樹狀結構裡面 ⇒ node
- 更廣泛的東西
- PropTypes.node
- PropTypes.element
- 【延伸閱讀】https://medium.com/starbugs/react-開發者一定要知道的底層架構-react-fiber-c3ccd3b047a1
【React 把 React Element 繪製成實際 DOM 的流程為何】
1. 準備空的元素作為目標容器
  1. div id root
2. 建立 root 並指定目標容器
  1. getElementById
  2. createRoot
3. 準備用來描述畫面的 React Element
  1. createElement
4. 已建立好的 root 來將 React Element 繪製成實際的 DOM element
  1. render()
【目標容器的用途？】
- 交給 React 來做管轄
【root 裡面放 btn，然後透過 React 正常的流程，也放個按鈕，會發生什麼事】
- 只關注自己的 React Element 的比較
- 會砍掉原有的按鈕，重新繪製 React 的按鈕上去

<body>
  <div id="root-container">
    <button id="btn">button</button>
  </div>
</body>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

第 1 組讀書會 2-1 ~ 2-3 #12

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

第 1 組讀書會 2-1 ~ 2-3 #12

Uh oh!

Aya-X Feb 18, 2024 Collaborator

QA

Replies: 0 comments

Aya-X
Feb 18, 2024
Collaborator