---
tags: react, note
---

# 第 1 章：簡介

## React 特色與思維

### React 不是什麼?

1. React 不是框架，它僅負責 MVC 中 View 的部分。
2. React 沒有雙向綁定。
Angular 和 Vue 都會將 View 和 Model 作綁定；React 為單向資料流。
因此初次渲染時 React 速度較快；而 Angular 和 Vue 則是在少量組件更新時速度較快。
也因 React 與 DOM 脫鉤，所以可以很容易的可以讓 Virture DOM 與其他環境相容，例如 IOS, Android, etc.

:::info
:bulb: React 為聲明式 Library，可以思考一下和 jQuery 有何不同。
:::

### VAR 三大框架比較
| Angular | Vue | React |
|:---------------------:|:--------:|:-----------------------------:|
| MVVM (Real Framework) | MVVM | Virtual DOM (View of MVC) |
| 雙向綁定 | 雙向綁定 | 單向資料流 |
| 文件完善 | 文件完善 | 簡單好學 |
| 需學習 Typescript | 輕量 | 主要還是靠 Vanilla Javascript |
| | 容易整合 | 非常靈活選項多 |

## Virtual DOM 特色

更動 Real DOM 的代價太大，特別是遇到大量的重新渲染；
而 Virtual DOM 因為是存在於記憶體中，所以更動的效率比 Real DOM 快速非常多，
並且只會動 Real DOM 不同的地方。

### Virtual DOM

- 初始 render 快
- 大量更新快
- 容易實作 DOM 以外的 render；如 React Native

### MVVM

- 小量更新快
- 要做若干優化，大量更新時才夠快