[[395673]]

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

ReactJS

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

React經常被用在媒體、產品轉化、零售、金融創新、以及人工知識等領域。目前，Facebook網站的頁面，instagram和WhatsApp應用都是以React為基礎構建的。它通過各種優秀的代碼庫和組件(apparatuses)為用戶帶來了更高的效率、更好的代碼穩定性、以及更令​​人滿意的搜索引擎優化(SEO)效果。

為什么選擇ReactJS?

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

1.卓越的更新能力

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

2.有效的SEO

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

3. ReactJS中的“段”

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

ReactJS的缺點

1.文檔是硬傷

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

2.更新得太快

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

3. JSX語法

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

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

AngularJS

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

為什么選擇AngularJS?

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

1.適用性

AngularJS的MVC架構十分清晰，彼此之間分工明確，且有極好的可擴展性。通過使用Angular，用戶能夠更專注于業務邏輯，而不必考慮對于HTML的影響?？梢姡伤峁┑墓δ芫哂械婉詈闲?，能夠與應用程序的其他部分相隔離，以方便用戶對某個對象進行輕易地修改或替換，而不會對其他對象產生影響。同時，在AngularJs中，路由意味著從一個視圖移動到另一視圖，因此非常方便、容易。

2.測試

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

3.用戶界面(UI)

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

AngularJS的缺點

1. 對SEO支持較差

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

2.反向切換問題

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

3. 與MVC高度關聯

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

ReactJS與AngularJS，到底該怎么選?

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

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

原文標題：ReactJS Vs. AngularJS，作者：Sidharth Jain

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