【51CTO.com快譯】 當企業管理者要求將數據導入一套擁有海量訪問者的網站時，我們可以從數十種選項中挑選相關解決方案，從而快速完成任務并實現業務交付。過去，大多數處理任務都需要在服務器端完成，但時至今日相當一部分繁重的工作開始由客戶端負責執行。憑借著充裕的施展空間，如今我們已經能夠在客戶端上實現更為緊湊且交互性更高的使用體驗。

目前市面上存在眾多用于客戶端代碼的工具，負責實現數據部署以及與用戶之間的交互機制。Angular與React無疑在交付復雜的、數據驅動型Web應用與網站領域扮演著核心角色。然而，由于二者實際提供的方法有所區別，因此程序員之間也針對這種差異爆發了曠日持久的爭論與派系劃分。

[[185680]]

那么Angular是否正是您所在團隊的***選項？或者說React才更適合您的下一個項目？要正確回答這個問題，我們當從細處著眼加以考量并最終作出決斷。

定位

Angular的優勢所在：作為一套完整框架

在利用Angular啟動項目時，我們的大部分CRUD工作實際已經得以完成，這是因為此套框架內置有大量數據對象的創建、更新與刪除機制。大家需要的只是提供對象以及對應字段專有名稱; 接下來使用CSS規則對其加以顯示。這套框架本身會處理對字段中數據的創建與操作。換句話來說，Angular是一套完整框架，類似于一輛只待您直接駕駛的汽車。

React的優勢所在：“僅僅”只是一套資源庫

React項目的支持者們普遍強調其只是一套資源庫——即多項例程的一套集合，負責將數據顯示在屏幕之上。然而，每一個JavaScript文件不都在瀏覽器上扮演著同樣的角色嗎？事實上，所謂只是一套資源庫所代表的真正含義，在于React僅代表一套工具，而不會對您構建頁面的意圖作出過多假設。React不會提供完整的視圖，但會為大家提供快速有效建立預期視圖的手段。對于那些不需要預先包裝好的視圖模板的用戶而言，他們只需要一點點幫助——即擁有一套資源庫，在這方面React的表現堪稱偉大。

Angular的優勢所在：其架構可自上而下實現定制

二者之間另一項需要掌握的顯著差異在于，Angular已經內置有大量現成的架構選項。大家的工作只是發現這些架構并對其加以定制。Angular程序員從宏觀角度出發，向自己的設計模板中添加大量細節。如果各位希望使用標準的Angular結構，則可直接享受由這套框架提供的各種便利。

React的優勢所在：具備良好的靈活性以從零開始完成構建

React程序員通常認為自己是在利用React對自身開發工作加以支持。這一比喻也許有點冒犯之意，畢竟編碼工作領域不應存在孰高孰低的觀念，不過這也在一定程度上表達了Angular與React之間的差異。React程序員會不斷向其中添加元素，直到完成自己的應用成果。而如果想來點特別的設計，利用React則可直接進行構建，而無需打破Angular之類框架中的預設結構。

支持的語言

Angular的優勢所在：TypeScript

Angular采用一款JavaScript的變體方案，即TypeScript，之所以得名是因為其能夠將強大的類型檢查機制與JS的通用結構及方法加以結合。這類似于為我們的褲子加上吊帶。當TypeScript代碼被編譯為JS形式以進行部署時，其中的全部變量類型定義都會被清除。這意味著投入運行之前，所有錯誤都會被發現并予以標記。當然，大家并不一定非要使用TypeScript，但大多數開發者仍然對其贊揚有加，甚至將其視為一種傳統而非硬性要求。當然，TypeScript的介入也讓我們的代碼變得更加簡潔與安全。

React的優勢所在：標準 JavaScript

React立足于標準Javascript構建完成，因此大家可以利用其實現標準JavaScript。不過如果愿意，用戶也完全能夠在其中摻雜TypeScript。由于TypeScript代碼隨后會被編譯為JS形式，因此整個過程并不會出現問題。選擇權在您。

Angular的優勢所在：HTML，混合一部分JavaScript

Angular開發人員首先創建的往往是HTML。大家頁面中的多個部分利用標簽進行拼寫，而后再通過Angular代碼實現構建。開發人員多數認為Angular的主要載體為HTML，并在必要時混合一部分JavaScript。這通常使得設計師及其他使用者能夠更輕松地訪問HTML標簽，而在非必要時不涉及復雜的JavaScript。用戶可以以HTML的方式進行思考，并僅有需要時稍稍觸及一點JavaScript代碼。如果大家是一位傾向于優先考慮HTML的Web開發人員，則Angular能夠讓頁面成為一套易于上手的HTML標簽集合，并引入一點點JavaScript作為處理雜務的工作小精靈。

