[[395673]]

【51CTO.com快譯】如今，隨著使用JavaScript的軟件應(yīng)用日漸普及，針對ReactJS與AngularJS這兩類開發(fā)技術(shù)的討論也是此起彼伏。下面，讓我們從各自的優(yōu)缺點、以及適用場景等方面，對它們進(jìn)行綜合比較吧。

ReactJS

作為一款JavaScript的開源代碼庫，ReactJS提供了一整套精益工程(lean engineering)和基于段(segment-based)的工作流程。它是由Facebook提供的、可用于改進(jìn)前端效果的專用語言，目前擁有體量大且活躍的社區(qū)。

React經(jīng)常被用在媒體、產(chǎn)品轉(zhuǎn)化、零售、金融創(chuàng)新、以及人工知識等領(lǐng)域。目前，F(xiàn)acebook網(wǎng)站的頁面，instagram和WhatsApp應(yīng)用都是以React為基礎(chǔ)構(gòu)建的。它通過各種優(yōu)秀的代碼庫和組件(apparatuses)為用戶帶來了更高的效率、更好的代碼穩(wěn)定性、以及更令​​人滿意的搜索引擎優(yōu)化(SEO)效果。

為什么選擇ReactJS?

如下三方面因素往往是促使用戶選用ReactJS的主要原因：

1.卓越的更新能力

ReactJS擁有自己的虛擬文檔對象模型(Document Object Model，DOM)。通過管理DOM中的各項變化，它能夠及時更新其DOM樹，并可提供良好的顯示效果。也就是說，Reactjs只會在調(diào)用setState的時候，才去優(yōu)先更新虛擬DOM，之后再去與實際的DOM相比較，最后按需更新實際的DOM。顯然，這既減少了DOM的更新頻率，又減少了其更新的內(nèi)容。相對于機械地分配DOM的方式，它能夠更好、更可靠地管理和恢復(fù)DOM。

2.有效的SEO

通常，JavaScript框架會面臨一個巨大的問題是：在升級之后，Web搜索工具往往很難找到大量JavaScript類型的應(yīng)用。而ReactJS對此進(jìn)行了大幅優(yōu)化，可方便用戶網(wǎng)站去捕獲、吸引和留存訪客。

3. ReactJS中的“段”

ReactJS通過影子(Shadow)DOM 的方式，在文檔被渲染時插入子DOM。它與主文檔的DOM是分離的，因此不會影響到主DOM樹的內(nèi)容。而作為一個可調(diào)整的組件，這樣的獨立段擁有各種靈活性。例如：由于支持代碼的重用，因此經(jīng)驗豐富的Web開發(fā)人員可以在開發(fā)項目中自由地重用其代碼組件，從而減少花費在項目上的重復(fù)時間。此外，React.Js擁有下載(downloading)數(shù)據(jù)流，可讓那些較大的數(shù)據(jù)塊在不受任何影響的情況下，被無縫且高效地輸出。

ReactJS的缺點

1.文檔是硬傷

不可否認(rèn)，React的創(chuàng)新與迭代速度是有目共睹的。但是這卻和它滯后的文檔形成了鮮明的反差。也許是React的開發(fā)人員過于追求性能和功能上的升級，而拖累的其文檔的跟進(jìn)工作。至少對于ReactJS的用戶而言，他們必須自行摸索或撰寫相關(guān)的指南。

2.更新得太快

凡事都有利弊。React在功能上不斷得以更新的狀態(tài)，反而不一定會讓某些用戶買賬。對于他們而言，也許需要的只是一個穩(wěn)定的版本，而不必持續(xù)關(guān)注其是否又更新了什么新的特性，是否需要及時跟進(jìn)學(xué)習(xí)。

3. JSX語法

JSX是React的一個核心組成部分，它使用XML標(biāo)記的方式，去直接聲明界面，以方便界面組件之間的互相嵌套。作為一種JS的語句結(jié)構(gòu)，用戶可以使用HTML語句，將HTML標(biāo)簽傳送給子組件。與XML語言類似，它是一種帶有屬性樹結(jié)構(gòu)(即DOM結(jié)構(gòu))的語法，其目的不是為了在瀏覽器引擎中實現(xiàn)，而是要通過各種編譯器，將標(biāo)簽編譯成標(biāo)準(zhǔn)的JS語言。

不過，在實際應(yīng)用中，用戶可以完全不使用JSX語法，而只使用JS語法去實現(xiàn)。因此，在某種程度上說，JSX的使用只是為了讓代碼便于閱讀而已。

AngularJS

作為一種受到TypeScript約束的開源式前端架構(gòu)，AngularJS是從基于JavaScript的Web框架改進(jìn)而來。通過AngularJS，您可以讓應(yīng)用程序根據(jù)模型-視圖-控制器(MVC)的模型，將應(yīng)用程序的數(shù)據(jù)模型、表示信息、以及控制信息相互分隔。AngularJS的顯著優(yōu)點包括：易于測試、易于擴展、易于調(diào)整、以及可直接用于工程設(shè)計等方面。總的來說，AngularJS通常被用于提供實時視頻服務(wù)的應(yīng)用程序中，對用戶上傳內(nèi)容的分析與評論網(wǎng)站等應(yīng)用場景中。

為什么選擇AngularJS?

與ReactJS類似，如下三方面因素往往是促使用戶選用AngularJS的主要原因：

