第 4 組讀書會 2-4 ~ 2-6

[Ai-Chen-Hsieh]

簡報連結

連結

2-4 JSX 根本不是在 Javacript 寫 HTML

1. JSX 語法的用途是什麼?背後的本質為何? 為什麼長得像 HTML?
   他是 React.createElement()方法的語法糖，用近似 HTML 的寫法來讓我們更方便 & 直觀的建立 react element，再透過轉譯器，轉換成 React.createElement()

2. 什麼是 transpiler?什麼是JSX transformer ?
   transpiler 是一種將高階程式原始碼轉換成另一種模樣的高階程式原始碼的轉譯工具，而在 react 中將 JSX 轉換成 React.createElement() 這個方法的 transpiler 工具叫做 「JSX transformer」

3. 開發時撰寫的JSX語法是透過哪些流程處理，最後才能順利的在瀏覽器中執行並定義畫面的?
   因為瀏覽器看不懂 JSX 語法，因此需要透過 Babel JSX transplier 轉換成 React.createElement() 這個瀏覽器看得懂的語法給瀏覽器執行

2-5 JSX 語法規則脈絡與畫面渲染實用技巧

1. JSX 語法與 HTML 語法有哪些不同之處？
   JSX 是實際上是 JavaScript 的程式碼片段，會有變數跟邏輯的概念存在，雖然類似 HTML 的寫法但本質上兩者不同，使用一些特定 attribute 會因為跟 JavaScript的保留字有衝突，而寫法不同(ex: class 在 JSX 要改成 className )。
   HTML 只能用來表示靜態文字的一種標籤語言

2. 為什麼一段 JSX 語法的第一層只能有一個節點？
   因為 JSX 只能回傳代表一個 react element，且一個 JSX　代表一個根節點。如果要放多個節點會需要在共同外層多用一層標籤包起來或是使用　Fragment 代替。

2-6 單向資料流與一律重繪渲染策略

1. 單向資料流是什麼?
   資料跟畫面獨立開來，當資料跟畫面的模板當數據有變化時才會驅動畫面作變更，這個過程是單向不可逆的

2. 實現單向資料流的常見渲染策略有哪些?其分別的優缺點是什麼?
   (1) 資料更新後人工判斷需要被更新的 DOM element
   優點: DOM 操作的夠精準可以減少不必要的更新效能問題
   缺點: 應用程式越來越龐大，精準更新較困難
   (2) 資料更新後，一律重繪渲染
   優點:開發者只要專注在模板定義及資料更新，不需要在意資料連動畫面的操作，更直觀簡單
   缺點:應用程式龐大時，會造成有明顯的效能問題

3. React 為了維護單向資料流所採用的渲染策略為何?是怎麼解決該渲染策略的缺點的?
   React 採用一律重繪的渲染策略，以新版的資料整個重繪，重繪的是 virtual DOM 而非實際的 DOM ，因此比重繪實際的 DOM 更要節省效能

---

聊天室的討論:

1. 雖然我都用 && 來做條件渲染，但最近 GPT 跟我說如果某些值可能會回傳 undfined 可以改用 ??大家平時會用到 ?? 嗎～～～

會

2. 渲染條件什麼時候會用 early return ?

兩個狀態的條件渲染對三元判斷式來說是可以的, 但遇到兩個以上時會增加判斷式的閱讀性