Fluent React CH1 ~ CH2

[MiJouHsieh]

《流暢的 React : 建構快速、高效、直覺的 Web 應用程式》CH 1 ~ CH 2

20251014,21 CH 1 ~ CH 2

導讀人：Lois
筆記工：Mi

---

第一章 基本內容

1. 建立 React 的動機是什麼？
   1. 在 React 框架之前的模式是用雙向資料綁定的方式，雖然在小型應用開發很快，但是當在大型複雜應用程式中，會導致資料流混亂，當一個 model 的改變觸發 view， view 可能會觸發其他 model 改變，沒辦法預測出之後發生的結果，以及資料在 debug 上有困難度。React 出現是為了要解決這個問題，在建立大型的應用程式，可以知道資料流方向和結果是什麼樣子。
2. React 如何改善之前的模式？例如 MVC 和 MVVM?
   1. MVC 的缺點就是互動性比較複雜，雙向綁定會導致有緊密的耦合，所以 React 的改善方式是使用單向資料流，相對的更嚴格，讓整個資料流的改變易於追蹤。
   2. 因為 React 的核心是以組建為基礎架構，所以可以重複使用同一邏輯的組件，讓 UI 方便做組合。
   3. 單向資料流，解決雙向資料綁定帶來的效能、變化難追蹤的問題。
3. Flux 架構有什麼特殊之處？
   1. Single source of truth 的特性，資料儲存到 store 裡面，把資料統一透過 dispatcher 來修改，藉此達到單向資料流，更好做到關注點分離和測試性。
4. 宣告性程式設計抽象有什麼好處？
   1. 寫的元件描述想要完成的事情和預期 UI 想呈現的畫面，React 就會建立 React element 來追蹤變化，做逐步的更新，就不用從使用者的程式去讀取不一定存在的 class name 或其他的程式碼。
5. 虛擬 DOM 在實現高效率的 UI 更新時發揮什麼作用？
   1. React 使用虛擬 DOM 作為藍圖，描繪未來 DOM 會發生什麼事，以及在虛擬 DOM 中比對，實際對應到 DOM 的地方是哪裡，做最小的更新，進而讓效率更高效。
   2. React 會保留前一次的虛擬 DOM 作為快取進行 diff 比較，讓我們可以對內容追朔和理解。

第 二 章 JSX

1. JSX 是什麼？優點和缺點？

   1. JSX 是 JavaScript 的擴展語法，在寫 React 時可用類似 HTML 的方式撰寫程式碼，最後透過 Babel 編譯成 React.createElement() 語法，最終生成 JavaScript 物件（React element）。
   2. 優點：對於熟悉 HTML 的開發者來說是滿好編寫的。具備安全性，會將尖括號轉譯為安全符號，避免 XSS 攻擊。可與強型別系統 TypeScript 或 PropTypes 整合，進行型別檢查。被廣泛使用。
   3. 缺點：初學者一開始接觸會不易理解，學習曲線較高。必須透過編譯工具（如 Babel）轉譯後才能在瀏覽器執行。沒有做到關注點分離。

2. JSX 和 HTML 有什麼差異？

   1. 屬性寫法差異，JSX 採用駝峰式命名，且避免與 JavaScript 保留字衝突。
   • HTML：<div class="box"> → JSX：<div className="box">
   • HTML：<label for="name"> → JSX：<label htmlFor="name">
   2. 可以與強型別系統 TypeScript 或 JSDoc 整合，提供型別檢查。
   3. 轉譯為 JavaScript ，變成 React element 。
   4. 之外，JSX 只能有一個根元素，有多個元素必須用 <div> 或 <></>（Fragment）包起來。

3. 文本字串如何變成機器碼？

   透過編譯器的三個步驟，

   1. 第一個步驟是詞元化，文本字串被詞元化或有狀態的詞元（token）。
   2. 第二步做解析，詞元經過解析器的轉換變成JSON 物件，為一個語法樹表示程式碼的結構。
   3. 第三步編譯器用抽象語法樹產生機器碼。

4. JSX 表達式是什麼？提供什麼好處？

   1. JSX 表達式在 JavaScript 中使用 { } 包住程式碼，可在 { } 中放 JavaScript 程式碼、條件運算（? :）、邏輯運算（&&）或迴圈渲染。
   2. 好處：更容易維護，也比較有彈性，可用 JavaScript 運算或函式結果來決定畫面，還有動態渲染。