第一組讀書會 2-4 ~ 2-5

[thewilliamzhu]

• 導讀人：玄米
• 簡報連結：https://docs.google.com/presentation/d/1Ad6zmtKFbI-DczCELsPEUJTwQ4n_8pONqVmsXitWKWk/edit?usp=sharing

QA

• Q: JSX 轉譯的動作是 build time 進行還是在 run time?
  • build time 時靜態分析與處理
  • Zet 補充: 有工具可以讓 babel 支援在 runtime 進行轉譯的動作
• Q: JSX 為什麼要將每個表達式都視為獨立的子元素？
  • 由於表達式的值可能會隨著程式的互動行為而被更新，因此當該資料對應的畫面連動更新，進行新舊 React element 的結構比較並指操作差異之處的 DOM element，這樣獨立的子元素的設計就能進一步縮小操作範圍。
• Q: 什麼是 JSX？
  • JSX 是 React.createElement 的語法糖，會由 Babel 轉譯成 React.createElement()
• Q: 什麼是 transpiler? 什麼是 JSX transfomer?
  • transpiler 中文名稱是轉譯器，將高階語法轉換成另一種高階語法，如 TypeScript 轉譯成 JavaScript，而 JSX transfomer 即是 JSX 轉譯成 React.createElement() 語法的轉譯器。
• Q: 開發撰寫 JSX 語法是透過哪些流程處理，最後才能在瀏覽器中執行並定義畫面的？
  • 參考本書 p.63
  • 開發環境 build time ( JavaScript 程式碼尚未被真正執行 )
    • 包含 JSX 語法的 JavaScript 程式碼檔案，經由轉譯變成包含 React.createElement() 語法的 JavaScript 程式碼檔案
  • 瀏覽器環境 runtime
    • Vitural DOM
      • 實際執行 React.createElement() 產出 React element
      • 透過 react-dom 進行轉換與繪製
    • DOM
      • 畫面實際 DOM element
• Q: JSX 語法與 HTML 有哪些相異之處？
  • JavaScript表達式
    • JSX ：可使用大括號 {} 來嵌入 JavaScript 表達式，例如 {1 + 1} 或 {user.name}。
    • HTML ：不能直接嵌入 JavaScript 表達式，通常需要通過 <script> 標籤或事件屬性（如 onclick="..."）來包含 JavaScript 程式碼。
  • 嚴格標籤閉合
    • JSX ：要求所有元素都必須被關閉，即使它們在 HTML 中是自閉合的。例如，你必須使用 <img src="..." />而不是 <img src="...">
    • HTML：對於一些特定的標籤允許不寫閉合標籤，如<img>、<input>。
  • JSX 雖然不是在寫 HTML，但是是在寫 JavaScript，JSX 是 JavaScript 的語法擴展，如同 TypeScript 也是 JavaScript 的語法擴展。
• Q: 為什麼 JSX 語法的第一層只能有一個節點？
  • 一段 JSX 就是在呼叫一次 React.createElement 方法，他只會回傳一個 React element 作為結果，而實際上我們無法一次只用一個值來表達兩個 React element，所以 transpiler 的 JSX transformer 當然也無法解析這種寫法成為有效的一次 React.createElement 呼叫語法。

Zet 補充

• 2-5 p.76 key 警告
  • render 一個陣列中都是 React element 會發生
  • 不填 key 不只是效能優化的問題，也可能導致畫面渲染錯誤
    • React element 進行 diff 演算法新舊比較時，如果沒有 key，會使用 element 位置進行比較，進而導致依序比較出錯。
  • 不要使用 index 作為 key，原因為依舊會 key 是依陣列順序，而不是對應資料本身
  • 實務上可以使用 uuid 套件來維持資料與畫面的對應性