# [第01堂] 前端框架 ## 框架的優點 * 降低維護難度 * 提升效能 ## 前端三大框架 > 包含 Vue、React、Angular，三大框架之比較：[傳送門](https://vocus.cc/article/65007764fd89780001f46e10) | 框架 | 介紹 | 優點 | | ------- |:---------------------------------------- | ---------------------------------- | | **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取得元素。 ```html= <html> <head> <title>My title</title> </head> <body> <a href="https://www.youtube.com/">My link</a> <h1>My header</h1> </body> </html> ``` ![](https://i.imgur.com/RboVAQC.png) ## Virtual DOM >虛擬DOM，以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構，最大功用為 **提升效能**。 **React 只會更新畫面上有改動的部分**，因為一般在網頁開發中，更新 DOM 是最耗費瀏覽器資源的動作之一，每當有大量的 DOM 操作時，非常容易造成效能的瓶頸，因此當我們開啟頁面時， React 透過 render 函式建構出一棵 DOM 樹出來，之後每次 state 或 props 變動，他不會直接去做修改，而是會建構出另一個虛擬的 DOM 出來(也就是 Virtual DOM)，透過 DOM diff 演算法來將修改前後的 DOM 做比較，接著去修改差異處。 ![](https://i.imgur.com/KUAoJyt.png)