8分鐘爲你詳解React、Angular、Vue三大前端技術

【引言】

當前世界中，技術發展很是迅速而且變化迅速，開發者須要更多的開發工具來解決不一樣的問題。本文就對於當下主流的前端開發技術React、Vue、Angular這三個框架作個相對詳盡的探究，目的是爲了解開這些前端技術的面紗，看看各自的廬山真面目。

【React】

React（也被稱爲React.js或ReactJS）是一個用於構建用戶界面的JavaScript庫。它由Facebook和一個由我的開發者和公司組成的社區來維護。

React能夠做爲開發單頁或移動應用的基礎。然而，React只關注向DOM渲染數據，所以建立React應用一般須要使用額外的庫來進行狀態管理和路由，Redux和React Router分別是這類庫的例子。

基本用法

下面是一個簡單的React在HTML中使用JSX和JavaScript的例子。

Greeter函數是一個React組件，它接受一個屬性問候語。變量App是Greeter組件的一個實例，其中問候語屬性被設置爲 "Hello World！"。而後，ReactDOM.render方法將咱們的Greeter組件渲染在DOM元素（id爲 myReactApp）中。

在web瀏覽器中顯示時，結果將是：

顯著特色

組件化

React代碼由稱爲組件的實體組成。組件可使用React DOM庫渲染到DOM中的一個特定元素。當渲染一個組件時，能夠傳入被稱爲 "props "的值。

React中聲明組件的兩種主要方式是經過功能函數組件和基於類的組件。

功能函數組件

功能組件是用一個函數聲明，用來返回一些JSX。

類組件

基於類的組件是使用ES6類來聲明的。它們也被稱爲 "有狀態 "組件，由於它們的狀態能夠在整個組件中保持，而且能夠經過props傳遞給子組件。

虛擬 DOM

另外一個值得注意的特色是React使用了虛擬文檔對象模型，也就是虛擬DOM。React建立了一個內存中的數據結構緩存，計算得出變化差別，只渲染實際變化的子組件, 從而高效地更新瀏覽器顯示的DOM。

生命週期方法

生命週期方法是指在組件的生命週期內，容許在設定的點執行代碼的hooks處理函數。

• shouldComponentUpdate容許開發者在不須要渲染的狀況下，經過返回false來防止沒必要要的從新渲染組件。
• componentDidMount是在組件 "掛載 "後調用的（組件已經在用戶界面中建立了，一般是經過將其與DOM節點關聯起來）。這一般用於經過API從遠程數據源觸發數據加載。
• componentWillUnmount是在組件被拆解或 "解掛 "以前當即調用的。這一般用於清除組件的資源依賴關係，這些依賴關係不會隨着組件的卸載而簡單地被移除（例如，移除任何與組件相關的setInterval()實例，或者由於組件的存在而在 "文檔 "上設置的 "eventListener"）。
• render是最重要的生命週期方法，也是任何組件中惟一必須存在的方法。它一般在每次更新組件的狀態時都會被調用。

JSX

JSX，即JavaScript XML，是對JavaScript語言語法的擴展。JSX在外觀上相似於HTML，它提供了一種開發者熟悉的語法結構化組件渲染的方法。React組件一般是使用JSX編寫的，儘管不必定非要使用JSX（組件也能夠用純JavaScript編寫）。JSX相似於Facebook爲PHP建立的另外一種名爲XHP的擴展語法。

JSX代碼的一個例子:

嵌套元素

同一層次上的多個元素須要被包裹在一個容器元素中，如上圖中的<div>元素。

屬性

JSX提供了一系列的元素屬性，旨在對應HTML提供的屬性。這些自定義的屬性也能夠傳遞給組件，全部的屬性都會被組件做爲props接收。

JavaScript表達式

JavaScript表達式（但不是語句）能夠在JSX內部經過大括號{}使用。

上面代碼的顯示結果是：

條件語句

If-else語句不能在JSX中使用，但可使用條件表達式來代替。下面的例子當i爲1時將 { i === 1 ? 'true' : 'false' } 呈現爲字符串 'true'。

