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

[linyawun]

《React 思維進化》 2-1 ~ 2-3

原筆記連結: https://hackmd.io/D-xlvmQbR9KUMLGoMzIHTQ?view

簡報連結

• https://hackmd.io/cWREnw9gSdKylPV2C022VA

Summary

Ch1

• JS 基礎型別
  • string(常用)
  • number(常用)
  • bigint
  • boolean(常用)
  • undefined(常用)
  • symbol
  • null(常用)
• React 開發環境
  • Create React App
  • Next.js
  • Remix
  • Astro: 本身支援多語言，也可用 React 寫

Ch2

2-1 DOM 與 Virtual DOM

• DOM 本身不是 JS 語言的一部分，是瀏覽器提供的方法

QA

什麼是 Virtual DOM?

• 定義一個畫面期待的結構，是一個夢(但還沒成真)

討論與澄清對 Virtual DOM 的理解

• Virtual DOM 是開發者和瀏覽器之間的抽象層；所有定義和畫面操作都從Virtual DOM處理，每次都會有之前版本的也會有當下的，前後比對後產生差異處，React 才根據實際差異處做操作；此方法可將 DOM 操作做到最小化，每次只做最小 DOM 操作，以達到效能優化
• Virtual DOM只是一個概念，React 實作此概念的方式就是 React element
• 實際在寫 React 就是在操作 定義(或捨棄)React element，React渲染React element產生實際畫面
  • 開發者對 React element 只有兩種動作: 定義和捨棄，不會操作，操作聽起來像修改，React element不會被修改

為何 React element 被建立後就不可被事後修改?

• 額外提問: React 設計哲學是 immutable，這和不能被修改的原因有關嗎?
  • -> 不是直接相關，但多少有間接相關，immutable 通常是指狀態相關的事情，因為 JS 只有非基礎型別(物件、陣列)才會有 immutable，React 在講 immutable 通常是指物件
  • 不能被更新的本質其實是同一件事情，他們(state, state建立的畫面)都是快照畫面，這些 state 會建立該狀態對應的 React element，這些建立的都是快照(歷史紀錄)，都是已存在的事實，歷史紀錄就不該被修改
  • 新的 render 要產生新的畫面、新的狀態，而不是改變既有的狀態與畫面
  • 可以想像每 render 就像一次 git commit(但commit可以被修改，React element不能)，或是像送出購物車後，當下的購物商品快照(紀錄購物當下的贈品、當下的價格)
  • 每 render 一次就是在建造一次新的版本的歷史紀錄
• 一旦被建立後，就是某時間點的快照，建立後資料就不會被改變了(如: useState)

如果真的改 React element 會發生什麼事?

• 書中的概念性解釋: 會影響新舊 React element 的比較 (但其實不完全正確，下點說明)
• 內部實作描述: 實際 React 內部還有一個抽象層，React 會將 React element 轉為fiber node 再做比較，實際上舊的 react element 會被存放起來，不會直接拿來跟新的比較
  • 好文章推推: Ref. React 開發者一定要知道的底層架構— React Fiber
  • fiber 比較底層，但放不下了QQ

immutable state 是 React 也阻擋不了的

• 舊資料被修改其實不會有太大影響，但有時遇到非同步事件就會有問題
  • 如: 如果有 setTimeout 要三秒後執行事件，三秒後執行的事件最後會顯示新資料，因為你中間去改了那個舊資料
• 修改過去舊資料的問題請見之後章節

為何操作DOM是效能成本昂貴的東西?

• 有些沒必要的操作，卻去操作那些DOM，就造成效能浪費
• 有些DOM就沒有要改，就不需要去操作他

React DOM 是什麼? root 是什麼?

• React DOM 將 React element 轉換後產生 DOM
• root 建立畫面管理的入口，因為 body 可能會有很多第三方套件的加入，所以在處理和控管上 React 無法全權管理
• 通常只會建立一個 root，但如果要和其他框架整合，也可以用多個 root

reconciler 與 renderer 分別在做什麼?

• reconciler: 比較 Virtual DOM 的差異，比較差異後交給 Renderer 做渲染
• 在一次 render 執行的順序: 先 reconciler 再 renderer
  • 第二次開始後才會有比較差異
• 後面會更詳細解釋

ReactDOM.createRoot 回傳的 root 是什麼?

• 不是 React element(不是畫面的一部分)，是一個 react 連接實際 DOM 容器的一個控制器
• root 可以用 render 和 unmount 兩個方法，都是 react dom 暴露出來的API

學習技巧補充

• 本書作者 Zet 提到，在理解書上的內容之後，可以試著用==跟書上不同的內容、自己的理解、自己的話去練習講出來==，也才代表有真正內化相關的內容
  • 另外，[脈絡連貫] 和 [語句上順不順暢] 是兩件不同的事情
  • ==[脈絡連貫] 更重要==
• 踴躍描述書中概念，用自己的話講，以鞏固自己已知的知識
  • 費曼技巧: 真正的學會技巧，要講到連阿嬤都懂
  • 鼓勵大家多嘗試和身邊朋友同事說明
• learning how to learn: 持續不斷學習，每天一個知識點，讓腦內知識維持在高點，不限於 React

Zet: 請按照書中的順序依序閱讀，才能好好理解

---

其他建議: 建議之後筆記工可傳筆記 hackmd 連結，大家一起共編減輕負擔

[LoisChen68]

簡報網址錯了唷～
請協助修正為：https://hackmd.io/cWREnw9gSdKylPV2C022VA 🙏🏻

[linyawun]

已更正，感謝提醒!