---
tags: Vue 直播班 - 2022 冬季班
---

# 加碼 - React 與 Vue

## 起手：

今天不會完整的介紹 React 該如何撰寫，主要介紹兩者的差異，因此會使用 Vite 進行介紹

## 樣板語言：

- 使用 JSX
- 寫在 JS 內的 HTML Template （被視為 JS，使用 JS 的邏輯
- Vue → 寫在 HTML 的 Template （被視為 HTML、字串，使用的是 HTML 邏輯
- 部分語法的轉變，例如：htmlFor、onChange、className
- 因為 JS 中不方便用這些名稱
- Vue → 因為被視為 HTML，所以不會有這方面的衝突
- 結尾
- 一定要有結尾
- Vue → 看你心情
- 使用 `{}` 傳入變數、方法
- 一律使用 `{}` 處理
- Vue → 需要轉換為指令
- 相同之處
- 都可以使用狀態處理畫面

體驗：

1. HTML 語法需要轉換，Bootstrap 語法不能直接貼近來
2. 建立元件，使用 function return 傳入模板
3. style 一定要寫成物件

範例：

- 陣列渲染

## 元件：

- 定義方式：
- Vue → 物件
- React → 函式 or Class（現在只用函式）
- 命名：
- Vue → CDN、Vite 命名略有不同
- React → 無論在哪都是大寫開頭
- 註冊
- Vue → 區分全域註冊、區域註冊
- React → 都是區域註冊
- 相同之處
- 都有 Props
- 作用域獨立
- 都有各自的生命週期

體驗：

1. JS 基礎強的人，會覺得比 Vue 更簡單一些（只有一種寫法

## 狀態管理

Vue

- 定義：
- Options API：在 `data()`
- Composition API：使用 `ref` 、 `reactive` 定義
- 更新方式：
- 雙向綁定
- 可否更新原始狀態值（例如陣列使用 push 新增資料）
- 可

React

- 定義：
- React hook：使用 `useState` 定義
- 更新方式：
- useState 中的 set 方法
- 可否更新原始狀態值（例如陣列使用 push 新增資料）
- 不可

體驗：

- 寫法對於習慣雙向綁定的開發者會不習慣
- 要非常熟悉 React 生命週期的概念

範例：

- Click 計數器
- onChange 更新資料
- useState 觸發的狀態更新
- useState 與副作用 useEffect
- Todos

## React 必學的觀念

生命週期

- 每次更新狀態，整個函式都會更新
- 影響 →
- 每次刷新，代表內部建立的變數、函式指向都會受到影響（須避免過度觸發
- 使用 useEffect 來避免元件刷新的影響