結果會是：

函數和JSX能夠用於條件表達式中:

結果會是：

用JSX編寫的代碼須要被Babel等工具進行轉換之後才能被Web瀏覽器所理解，這種處理通常是在軟件構建過程當中進行的，而後再部署構建後的應用程序。

超越HTML的架構

React的基本架構不只僅適用於在瀏覽器中渲染HTML。例如，Facebook有動態圖表，能夠渲染到<canvas>標籤，而Netflix和PayPal使用通用加載，在服務器和客戶端上渲染相同的HTML。

React Hooks

Hooks是讓開發者從函數組件中 "鉤入"React狀態和生命週期特性的函數。它們使代碼具備更強的可讀性且更易理解。Hooks並不在類組件內工做，它的終極目標是在React中消除類組件的存在。

React提供了一些內置的Hooks，如useState、useContext、useReducer和useEffect等。它們都在Hooks API參考書中作了說明。使用最多的是useState和useEffect，分別在React組件中控制狀態和檢測狀態變化。

Hooks規則

Hooks也有一些規則，在使用Hooks以前必須遵循這些規則:

• 鉤子只能在頂層調用（不能在循環或if語句中調用）。
• 鉤子只能在React函數組件中調用，不能在普通函數或類組件中調用。

定製Hooks

構建本身的Hooks，也就是所謂的自定義Hooks，可讓你把組件邏輯提取到可重用的函數中。自定義鉤子是一個名稱以 "use "開頭的JavaScript函數，它能夠調用其餘的鉤子。鉤子的規則也適用於它們。

經常使用術語

React並無試圖提供一個完整的 "應用程序庫"。它是專門爲構建用戶界面而設計的，所以並不包括許多一些開發者認爲構建應用程序所需的工具。這使得開發者能夠選擇任何一個庫來完成諸如執行網絡訪問或本地數據存儲等任務。這種狀況也就決定了React技術在建立網頁應用時標準沒法統一。

Flux架構的使用

爲了支持React的單向數據流的概念（與AngularJS/Angular的雙向數據流造成對比），Flux架構是流行的模型-視圖-控制器(MVC)架構的具備表明性的替代方案。Flux的特色是，數據動做經過中央調度器發送到一個存儲倉庫，而對存儲倉庫數據的變化會被傳送回視圖。當與React一塊兒使用時，這種傳送是經過組件屬性完成的。

Flux能夠被認爲是觀察者模式的一個變種。

Flux架構下的React組件不該該直接修改傳遞給它的任何props，而是應該傳遞迴調函數，這些回調函數能夠建立由調度器發送的數據動做來修改存儲倉庫。數據動做是一個對象，其職責是描述已經發生的事情：例如，一個數據動做描述的是一個用戶 "follow"另外一個用戶。它可能包含以下數據：

用戶ID，

目標用戶ID，

以及USER_FOLLOWED_ANOTHER_USER枚舉類型。

存儲倉庫，是一個數據模型，能夠根據從調度器接收到的數據動做來改變本身。

這種模式有時被表述爲 "屬性向下流動，數據動做向上流動"。自Flux誕生以來，Flux的許多實現被創造出來，其中最著名的是Redux，它的特色是單一的存儲倉庫，一般被稱爲單一的數據真相源。

歷史

React是由Facebook的軟件工程師Jordan Walke建立的，受PHP的HTML組件庫XHP的啓發，發佈了React的早期原型，名爲 "FaxJS"，。它於2011年首次部署在Facebook的News Feed上，後來於2012年部署在Instagram上。2013年5月在美國JSConf大會上開源。

React Native是2015年2月在Facebook的React Conf上宣佈的，2015年3月開源的React Native，實現了原生的Android、iOS和UWP開發。

2017年4月18日，Facebook宣佈了React Fiber，這是React庫的一個新的核心算法，用於構建用戶界面，React Fiber將成爲React庫將來任何改進和功能開發的基礎。

2017年9月26日，React 16.0正式對外發布。

2019年2月16日，React 16.8正式對外發布，該版本引入了React Hooks。