1.適用性

AngularJS的MVC架構(gòu)十分清晰，彼此之間分工明確，且有極好的可擴展性。通過使用Angular，用戶能夠更專注于業(yè)務(wù)邏輯，而不必考慮對于HTML的影響。可見，由它提供的功能具有低耦合性，能夠與應(yīng)用程序的其他部分相隔離，以方便用戶對某個對象進(jìn)行輕易地修改或替換，而不會對其他對象產(chǎn)生影響。同時，在AngularJs中，路由意味著從一個視圖移動到另一視圖，因此非常方便、容易。

2.測試

AngularJS可以通過依賴注入(Dependency Injection，DI)，連接到各種控制器(controller)上，以開展諸如單元測試、中途測試，以及端到端測試。其中，AngularJS的單元測試框架名為Karma。它是通過將模擬信息注入到監(jiān)管器(regulator)中來實現(xiàn)測試目的。

3.用戶界面(UI)

鑒于HTML是一種信息性且易讀懂的語言，AngularJS使用HTML來描繪Web應(yīng)用程序的UI。您可以在HTML中使用各種功能性的特征，來描述哪部分將會使用哪個調(diào)節(jié)器。而通過管理各種條件，AngularJS不但增強了用戶與Web之間的互動，而且準(zhǔn)確地描述了用戶的真實需求。同時，在AngularJs中，您只需編寫很少的代碼即可實現(xiàn)DOM的各項操作。

AngularJS的缺點

1. 對SEO支持較差

有過開發(fā)經(jīng)驗的用戶都知道，在使用AngularJS將Web程序從以PHP、Spring、以及MVC等服務(wù)器端的渲染方式，改為前端渲染加上Ajax的，通過Restful API來請求數(shù)據(jù)的純客戶端模式后，搜索引擎往往無法從頁面上的數(shù)據(jù)中爬取相應(yīng)的搜索索引。這也就是為何單頁面應(yīng)用程序需要使用JavaScript，去定期更新內(nèi)容和元標(biāo)簽(Meta labels)的原因。

2.反向切換問題

設(shè)計人員無法直接從AngularJS切換到Angular。在Angular的文檔中，有一整段內(nèi)容清晰地描述了，所有能夠處理轉(zhuǎn)換的方式，唯獨沒有提到從AngularJS切換到Angular。

3. 與MVC高度關(guān)聯(lián)

如前所述，AngularJS是一款遵循著MVC模型的框架。因此，如果您有著前后端交互的開發(fā)經(jīng)驗，就能很容易地理解MVC的相關(guān)實踐;相反，如果您僅具備純前端開發(fā)的知識，則很難理解MVC以及Angular。

ReactJS與AngularJS，到底該怎么選?

我們可能面對的開發(fā)項目往往是五花八門的。它們有的注重的是功能上的多樣性，有的在意的是向下兼容性，有的需要有強大的可擴展性，而有的則應(yīng)該具有高效的性能。那么，我們該如何在ReactJS與AngularJS之間做出明智的選擇呢?下面是我的一些建議：

• 如果您習(xí)慣了C#和Java等傳統(tǒng)且明確的編程方式，而且精通CSS、HTML和JavaScript等編程語言，那么AngularJS將會是您的正確決定。
• 如果您需要制作的應(yīng)用程序，可能會被用到游戲等快速運行環(huán)境中，或是需要進(jìn)行持續(xù)改進(jìn)，亦或需要在各種不同的部分之間進(jìn)行狀態(tài)的轉(zhuǎn)換，那么ReactJS會更加適合一些。
• Angular的在功能上更為強大。它不但能夠?qū)τ脩籼峁┤轿坏闹С?，而且能夠為前端的改進(jìn)提供豐富幫助和設(shè)備集支持。不過，其發(fā)起方—Google曾在社區(qū)里表示：目前，該項目已不再推進(jìn)，他們會致力于將AngularJS逐漸過渡為Angular 2+(https://dzone.com/articles/angular-2-vs-react)。
• React已經(jīng)在本領(lǐng)域積累了豐富的經(jīng)驗，并對本社區(qū)做出了不少承諾。它通過推行一種所謂“輕量級”的方法，來方便用戶快速上手，而無需投入更多的學(xué)習(xí)精力。
• 就開發(fā)速度和熟練程度而言，AngularJS憑借著其卓越的CLI，不但能夠加快工作區(qū)和配置工作的改進(jìn)速度，還能夠通過單行代碼(one-line codes)的方式，構(gòu)建出不同的段，以及包含了廣泛內(nèi)容組合的簡潔代碼。
• 在使用外部代碼庫時，React的速度和效率可能會受到影響。這就迫使ReactJS開發(fā)人員事先選好恰當(dāng)?shù)脑O(shè)計組件。
• 由于采用的是虛擬的DOM，因此在ReactJS中無論DOM樹的整體還是部分被改變或調(diào)整，樹的信息結(jié)構(gòu)會按需被更新。也就是說，開發(fā)者對更改的跟蹤和刷新，并不會影響到樹的其他部分。
• 而使用真實DOM的AngularJS，則需要查找和識別到底是哪些部分需要更改。當(dāng)然，AngularJS在識別和執(zhí)行更改時，其效率并不會受到限制。

原文標(biāo)題：ReactJS Vs. AngularJS，作者：Sidharth Jain

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