# 第四週

本頁連結：https://hackmd.io/y3ZQmM7VSye16SKn-JSJOQ

## 補充：

- React 特色：前面難，中期簡單
- 職缺趨勢說明

## 課前說明

- 上週的挑戰抽出名單

function drawNumber(maxValue) {
    if (maxValue <= 0 || !Number.isInteger(maxValue)) {
        throw new Error("請傳入一個大於 0 的整數！");
    }
    return Math.floor(Math.random() * maxValue) + 1;
}

## 預告課程獎勵

### **課程獎勵說明：**

| 時間皆未定

- 2/9 前 50%：超過 100 人挑戰成功，全班直播（Teachable 影音）加碼授權一年
- 前完成課程報到 -> 第四週主線
- 2/16 前 60%：框架菁英班直播（個人挑戰）
- 完成課程報到 -> 第六週主線 或 第五週主線 + 心得牆
- 2/16 前 80%：框架菁英班錄影（個人挑戰）
- 目前以 Vue 為主，React 可參考主題包含：從零建構 API、Cloud flare、前端工程師如何寫出好履歷
- 完成課程報到 -> 第七週主線 或 第六週主線 + 心得牆
- 100%：數位完賽獎狀

### 什麼是元件？

故事：漂亮阿姨電腦壞了，想請小明幫忙組一台新的

原價屋：https://www.coolpc.com.tw/evaluate.php

商場上有賣個是零件：

- CPU、記憶體、主機板、鍵盤、滑鼠 → 都是元件
- 主機板與 CPU 的關係 → 同廠牌的才能相容
- Intel CPU 需對應 Intel 主機板
- AMD CPU 需對應 AMD 主機板
- CPU 與 主機板的傳輸 （主機板與 CPU 的資料傳輸） → 元件資料傳輸，資料傳輸不會跨元件
- 鍵盤插在 USB 孔上（鍵盤與主機板的資料傳輸）
- 螢幕透過 HDMI 插在顯示卡上（螢幕與顯卡的傳輸）
- 顯卡插在主機板上（顯卡與主機板的傳輸）

**為什麼要使用元件？**常見拆分原因：

- 程式碼太長
- 部分元件需要多次運用
- 邏輯拆分，不同的功能使用獨立的元件進行運作
- React Router 時，每個元件都是獨立頁面

## React 元件

React 都是元件

### 拆分一個元件 One

1. 開一個新檔案，路徑可以在 `/components` 下，命名大寫開頭
2. 在檔案中建立 React 元件，並使用 export default 進行匯出
3. 在外層元件進行匯入

### 拆分元件的心法 Two

1. 先不要想著拆元件
2. 先不要急著拆元件
3. 先乖乖把功能做完
4. 最後再看適不適合拆元件

## 元件 Props

前面是內部接收名稱，後面是外部傳入的值；

口訣：前內後外

> 下方的程式碼中，哪一段是外部值，哪一段是內部接收的名稱
>

<PersonCard person={person} />

### 1. Props 內層元件接收優化細節

- 使用解構，取出所需的 Props 值
- 使用 `?.` 可選串連，解決值可能不存在的問題
- 使用 [PropTypes](https://courses.hexschool.com/courses/react-video-course1/lectures/58832975)，進行傳入資料驗證
- 範例程式碼：

        PersonCard.propTypes = {
          person: PropTypes.shape({
            name: PropTypes.string,
            like: PropTypes.string,
            age: PropTypes.number,
            pictureUrl: PropTypes.string
          })
        }

- Props 可以傳遞多值

### 2. 單向數據流與方法傳遞

- React 特點在於單向數據流
- React 能夠直接將 set 方法傳入進內層使用（超簡單）
- React 沒有 Vue emit 的概念

### 3. 示範封裝元件

## 元件生命週期

每次透過 useState 觸發時，會刷新整個元件

以下幾個方法，則會偏向 React 效能優化

## useMemo, useCallback, Memo

> 以下幾個方法，均是優化效能為主
>
- useMemo: 可設定資料更新的條件
- memo: 元件 Props 更新時，才重新渲染元件
- useCallback: 可避免外層方法、狀態更新時，過度造成元件重新渲染

## 本週額外挑戰

- 預習章節閱讀：[連結](https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962883_12062543649513962890)
- React 表單開發
- React hooks 進階
- 作業連結：https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962871_12062543649513962892?tid=12062543649528343957
- 助教作業解說（週日上午 10:00）
- 團隊任務：
- https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962882_12062543649513962907