經常使用命令

建立工程：

npx create-react-app my-app

開發環境運行：

npm start

生產環境打包：

npm run build

【官方網站】

reactjs.org/

【最新版本】

16.13.1於2020年3月19日

【受權】

MIT License

【Angular】

Angular（一般被稱爲 "Angular 2+"或 "Angular v2及以上版本"）是一個基於TypeScript的開源Web應用框架，由Google的Angular團隊和由我的以及企業組成的社區領導。 Angular是由構建AngularJS的同一個團隊從零開始重寫的。

Angular和AngularJS的區別

• Angular沒有 "Scope"或控制器的概念，相反，它使用組件的層次結構做爲其主要的架構特徵。
• Angular有不一樣的表達式語法，重點是"[]"用於屬性綁定，"() "用於事件綁定
• 模塊化 - 許多核心功能已轉移到模塊上
• Angular推薦使用微軟的TypeScript語言，它引入瞭如下特性。

（1）靜態鍵入，包括Generics

（2）註解

• TypeScript是ECMAScript 6 (ES6)的超集，向後兼容ECMAScript 5（即：JavaScript）。
• 動態加載
• 異步模板編譯
• 由RxJS提供的迭代回調。RxJS限制了狀態的可見性和調試，但這些問題能夠經過像ngReact或ngrx這樣的反應式附加組件來解決。
• 支持Angular Universal，能夠在服務器上運行Angular應用程序。

歷史

命名

最初，AngularJS的重寫被稱爲 "Angular 2"，但這致使了開發人員的迷糊。爲了澄清，團隊宣佈，每一個框架使用不一樣的術語，其中 "AngularJS "指的是1.X版本， "Angular " 指的是2及以上版本。

版本2

Angular 2.0在2014年10月22-23日的ng-Europe大會上宣佈。2.0版本的劇烈變化在開發者中引發了至關大的爭議。

2015年4月30日，Angular開發者宣佈Angular 2從Alpha轉爲開發者預覽版，2015年12月Angular 2轉爲Beta版，2016年5月發佈了第一個發佈候選版本，2016年9月14日發佈了最終版本。

版本4

2016年12月13日Angular 4發佈，跳過了3，避免了因路由器包的版本錯位致使的混亂，當時已經發布的版本爲v3.3.0。最終版本於2017年3月23日發佈，Angular 4向後兼容Angular 2。

Angular 4.3版本是一個小版本，它是4.x.x版本的替換版本。

4.3版本的功能

• 介紹了HttpClient，一個更小、更容易使用、更強大的HTTP請求庫。
• 爲守護者和解析器提供了新的路由器生命週期事件。四個新事件。GuardsCheckStart、GuardsCheckEnd、ResolveStart、ResolveEnd加入了現有的NavigationStart等生命週期事件集。
• 有條件地禁用動畫。

版本5

Angular 5於2017年11月1日發佈，Angular 5的主要改進包括支持漸進式Web應用、構建優化器以及與Material Design相關的改進。

版本6

Angular 6於2018年5月4日發佈。這個版本，關注的重點不在於底層框架，更多的是工具鏈，以及讓Angular在將來的更新和升級更加容易，好比：ngupdate、ng add、Angular元素、Angular Material+CDK組件、Angular Material入門組件、CLI工做區、庫支持、樹形搖動提供者、動畫性能提高、RxJS v6。

版本7

Angular 7已於2018年10月18日發佈。更新內容涉及到應用性能、Angular Material & CDK、虛擬滾動、Selects的可訪問性改進、如今支持自定義元素使用Web標準的內容投影，以及關於Typescript 3.一、RxJS 6.三、Node 10（仍支持Node 8）的依賴性更新。

版本8

Angular 8已於2019年5月28日發佈。具備全部應用代碼的差別化加載、惰性路由的動態導入、Web工做者、TypeScript 3.4支持、以及Angular Ivy做爲預覽版可配置使用。Angular

Ivy預覽包括：

