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

[HLTVProxy]

《React 思維進化》讀書會第二組 2-4、2-5

簡報

2-4 JSX 根本就不是在 JavaScript 中寫 HTML

JSX 不是在 JavaScript 裡面寫 HTML
JSX 本身是語法糖(Syntactic Sugar)

• 語法糖是讓人們更簡潔流暢去使用，也更好理解
  JSX 本質上就是 React.createElement
• 更方便地建立樹狀結構
  Babel 是一種 Transpiler（轉譯）
  Babel 的轉譯時機是 Build Time（構建階段）
• < 17 JSX -> babel 轉譯 -> React.createRlement -> Virtual DOM -> DOM -> Render to
• ＞= 17 JSX -> babel 轉譯 -> _jsx -> Virtual DOM -> DOM -> Render to HTML

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

• 標籤需要嚴格閉合（空元素需要自閉合）

React.createElement = {
    'div', // 標籤名稱
    {className: ''foo}, // attribute，若沒有則填入「null」
    'I am div' // 子元素
}

使用 index 當 key 會有非預期錯誤

JSX 只能有一個根節點

QA

• 書的 p.70 有typo問題
• 字面值和表達式的差異?
• 條件式判斷渲染
  • 如果用 && 可能沒辦法確定值是 truthy 或 falsy，進而導致渲染出預期之外的東西
    • 如: 如果前面是0就會導致顯示在畫面但其實不想顯示
  • 用三元運算子會是比較保險的做法

    Zet: 不需要為了怕印出意外的東西而統一用三元運算子，只要用 Boolean() 把 && 左邊的值包起來，一旦原本的值是 falsy，就會被轉換成 false，就能確保不會被印出來在 DOM 中

• 17 版之前和 17 版之後 JSX babel 轉換的差異
• Transpiler 轉譯器是什麼
• React element 的子元素的支援型別
• fragment 是什麼？
  • < 17 React.createElement(React.Fragment, null);
  • ＞= _jsx(_Fragment, {});
• 可以用 Babel playground 來看 JSX 轉換後的結果
  • https://babeljs.io/repl
• key 值不能是 index
  • key 亂填可能導致效能很差，也可能導致應用程式有問題
    • 狀態和資料不在React控制的時候(例如input value或focus)，沒key時就會發生非預期錯誤
  • 為什麼亂填有問題?
    • 這和React更新機制有關，React會比較新舊VDOM 尋找差異處，只更新差異處，VDOM 在 React 就是 React element
  • React 如何做新舊比較?
    • 會先比較位置，一樣的位置會比較元素類型是否相同，如果元素類型一樣，就會認為是可以沿用的，就不會刪掉，只會更新屬性或裡面的文字
      • 因為只會比較位置與元素類型，React 會誤以為舊列表的第一個項目和新列表的第一個項目是同一個，只要更新屬性或文字就好，他無法分辨列表裡的誰是誰，React沒有資料跟畫面綁定的概念；
      • 如果舊的位置沒有該元素，就會在新的DOM插入新的元素
  • key的用途: 可以讓舊版和新版的React element比較時，可以用key來分辨該項目是不是同一個東西，如果比較時發現key不同，就會知道是無法對應的東西，發現key相同，就知道這是可以對應的
  • key 填寫index 就跟沒填 key 類似，因為它會在陣列新增減少項目時，index變動而導致難以用key來對應誰是誰
  • key 值應該填寫可對應原始資料，不會和其他資料重複的唯一值，且事後不會修改的值，重複的key值會被React警告