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

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

[[185680]]

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

定位

Angular的優(yōu)勢所在：作為一套完整框架

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

React的優(yōu)勢所在：“僅僅”只是一套資源庫

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

Angular的優(yōu)勢所在：其架構(gòu)可自上而下實現(xiàn)定制

二者之間另一項需要掌握的顯著差異在于，Angular已經(jīng)內(nèi)置有大量現(xiàn)成的架構(gòu)選項。大家的工作只是發(fā)現(xiàn)這些架構(gòu)并對其加以定制。Angular程序員從宏觀角度出發(fā)，向自己的設(shè)計模板中添加大量細(xì)節(jié)。如果各位希望使用標(biāo)準(zhǔn)的Angular結(jié)構(gòu)，則可直接享受由這套框架提供的各種便利。

React的優(yōu)勢所在：具備良好的靈活性以從零開始完成構(gòu)建

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

支持的語言

Angular的優(yōu)勢所在：TypeScript

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

React的優(yōu)勢所在：標(biāo)準(zhǔn) JavaScript

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

Angular的優(yōu)勢所在：HTML，混合一部分JavaScript

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

React的優(yōu)勢所在：JavaScript，混合一部分HTML

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

編程方式

Angular的優(yōu)勢所在：聲明式編程

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

React的優(yōu)勢所在：命令式編程

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

Angular的優(yōu)勢所在：更多附加HTML元素

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

React的優(yōu)勢所在：純粹的JavaScript

React程序員喜歡強(qiáng)調(diào)他們所編寫的是純粹的JS代碼，其中不存在任何可能令其他人感到費解的關(guān)鍵字或者特殊功能。這意味著即使是編程新手，也僅僅需要學(xué)習(xí)JS的標(biāo)準(zhǔn)函數(shù)名及數(shù)據(jù)結(jié)構(gòu)即可了解React代碼的內(nèi)容。另外，由于不存在任何新型功能（及混淆），我們亦能夠更輕松地剝離其中部分代碼并將其復(fù)用于其它項目。

實現(xiàn)方式

Angular的優(yōu)勢所在：新的實現(xiàn)途徑

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

React的優(yōu)勢所在：更加傳統(tǒng)

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

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

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

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

原文標(biāo)題：Angular vs. React: An epic battle for developer mind share

原文作者：Peter Wayner 

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