React的優勢所在：JavaScript，混合一部分HTML

React應用的內核實際上屬于一款JavaScript程序，并有能力顯示負責定義顯示效果的HTML。如果大家需要指定任何HTML，則可將其提交至JS代碼當中，并在一切準備就緒之后由JS負責發布這些HTML剪貼元素。這意味著熱愛JS的開發人員能夠更為輕松地完成相關工作。具體來講，React的使用感受更像是一種自然的應用程序開發過程，而非單純使用標記語言。如果大家擁有程序員型思維，則React的預設使用方式肯定更合您的胃口。在這里，我們編寫函數并傳遞數據結構，而神奇的HTML則會由后端流向瀏覽器。總而言之，這就是那種最典型的程序編寫機制。

編程方式

Angular的優勢所在：聲明式編程

一部分編程語言專家認為，“聲明性”語言使得程序員能夠表達其所需要實現的效果，而其余工作則由語言本身負責完成。在HTML情況之下，這意味著程序員能夠使用各類標簽（例如<h1>, <ul>, <p>）指定文檔中的各個部分（例如標題、列表、段落），并由瀏覽器計算并得出最終結果，從而在屏幕上給出正確的顯示內容。

React的優勢所在：命令式編程

以C、Java以及JS為代表的各類經典語言被統稱為命令式語言。具體來講，我們需要告知計算機應執行哪些基本指令，并以怎樣的順序加以執行。雖然在定義層面仍有一定爭議，但可以肯定的是命令式編程的定位較聲明式編程更低。憑借著JS作為基礎，任何了解經典編碼傳統的開發者都能夠在React當中找到熟悉的感常見。

Angular的優勢所在：更多附加HTML元素

HTML本身就是一種良好的標準，類似于本田旗下的思域制造車間。但如果大家希望能夠別出心裁得多來點花樣，則Angular也提供更多附加HTML元素以供選擇——類似于汽車發燒友會在自己的思域上增加氮氣加速系統或者加裝寬胎以增加肌肉感。Angular包含多項面向HTML標簽的附加屬性，其可最終由Angular解析并用以定義您的應用。大家并不需要實際編寫循環：您可以向標記當中添加ng-repeat指令，其它的工作則由Angular負責執行。即然決定創造一些新的成果，為什么不引入點更激動人心的附加元素？

React的優勢所在：純粹的JavaScript

React程序員喜歡強調他們所編寫的是純粹的JS代碼，其中不存在任何可能令其他人感到費解的關鍵字或者特殊功能。這意味著即使是編程新手，也僅僅需要學習JS的標準函數名及數據結構即可了解React代碼的內容。另外，由于不存在任何新型功能（及混淆），我們亦能夠更輕松地剝離其中部分代碼并將其復用于其它項目。

實現方式

Angular的優勢所在：新的實現途徑

學習Angular的過程往往會給人一種重生或者全新開始的感覺。Angular框架提供一個全新的世界，允許大家在這里創建各類精彩的應用程序。即使大家已經了解了HTML與JS，也必須學習如何使用Angular指令以正確完成預期的操作。雖然這種新的學習要求對部分人來講是種負擔，但大多數開發者仍然樂于稍微鍛煉自己的大腦以保持新鮮的工作心態。

React的優勢所在：更加傳統

React更像是一種對舊有道路的延續，而非對新途徑的開辟。如果大家了解JS，即可輕松利用其編寫更多JS代碼并順利實現預期功能。誠然，我們同樣需要了解React API及其數據的正確傳遞方式，但這一切對于熟知JS的程序員朋友而言絕不是什么問題——換言之，我們只需要適應略有不同的外觀、新的函數調用與API。

宏觀視角：為何不二者兼有？

Angular與React都是極好的方案選項——那么我們還為何非要進行選擇？二者只是在以不同的方式進行網頁組建，而絕不像物質與反物質那樣水火不容。舉例來說，ng-React就完全能夠在Angular當中使用React組件。按照這樣的思路作為指導，我們大可能針對應用程序中的各類需求做出更為具體的選擇。

***需要強調的是，Angular與React之間其實并沒有那么嚴重的分歧。真正的挑戰在于如何設計您的Web應用程序、規劃布局并決定每一次點擊所觸發的結果。真正復雜的是如何構思您的應用程序，并找到良好的用戶交互方式。因此，雖然Angular與React承擔起了在屏幕上顯示組件內容、收集輸入結果并將其發送回服務器等任務，但開發成果的最終效果仍然取決于您自己。

原文標題：Angular vs. React: An epic battle for developer mind share

原文作者：Peter Wayner 

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】