HackMD
[第01堂] 前端框架
框架的優點
- 降低維護難度
- 提升效能
前端三大框架
包含 Vue、React、Angular，三大框架之比較：傳送門
| 框架 | 介紹 | 優點 |
|---|---|---|
| Vue | 輕量級的JavaScript框架 | 適合初學、入門 |
| React | 由Facebook開發的JavaScript庫 | 兼容性佳、自由度高、開發效率高 |
| Angular | 由Google開發並維護的全面型JavaScript框架 | 含有豐富的組件庫，一手包辦所有功能 |
技術上來說 React 並不是框架，而是一個用來渲染 UI 組件的函式庫
SEO
Search Engine Optimization，搜索引擎優化
- 網站線上曝光的一個重要手法
- 增加網頁在搜尋引擎的曝光度
- 與網站的關鍵字、標題、圖片、連結等都息息相關
(舉例：搜尋 網頁設計)
SPA
Single Page Application，單頁式應用程式
- 只有一個頁面的應用程式
- 透過 JavaScript 動態渲染，不需要刷新重整頁面
- 更好的用戶體驗
- 為什麼需要SPA? 例如：音樂播放網站
- 缺點：SEO不好
與手刻的不同處
React的優點
- 元件化：
在 React 中所有的東西或介面都是由元件所組成，強調 UI 元件的封裝性、共用性、組合性及擴展性，也就是一個頁面他其實是很多個元件所組成的，ex：header、sidebar、button都可以是元件，開發者可以寫出模組化且重用性高的 UI 元件，讓開發更有效率。 - 提高性能：
透過Virtual DOM能夠提高性能，下面會詳細說明。 - 單向資料流：
資料的流動都是由父元件將資料傳遞給子元件，因此易於理解和維護。
DOM
Document Object Model，文件物件模型
瀏覽器載入網頁的過程會把 HTML 的內容轉成資料結構存放在執行環境中，那個結構就叫做 DOM。
把HTML文件的各個標籤定義成物件，這些物件最終會形成一個樹狀結構。
ex：document.getElementById就是用id在向DOM取得元素。
Virtual DOM
虛擬DOM，以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構，最大功用為 提升效能。
React 只會更新畫面上有改動的部分，因為一般在網頁開發中，更新 DOM 是最耗費瀏覽器資源的動作之一，每當有大量的 DOM 操作時，非常容易造成效能的瓶頸，因此當我們開啟頁面時， React 透過 render 函式建構出一棵 DOM 樹出來，之後每次 state 或 props 變動，他不會直接去做修改，而是會建構出另一個虛擬的 DOM 出來(也就是 Virtual DOM)，透過 DOM diff 演算法來將修改前後的 DOM 做比較，接著去修改差異處。