• 生成的代碼，在運行時更容易閱讀和調試。
• 更快的重建時間
• 減小有效載荷
• 改進了模板類型檢查
• 向後兼容

版本9

Angular 9已於2020年2月6日發佈。第9版在默認狀況下使用Ivy編譯器。Angular能夠與TypeScript 3.6和3.7兼容。除了數百個bug修復以外，Ivy編譯器和運行時還提供了許多優點:

• 更小的軟件包
• 更快的測試
• 更好的調試
• 改進的CSS類和樣式綁定
• 改進的類型檢查
• 改善了構建錯誤
• 改善了構建時間，默認開啓AOT功能
• 提升國際化功能

特色

組件化

一個組件例子

Html部分

Typescript部分

路由

數據管理

定義服務類

調用服務類

經常使用命令

從終端上，全局安裝Angular CLI：

npm install -g @angular/cli

使用 ng new 命令建立一個新的 Angular CLI 工做區:

ng new my-project-name

開發環境運行：

ng serve

生產環境打包：

ng build --prod

【官方網站】

angular.io/

【最新版本】

9.1.2於2020年4月15日

【受權】

MIT License

【Vue】

Vue.js（一般被稱爲Vue；發音爲/vjuː/，相似於 "view"）是一個開源的Model-view-viewmodel JavaScript框架，用於構建用戶界面和單頁面應用程序。它由Evan You建立，由他和來自Netlify和Netguru等多家公司的核心成員維護。

概述

Vue.js的特色是，它採用了一個漸進式的架構，專一於聲明式渲染和組件合成。複雜應用所需的高級功能，如路由、狀態管理和構建工具等，都是經過官方維護的支持庫和包提供的，其中Nuxt.js是最受歡迎的解決方案之一。

Vue.js可讓你用稱爲指令（directives）的HTML屬性來擴展HTML。

歷史

Vue是由Evan You建立的。在Google工做期間，他使用AngularJS技術參與了多個項目的開發的，以後建立了Vue。他後來總結了本身的思考過程。"我想，若是我能夠把AngularJS真正優秀的部分提取出來，而後構建一些輕量級的東西，會怎麼樣呢？" 項目的第一個版本源碼提交日期是2013年7月，Vue在2014年2月首次發佈。

特色

組件化

Vue 組件擴展了基本的 HTML 元素來封裝可重用的代碼。從高層次的角度看，組件是Vue編譯器附加行爲的自定義元素。在Vue中，組件本質上就是一個帶有預設選項的Vue實例。下面的代碼片斷包含了一個Vue組件的例子。該組件顯示了一個按鈕，並打印出按鈕被點擊的次數。

模板

Vue使用基於HTML的模板語法，容許將渲染的DOM綁定到Vue實例的底層數據。全部 Vue 模板都是有效的 HTML，能夠被符合規範的瀏覽器和 HTML 解析器解析。Vue 將模板編譯成虛擬 DOM 渲染函數。虛擬文檔對象模型（或 "DOM"）容許Vue在更新瀏覽器以前在其內存中渲染組件。結合反應式系統，Vue可以計算出須要從新渲染的組件的最小數量，並在App狀態發生變化時，啓動最小量的DOM操做。

Vue用戶可使用模板語法，也能夠選擇使用JSX直接編寫渲染函數，渲染函數容許從軟件組件中構建應用程序。

反應式系統

Vue的特色是採用了反應式系統，它使用純JavaScript對象和優化的重渲染。每一個組件在渲染過程當中都會跟蹤其反應式的依賴關係，所以系統能夠精確地知道何時從新渲染，以及哪些組件須要從新渲染。

變換效果

當從DOM中插入、更新或刪除項目時，Vue提供了多種方法來部署變換效果。這包括瞭如下工具：

• 自動應用CSS變換和動畫的類
• 集成第三方CSS動畫庫，如Animate.css等。
• 在變換hooks期間，使用JavaScript直接操做DOM。
• 集成第三方JavaScript動畫庫，如Velocity.js等。

當在變換組件中的元素被插入或移除時，會出現這樣的狀況：

