本文主要討論兩種框架在應用上的特點對比。

Angular

Angular 是基於 TypeScript 的 Javascript 框架。提到Angular，就不得不提它的前身AngularJS。AngularJS是Google釋出的第一個MVVM框架，帶來了許多新特性，為前端開發提供了很多新的思路，線上直到現在還有許多大型產品在用AngularJS。由於AngularJS 的諸多缺點，2016年Google又提出了Angular。可以說AngularJS和Angular是完成類似功能的但是互相獨立的兩種產品，可以把Angular看作是AngularJS的一種改進。

Angular框架的核心理念是元件、模組、路由

。元件指的是各種型別的UI元件，在新版本Angular裡採用了不可變資料型別，幫助執行髒檢查機制。Angular2-dependencies-graph是一個node.js的模組，通過它把專案的目錄和結構生成圖表，就可以清晰地知道自己寫的模組位於專案的哪個位置。模組是用來組織業務程式碼的利器。把應用切分成多個模組，當用戶進入index頁面的時候，只加載其中的bundle-0.js，當用戶點到對應模組的時候再載入其它的程式碼。Angular新版本中靜態路由只要寫component屬性，說明這個路由需要交給哪個component來處理，Angular就會自動建立這個component並渲染出來。

Augular是一個相當成熟和龐大的框架，這也使得它有時過於冗雜。

React

React由Facebook開發，Facebook認為MVC無法滿足他們的擴充套件需求，由於他們非常巨大的程式碼庫和龐大的組織，使得MVC很快變得非常複雜，每當需要新增一項新的功能或特性時，系統的複雜度就成級數增長，致使程式碼變得脆弱和不可預測，結果導致他們的MVC正在土崩瓦解。認為MVC不適合大規模應用，當系統中有很多的模型和相應的檢視時，其複雜度就會迅速擴大，非常難以理解和除錯，特別是模型和檢視間可能存在的雙向資料流動

React具有以下特點

• 高效能 傳統web頁面操作DOM涉及重繪重排相當耗效能 React 提供了一種不同而又強大的方式來更新Dom（輕量級虛擬Dom——Virtual Dom），代替直接操作DOM，更新virtual dom時不一定馬上影響真實Dom，React會等到事件迴圈結束，利用Diff演算法，通過當前新Dom表述與之前做比較，計算出最小步驟來更新真實Dom
• 元件化 Dom樹上的節點稱為元素，而虛擬Dom 的節點稱作元件（可複用性） （元件的特點下面還會談到）
• 可預測性 state屬性包含定義元件所需要的一些資料，當資料發生變化時，將會呼叫render重現渲染，React 把元件看成是一個狀態機（State Machines），通過與使用者的互動，實現不同狀態，然後渲染 UI，讓使用者介面和資料保持一致
• 單向資料流 資料從父節點傳遞到子節點，只需要從父節點獲取props渲染即可

對比

Angular 是一個框架而不是一個庫，因為它提供了關於如何構建應用程式的強有力的約束，並且還提供了更多開箱即用的功能。Angular功能齊全，不需要研究庫，路由解決方案或類似的東西。React很靈活，可以和各種包搭配。這導致了在團隊開發過程中，需要自行制定很多規則和進行相應的指導，否則將會影響專案的開發程序。

對於入門而言，Angular是最難入門的，因為它過於龐大。而react這種輕型框架使得它更容易上手。

同時，Angular將各種工具繫結在一起，儘管不能靈活的使用各種包，也避免了像react一樣，在使用過程中有可能會用到一些快速更新的包，而這會給專案帶來成本。不過，對於一個小型專案來說，這些成本並不大。

參考資料

[譯] 2017 年比較 Angular、React、Vue 三劍客

全面解讀Angular 4.0核心特性

react簡單介紹