第 4 組讀書會 2-8 2-9

[youyuhsuan]

簡報連結

日期：2025/03/18 @Tech-Book-Community
導讀人：上竣
筆記工：Stella
Slider Here

2-7 畫面組裝的藍圖：Component 初探

Component 的本質

定義：Component 是由開發者定義的可重複使用的程式碼單元
功能：提高程式碼的重複使用性和通用性
抽象化：通用性、重用性

Component 類型

Function Components + hooks : React 16.8 版本後成為主流
Class Components : 較舊的寫法，現在較少使用

Component 命名與使用規則

命名 : Component 名稱的首字母必須大寫
原因 : 讓 transpiler 在將 JSX 轉譯為 JavaScript 時，能區分 React Component 和一般 HTML 元素
呼叫 : 使用 Component 時會創建其實例，React 簡化了這個過程

「Component 是藍圖，在呼叫 Component 產生實例 instance 。」

Component 可視為畫面的藍圖，例如「珍珠奶茶製作配方 Component」，我們可以根據需求重複使用此配方，並客製化不同的口味。

Props 概念

定義 : Props 是 Component 藍圖中的變因
特性 : Props 是唯讀的 (read-only)，不可修改
使用技巧 : 可使用解構賦值來簡化 Props 的使用，避免重複寫 props.

Children Prop

• 可用開標籤與閉標籤去寫，用開標籤可以更加的直覺。
• Children Porps 特有傳值方式，其他並沒有什麼特別，容器內容相關Props

Component 產生一個、多個 React element ，狀態更新時也會產生產生一個、多個 React elemen進行比較，（Copoments 產生一個、多個 React element ）、狀態更新時也會產生產生一個、多個 React elemen進行比較（re-render）

1. 為什麼 copoment 命名中的首字母必須為大寫？
   Agatha — 為了滿足JSX 語法轉譯，所以需要轉譯時元素的類型判斷。
2. 請問console 中依序會印出什麼?
   33 — 答案是B，MyComponent1 => MyComponent2 => MyComponent2 => MyComponent3 => MyComponent3
3. 下列哪個才是正確的 props 正確使用方法？為什麼？
   yu-min — 答案是B，c 會直接報錯
   主講人 — 避免直接修改 prps 值

2-8 React 畫面更新的發動機：State 初探

State

• 可更新的狀態資料，react 設計理念是單向資料留，資料驅動話面，不需要整個畫面進行重繪
• 運作載體跟界線，唯一且合法更新資料的方式
• 只能放在Component function 最上面，並用固定的呼叫順訊
• 回傳值是一個陣列
• 不同實例之間的獨立的

4. State 的本質是什麼？ state 與compoment 的關係是什麼？
   Evann — State 是前端應用程式中用於記憶狀態的臨時、可更新資料。

5. 同一個compomeent 在多個地方被呼叫，他們之間的state 資料會互通嗎？為什麼？
   Tay — 不同實例之間的獨立的

2-9 React 畫面更新的流程機制：reconciliation

• Render Phase 的人 reconciliation

• Commit Phase 的人 Render

• 第一次、比較差異 Render Phase

• 第二次、 更新的部分 Commit Phase

狀態更新 setState 方法更新資料，更新資料並 re-Render
re-render 會觸發本身以及子元元素

6. 請解釋 React 更新畫面的 reconciliation ?
   小9 - 呼叫 State 並且更新 State 的方法，並發請re-render，進行資料比對後，產生實際的DOM。

7. 一個 Component 有哪些可能會被觸發re-render？
   Sella - 呼叫 State進行觸發，會re-render主元素跟子元素。

問題部分是我後面再補，可能有些落差> <