• Vue會自動檢測到目標元素是否應用了CSS變換或動畫。若是有，CSS變換類將在適當的時間添加/刪除。
• 若是變換組件提供了JavaScript hooks，這些hooks將在適當的時間被調用。
• 若是沒有檢測到CSS變換/動畫，而且沒有提供JavaScript hooks，那麼插入和/或移除的DOM操做將在下一幀中當即執行。

路由

單頁面應用程序（SPA）的一個傳統缺點是沒法分享到特定網頁中的確切 "子 "頁面的連接。因爲SPA只向用戶提供一個基於URL的服務器響應（它一般服務於index.html或index.vue），所以一般狀況下，將某些屏幕做爲書籤或分享到特定部分的連接是很困難的，甚至是不可能的。爲了解決這個問題，許多客戶端路由器用 "hashbang"(#!)來劃分動態URL，例如page.com/#!/。然而，在HTML5中，大多數現代瀏覽器都支持不使用hashbang的路由。

Vue提供了一個界面，能夠根據當前的URL路徑來改變頁面上顯示的內容 – 能夠有多種方式（不管是經過電子郵件連接、刷新仍是頁面內連接）。此外，當某些瀏覽器事件（如點擊）發生在按鈕或連接上時，使用前端路由器能夠有意識地轉換瀏覽器路徑。Vue自己並無自帶前端路由。但開源的 "vue-router "包提供了一個API來更新應用程序的URL，支持返回按鈕（導航歷史記錄），並支持電子郵件密碼重置或電子郵件驗證連接的認證URL參數。它支持將嵌套路由映射到嵌套組件，並提供精細化的過渡控制。添加了vue-router後，組件只需映射到它們所屬的路由，父/根路由必須指明子路由的渲染位置。

上面的代碼:

• 在websitename.com/user/<id>中設置一個前端路徑。
• 這將在(const User...)中定義的User組件中呈現。
• 容許用戶組件使用$route對象的params鍵輸入用戶的特定ID：$route.params.id。
• 這個模板（根據傳遞到路由器中的參數變化）將被渲染到DOM的div#app裏面的<router-view></router-view>。
• 最後生成的HTML將是：websitename.com/user/1：

生態系統

核心庫自帶的工具和庫都是由核心團隊和貢獻者開發的。

官方工具

• Devtools - 用於調試Vue.js應用程序的瀏覽器devtools擴展。
• Vue CLI - 用於快速開發Vue.js的標準工具書
• Vue Loader - 一個webpack加載器，容許以單文件組件（SFCs）的格式編寫Vue組件。

官方程序庫

• Vue Router - Vue.js的官方路由器
• Vuex – 基於 Flux模式的 Vue.js 的集中式狀態管理。
• Vue Server Renderer - 用於 Vue.js 的服務器端渲染。

經常使用命令

安裝工具

npm install -g @vue/cli

建立工程：

vue create my-project

開發環境運行：

npm run serve

生產環境打包：

npm run build

【官方網站】

vuejs.org/

【最新版本】

2.6.1於2019年12月13日

【受權】

MIT License

【小結】

本文對於當前頂級的前端技術作了較爲詳盡的探索，前端技術一個大的方向是單頁應用 (SPA，Single Page Application)，咱們在選取針對本業務的前端技術時須要結合以下幾個方面來考慮：

1. 成員當前技能，這是一個很現實的問題，大多數程序員會選擇本身比較熟悉的技術。這裏要思考一下，目前本身熟悉的技術是否是最優選項？

2. 可利用的學習時間，若是發現要使用的技術須要一些時間學習，這個時間的開銷到底會不會與開發進度有衝突？

3. 可否保證項目的複雜度最低，這個是比較關鍵的因素。先進技術之因此先進就是由於可讓開發者把時間和精力放在真正的業務開發上面來，若是要使用的技術須要進行不少與業務不相關的配置，就須要問一個問題，有沒有更好的辦法？

最後，但願本文對現有或者之後的業務開發有指導或者借鑑做用。

點擊關注，第一時間瞭解華爲雲新鮮技術~