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

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

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

定位

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

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

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

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

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

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

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

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

支持的語(yǔ)言

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

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

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

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

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

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

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

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

編程方式

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

一部分編程語(yǔ)言專家認(rèn)為，“聲明性”語(yǔ)言使得程序員能夠表達(dá)其所需要實(shí)現(xiàn)的效果，而其余工作則由語(yǔ)言本身負(fù)責(zé)完成。在HTML情況之下，這意味著程序員能夠使用各類標(biāo)簽（例如

,

,

）指定文檔中的各個(gè)部分（例如標(biāo)題、列表、段落），并由瀏覽器計(jì)算并得出最終結(jié)果，從而在屏幕上給出正確的顯示內(nèi)容。

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

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

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

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

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

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

實(shí)現(xiàn)方式

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

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

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

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

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

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

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

原文作者：Peter Wayner


網(wǎng)站題目：Angular對(duì)React：一場(chǎng)關(guān)于Web開(kāi)發(fā)者支持率的史詩(shī)對(duì)決
文章出自：http://www.5511xx.com/article/cdhidjo.html