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

[letmetellatale]

簡報連結：https://hackmd.io/Z2gFsMK8R5W_LUbUrinTJQ?both#/45

Recap

DOM

• 由 DOM element 組成的樹狀結構，用於表示瀏覽器中的畫面
• 是瀏覽器內建的特殊 JS 物件，包含該元素的屬性並提供操作方法
• 每當去更動 DOM element 時，等同於重新渲染實際畫面

Virtual DOM

• 一種設計概念，Virtual DOM → DOM 同步關係為單向的
• 透過事先定義好的模板程式來產生新的 Virtual DOM
• 與此前最後一次舊畫面用的 Virtual DOM 結構細節比較將新舊的差異的部分更新到實際的 DOM 中，以完成瀏覽器畫面的更新
• 優點：透過最小範圍的DOM操作，達到效能優化
  

React element

• 為 React 基於 Virtual DOM 概念所實現的「虛擬畫面結構元素」
• 為 JS 物件資料
• 用於描繪一個預期的實際 DOM element 結構，也為最小組成單位
• 透過 React 提供的 createElement ( ) 方法來建立 React element
• 經過 React 處理轉換後，即能自動產生對應的實際 DOM element 到畫面中

const reactElement = React. createElement (
'ul',
null,
React. createElement ('li', null, 'iteml'),
）；

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

什麼是 JSX 語法？

• React 提供的一種「語法糖」，用於提升程式碼可讀性及開發體驗
• 透過刻意設計模仿「貼近HTML語法」，但本質上和 HTML 是不同的東西
• JSX 語法 = React.createElement 方法的呼叫

const reactElement = ( // JSX語法
	<ul>
		<li>iteml</li>
	</ul>
);

const reactElement = React. createElement (
	'ul',
	null,
	React.createElement('li', null, 'iteml'),
);

問題點

• JSX 是 React.createElement 方法呼叫的替代語法
• 一段 JSX 語法為表達一個「值」
  => 呼叫 React.createElement 的回傳「值」
• 基本上瀏覽器只看得懂三種語言：HTML 、 CSS 、 JavaScript
• 所以瀏覽器讀不懂 JSX 也無法正常在瀏覽器中運作，那 JSX 如何在瀏覽器中正常運作呢？

解決方式

執行前用專門的工具將程式碼靜態轉譯成「可執行的 React.creacteElement 呼叫語法」後，即可在瀏覽器環境下正常執行。

Babel

JavaScript 社群中最主流&熱門的 source code transpiler

Babel 與 JSX 語法轉譯的概念

Transpiler(轉譯器)

• 將高階語言的程式原始碼轉化成另一種模樣的高階語言程式原始碼，即做同語言或跨語言的轉
  換
• 一般瀏覽器無法支援 JSX 的解讀，在程式原始碼被真正執行前，先用轉譯器將程式碼進行轉換，再將轉譯後的版本給瀏覽器做執行

JSX tranformer

• 透過不同的 plugin(插件) 來支援不同語法的轉譯效果
• 負責轉譯 JSX 語法的工具
  • @babel/plugin-transform-react-jsx
  • 設置上述 plugin 為 JSX transformer
  • Babel 即能將 JSX 語法轉譯為 React.createElement()
• 上述流程稱為：程式碼的靜態分析與處理
  • 尚未實際執行程式碼
  • 僅分析純文字及處理相關轉譯、檢查、優化等動作
• 程式碼的轉換會在 build time 發生及完成
• 程式碼的讀取及執行會在 runtime 發生

新版 JSX transformer 與 jsx-runtime

React 17 前

• 必須 import React from 'react'；如無會報錯
• JSX transformer 會將 JSX 語法轉為 React.createElement () 後輸出
• 在 runtime 時 JSX transformer 已預期有 React 變數，及有 createElement 方法可呼叫

React 17 後

• 官方合作並支援新的 JSX transformer
• 新的 JSX transformer & jsx-runtime 支援下的優點
  • 無須再手動 import React
    • 自動 import
    • 17前 將 JSX 語法轉為 React.createElement ( ) 呼叫
    • 17後改成提供 jsx-runtime 的_jsx ( ) 取代 React.createElement ( )
  • 略為改善 bundle 大小
  • 其他效能與提示的優化
  • 新舊 JSX transformer 在 JSX 語法上完全相容

_jsx( ) 與 react.createElement( ) 的不同

• 相同處
  • 用來建立 React element 的方法
  • 透過參數定義想要的 React element 結構，並回傳一個 React element
• _jsx () 的額外優化
  • 透過靜態解析JSX語法的語意來避免一些多餘的資料處理流程

💡 新版的 JSX transformer & jsx-runtime 提供更便利、優化效果更好的 JSX 實現

DOM、Virtual DOM、React element、JSX 關係概念

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

嚴格標籤閉合

• HTML具有容錯性
• JSX 是嚴格閉合！
  • 若沒有正確閉合，JSX transformer沒有辦法正確解析React.creatElement（）的呼叫及階級，則會產生轉譯失敗的錯誤

// 有子元素 =＞ 需有開標籤及閉標籤
const Label_1 = <div> 子元素 </div>

// 無子元素 => 可以用"自我閉合方式"簡寫
const label_2 = <img src="./pic.jpg" />
const label_3 = < link rel="stylesheet" href="styles.css" />

JSX 語法中的資料表達

• 可使用類似於 HTML 語法去建立 React element，但本質上是完全不同的
• HTML ：純字串格式的一段靜態文字組成的標籤語言，不具運算邏輯或資料型別的概念，僅能表達標籤結構及固定字串
• JSX ：轉譯後是可執行的 Javascript 執行碼，能表達 JS 中所有資料型別的值 & 能直接使用變數等各種表達式
• 表達一段固定的字串字面值
• 表達一段表達式

💡 詞彙說明

字面值：表達「固定值」的表示法，不須進行任何計算操作，直接出現的固定值

• 數字、字串、布林值、JS中的物件字串值、陣列字串值

表達式：“計算產生值"的表示法，根據變數、運算子、函式的值做變化

• 變數、運算子、函式呼叫及其他表達式

都是用來表達和產生值

• 字面值 = 值本身
• 表達式 = 產生「值」的計算過程

表達一段固定的字串字面值

支援使用與 HTML 相同語法的風格來表達內容

• 指定屬性值時表達字串字面值
  • 雙引號包起來
• 指定子元素時表達字串字面值
  • 將內容寫在開標籤與閉標籤內

// input

const div = (
	<div id="example 1" className="double-quotation-marks-needed">
		我可以直接被寫在開標籤與閉標籤間~
	</div>
);

//↓↓↓ 轉譯輸出之後的範例成為一段字串字面值 ↓↓↓
// output

const div = React.createElement(
	'div',
	{
		id:'example_1', 
		className: 'double-quotation-marks-needed'
	｝,
	'我可以直接被寫在開標籤與閉標籤間'
);

表達一段表達式

如欲表達固定的字串字面值以外的表達式，都需使用 JSX 指定的語法 { } 將表達式包住

• 指定屬性值時表達一段表達式
• 指定子元素時表達一段表達式

// input【範例】函式、變數、表示式

const teaPrice = 50;

function handleButtonClick (){
	alter（"老闆來19杯四季春~"）;
｝

const buttonElement =(
	<button onClick={handleButtonClick}>
		單價：｛teaPrice｝，總金額：｛teaPrice * 10｝
	</button>
)

//↓↓↓ 轉譯輸出之後以大括號包起來的表達式程式碼，會原封不動地放在對應位置 ↓↓↓
// output

const teaPrice = 50;

function handleButtonClick (){
	alter（"老闆來19杯四季春~"）;
｝
const buttonElement = React.createElement (
'button',
｛ onclick: handleButtonClick ｝, // 屬性值

// 當“子元素"包含表達式時 （teaPrice & teaPrice * 10）
// 每個表達式被視為一個獨立子元素，並與前面字串切開
'單價：',
teaPrice,
'總金額：',
teaPrice * 10

// button中，共有4個子元素
}

• JSX 被轉譯時，會自動拆解開閉標籤問的子元素
• 字串字面值無論多長都會被當成一個子元素
• 每個表達式都為一個獨立的子元素
• 有助於更新時只操作對應的 DOM element，來達到縮小 DOM 的操作範圍來降低效能成本

JSX 語法中表達另一段 JSX 語法作為子元素

• 在一段 React.createElement 方法的呼叫中，包含另一段 React.createElement 方法的呼叫來做為子元素
• React.createElement ( ) 的呼叫屬於表達式的一種，原理上應該要以 { } 包起來
• 但因 JSX 語法有支援直接在父元素的開標籤與閉標籤間寫上子元素標籤，則可省略｛｝
• React element 子元素 如何被處理成實際 DOM element?
• 當定義一個對應 DOM element 類型的 React element 時，其子元素會根據型別不同而有不一樣的處理方式來被轉換
• React element的子元素的支援型別
  • 當各種資料型別作為React element子元素並轉換到DOM時的處理行為

畫面渲染邏輯

動態列表渲染

• 陣列型別的子元素會進行攤開處理，並依序渲染每一個元素
• 適合處理動態資料列表的對應用畫面
• 需加 KEY 值
  • React 處理動態列表時，會需要對陣列中的React element 做 Virtual DOM 的效能優化處理，故會要求在陣列中的每個 Reactelement 都是唯一、不重複的key慶性

條件式判斷渲染

• 根據資料或狀態作為條件式，來判斷是否要繪製特定畫面區塊

• &&運算式

  • 當條件符合時渲染特定畫面，若不符合則都不印

  • 透過 Truthy & Falsy 用來描述一個值在布林型
    別自動轉換中的行為

  • Truthy：排除屬於 Falsy 值外的值

  • Falsy：

    • 布林型別自動轉換的情況下被視為 false 值
    • false, 0, 空字串, null, undefined, NaN

    （3 > 1 ) && 'foo' => 'foo'
    （1 === 2 ) && 'bar' => false

• 三元運算式

  • 透過三元運算式來進行條件式渲染

  • a ? b : c

  • 當 a 為 true 時，回傳 b，否則回傳 c

    const TernaryOperator = （
    	<div>
    		{(isLoggedIn
    			？<p> b. 如果isLoggedIn = true </p>
    			：<p> c. 如果isLoggedIn = false </p>
    	)}
    </div>
    )

一段JSX語法的第一層只能有一個節點？

• 一段 JSX 為呼叫一次 React.createElement 方法，它只會回傳一個 React element 作為結果
• 樹狀結構只能有一個節點
• 解決方式：用一個共同的父元素將欲放置在同層的多個 React Element 包起來

condt Wrong = (
	<div>第一個</div>
	<div>第二個</div>
)

condt Correct = (
<div> //共同的父元素
	<div>第一個</div>
	<div>第二個</div>
</div>
)

注意事項

• 為了解決上述問題，而多了一層沒有特別意義的元素時…
  • 產生多餘的階層而降低可讀性
  • 無意義的 Dom element 恐導致 CSS 樣式或專案中針對 DOM 結構所寫的某些邏輯壞掉

Fragment

• React 提供地內建特殊元素類型
• 藉此建立一個父元素
  • 使用 需 import
  • 使用 <> 空標籤 可省略 import
• 不會產生實際的 DOM element，且能作為容器用的的 React element