三大主流前端框架介紹及選型方法

在前端專案中，可以藉助某些框架（如React 、Vue 、Angular 等）來實現元件化開發，使程式碼更容易複用。此時，一個網頁不再是由一個個獨立的HTML 、CSS 和JavaScript 檔案組成，而是按照元件的思想將網頁劃分成一個個元件，如輪播圖元件、列表元件、導航欄元件等。將這些元件拼裝在一起，就形成一個完整的網頁。

本章主要涉及的知識點有：

l React 框架介紹

l Vue 框架介紹

l Angular 框架介紹

l 如何選型

React 框架是目前流行的前端框架之一。許多公司的專案都由React 框架進行構建和編寫，尤其是外企或涉及全球團隊合作的專案。本節先簡單介紹React 框架的基礎知識和必須瞭解的一些知識點，使讀者對React 有一個基本的概念和認知。

React 是由Facebook 團隊開發的一個開源框架，官方網站如圖2.1 所示。

圖2.1  React 官方網站

React 是一個用於構建使用者介面的JavaScript 庫。使用React 框架時建立一系列的React 元件（如縮圖、點贊按鈕和影片等），然後將它們組合成一個頁面、系統或應用程式。

React 框架在開發專案時有一套流程和規範，無論你是自己工作還是與成千上萬的其他開發人員合作，使用React 都是一樣的。它旨在讓工程師可以無縫地組合由獨立人員、團隊或組織編寫的元件。

React 元件的本質是JavaScript 函式。例如，下面是VideoList.js 元件程式碼例項：

function VideoList({ videos, emptyHeading }) {
  const count = videos.length;
  let heading = emptyHeading;
  if (count > 0) {
    const noun = count > 1 ? 'Videos' : 'Video';
heading = count + ' ' + noun;
  }
  return (
    <section>
      <h2>{heading}</h2>
      {videos.map(video =>
        <Video key={video.id} video={video} />
      )}
</section>
  );
}

上面程式碼中return() 中的這種標記語法稱為JSX ，它是React 推廣的JavaScript 語法擴充套件。JSX 看起來與HTML 相似，對於寫過HTML 程式碼的前端工程師來說，寫JSX 元件非常容易，不需要記住很多特定標記，並且使用JSX 標記寫出的元件呈現邏輯清晰，這使得React 元件易於建立、維護和刪除。

React 元件會接收資料並將這些資料和JSX 模板編譯後形成一段一段的JavaScript 程式碼，這些JavaScript 程式碼會將資料呈現到螢幕上。React 框架可以向元件傳遞新的資料以響應互動，例如當使用者透過表單輸入內容時，React 隨後將更新螢幕以匹配新資料。

React 是單向響應的資料流，採用單向資料繫結，即Model （資料）的更新會觸發View （頁面）的更新，而View 的更新不會觸發Model 的更新，它們的作用是單向的。在 React 中，當使用者操作View  層的按鈕或表單輸入等需要更新Modal 時，必須透過相應的 Actions  來進行操作。

Vue 在中國公司的專案開發中非常流行，因為它具有上手快、輕量化的特點，並且文件對國人更友好。一些小型的、邏輯簡單的專案大多使用Vue 框架構建。

Vue 是尤雨溪開發的一款開源的、構建使用者介面的漸進式框架。Vue 的官方地址如圖2.2 所示。

Vue 的模板語法基於HTML 的模板語法，並有特定的一套規則，例如插值語法，包括文字插值、Attribute 插值等；指令語法，包括繫結事件的內部指令v-bind 、v-on 、v-model 等，以及自定義指令；修飾符，v-on:submit.prevent 等。

圖2.2  Vue 官方網站

與React 類似，在底層機制中，Vue 會將模板編譯成JavaScript 程式碼。結合響應式系統，當應用狀態變更時，Vue 能夠智慧地推匯出需要重新渲染的元件的最少數量，並應用最少的DOM 操作。

Vue 支援單向資料繫結和雙向資料繫結。

l 單向資料繫結時，使用v-bind 屬性繫結、v-on 事件繫結或插值形式{{data}} 。

l 雙向資料繫結時，使用v-model 指令，使用者對View 的更改會直接同步到Model 。v-model 本質是v-bind 和v-on 相組合的語法糖，是框架自動幫我們實現了更新事件。換句話說，我們完全可以採取單向繫結，自己實現類似的雙向資料繫結。

Angular

Angular 誕生於2009 年，其出現的時間要早於React 和Vue ，它是一款來自谷歌的開源的Web 前端框架，Angular 的官方網站如圖2.3 所示。

圖2.3  Angular 官方網站

Angular 的模板功能強大、豐富，並且還引入了Java 的一些概念，是一款大而全的框架，更側重於大型前端工程的構建，為開發人員遮蔽專案構建底層的細節提出了自己的一套解決方案。

使用Angular 的難點是學習曲線比較陡峭，優點是由於使用了標準化的開發方式，後期能極大地提高開發生產力，提高開發效率。

AngularJS 支援單向資料繫結和雙向資料繫結。

l 單向資料繫結時，使用ng-bind 指令或插值形式{{data}} 。

l 雙向資料繫結時，使用ng-model 指令，使用者對View 的更改會直接同步到Model 。

如何選型

框架選型由多個因素決定，例如專案的型別、專案的複雜程度以及專案組成員的技能掌握情況。

React 適合多元件的應用程式，另外對於具有擴充套件和增長可能的專案，由於React 元件具有宣告性，因此它可以輕鬆處理此類複雜結構。

Vue 由於具有可接受且快速的學習曲線，因此最適合解決短期的小型專案，例如，業務邏輯簡單、不需要處理複雜資料結構的專案。

Angular 最適合大型和高+級專案，用於建立有著複雜基礎架構的大型企業應用程式。

本文節選自《React.js+Node.js+MongoDB企業級全棧開發實踐》，獲出版社和作者授權共享。