第三組讀書會 2-6 ~ 2-7

[jingxcc]

2024/3/17 2-6 ~ 2-7

簡報: https://hackmd.io/@pinkymini/S1tYH5bTa#/

導讀人： 粉粉
筆記工： Vera

2-6

單向資料流

• 資料傳遞單向不可逆向
  
• 資料驅動畫面：不會在原始資料更新以外的情況下更新畫面
• 資料與畫面分離管理：更好實踐資料驅動畫面

單向資料流常見應用

• 資料傳遞方向：資料從父層向下傳遞
• 更新資料方向：需透過事件去從父層更動資料，不能從子層更動

資料 -> DOM 實際渲染的策略：

• 資料更新後，人工判斷並手動修改對應 DOM element
  • 可以只更新需要更新的部分來節省效能
  • 需要人工判斷並維持單向資料流，難度高
• 資料更新後，整個 DOM 全部清除，以最新的原始資料重繪
  • 直覺
  • 效能問題：大量操作不需要被操作的 DOM

前端框架中的應用

• 結合 Virtual DOM
• 前端框架都是選擇單向資料流
  • React 策略二
  • Vue 策略一
• 雙向資料流之說
  • Vue: V Model，實際上是雙向綁定「語法糖」
• 選擇原因
  • 限縮變因：可維護性、可讀性，減少資料意外出錯、可進行有效的效能優化

雙向綁定

• 資料同步到畫面，畫面也可能同步到資料
  • 唯一例外（畫面到資料）：input 本身是自帶狀態，執行由瀏覽器維護、儲存。input 觸動 onChange 事件，瀏覽器可以直接蓋回資料，不需要人工處理。相對而言，單向資料流：e.g. React 需要使用 setState 去更動資料。

2-7

component

• 開發者自定義的畫面元件藍圖，可以重複使用，內涵特定畫面意義與邏輯
• 抽象化：定義 component 時，會將邏輯與實際用途明確地定義出來

component 定義＆呼叫

• 透過 JS 函式定義，把 props 傳入，回傳 React element
• compononent function 第一個字母須大寫：JSX 會根據命名來判斷 DOM element 或 Component function
• 呼叫：

// 透過建立 React comoponent 形式被呼叫
const reactElement = <CustomButtom />
// 轉譯成以下
const reactElement = React.createElement(CustomButtom)

• component vs. React element
  • component 是 React element 的藍圖，可以比喻成食譜
  • React element: 建構畫面的最小單位，是實際產生的結果，可以比喻成菜餚

props

• 客製 component 的屬性，被當作參數傳遞的 props 會被打包成一個物件，讓 component 依照不同情境產出符合需求的 React element
• 使用：
  • 透過 props 取得自定義 props 物件：e.g. props.price
  • 解構
  • 特殊 props: children
• props 是唯讀而不可修改
  • 維護單向資料流的可靠性：開發環境下的 React 會把 props 物件先以Object.freeze(props) 做處理，避免不小心改動到。如果指向到同一個記憶體位置，即使值不同，Object.freeze() 也不會起作用

父 component 與子 component

• component 裡面呼叫另一個 component 來組裝畫面

component 的 render 和 re-render

• render: 首次呼叫 component function
• re-render： 狀態資料更新，再次呼叫 component function
• render 從上到下，要外至內。當父層 component render 即使子層沒有變更，底下子層也會 render

Q & A

Q: 當第一個H2Component有狀態的更新時，會發生什麼事？

A: 呼叫第一個 H2Component 的 component function，依序呼叫裡面的 PComponent 進行 render。不會影響到第二個 H2Component，因為只有第一個 H2Component 的狀態更新。

Q: 試著講出一個內含子component的父component在資料更新後，會發生哪些事情？

A: 父 component 更新，會觸發子 component 的 re-render

Q: 滾動時畫面為什麼那麼卡？

A: 父層 position 一直被更改，因此子層會不斷 re-render。

解法：
將不能更動的子層 components 包成 slowComponent。在新舊比對中，因為原本的版本因為每次創建都是新的 object，記憶體位址也不相同，所以會需要不斷改動，但以下方解法在比對中是相同的，就可以避免多餘的 re-render。

Q: 雙向資料流在 React 上的實作

A: React 本身沒有雙向資料流，也做不到。該情境會使用 state 管理資料，將 state 設定在 input 上，觸動事件去觸發 setState 做更改，i.e. 單向資料流的設計需要開發者自己去處理這段。

Q: P.141 筆者思維分享與高內聚低耦合之間的 trade-off 設計？

A: （component 設計心法，Zet 的經驗，是沒有特定解答的。如果要認真回答可以寫一本書。）

設計不能只是單純處理眼前情境，需要思考抽象意義分層，e.g. 兩個長得很像但實際不一樣的功能，就不能設計在一起，A、B props 都不重複
=> 拆解分層、抽出共同部分。可以拆很多層，不同層都有它特定的意義，避免拆很多卻不能定義清楚它的意義。從意義去思考，而不是單純讓它動起來。

1. 假設 A、B 都有商品列表，商品列表就可以抽出來
2. 假設只有 UI 重複就只把 UI 抽出來，不同部分用 props 傳入。

-> Q: 這是讓元件變成 presentation component 和 container Component 嗎？

A: 這只是部分概念。開發者也可以每一層都有資料邏輯，不過每一層都有它的意義範圍。

-> Q: 考慮 MVC 方式去拆分component 嗎？
A: 前端不太用 MVC，component 不是用 MVC，component 主要是增加獨立性、降低耦合性，有他自己的邏輯、樣式模板。

補充

補充 1

P.115 React element 類型非 componet 實例。componet 實例才擁有自己的狀態

補充 2

Discord 相關問題參考

• 為什麼使用 React.createElement()？
• 什麼時機點會執行 component？

1. <App /> 與 App() 的差異
   1.1 是否會被立刻執行？是否會被當成 component 實例？

   // 不會
   const a = <App />;
   console.log(a);
   
   // 一般 function call 方式，會立刻執行，但不會被當作一個 component，不會去建立 component 實例
   const b = App();
   console.log(b);
   

   1.2 React 以是否透過 React.createElement() 呼叫 來判斷是否是 component，而不是透過 function name 是否開頭為大小寫。透過 function call 的方式不會產生 component 實例（可使用 React dev tool 去證實）

   export default function App() {
     return (
       <div className="App">
         App
         <Foo a={10} />
         {Foo()} // 不會被看作是 component
       </div>
     );
   }

2. 延遲執行：執行完 React.createElement()，但還 <Foo/> 沒有實際被 call 到

• 好處：可以在內容沒有被更動時，不去 re-render。

• 到 line 14 還沒執行 <Foo/>，component return 後會去 reconciler 觀察是否轉換成 DOM element，之後才會交給 renderer 去處理 DOM element。

  

  • React element 是不同歷史時刻的樣子。fiber node 才是最新狀態，需要時才會同步到 DOM element

• 可參考 P.134 範例。React element 被 return 後才會執行 P.136 的流程。

• 如果物件不變，會跳過 <Foo/>，直接沿用上一次的結果。

• props 不固定的情況：可以使用 component 類型的 React element，讓延遲執行下的比對，記憶體位置是一樣的，就會會去沿用上一次的內容。

3. Zet 提醒用簡單的例子去實踐、理解，這個步驟很重要的習慣！！會幫助理解與內化。