比較React與Angular 2.0，探討二者各自的優(yōu)勢(shì)與短板。

[[166041]]

ReactJS快速回顧

ReactJS是一套JavaScript Web庫，由Facebook打造而成且主要用于構(gòu)建高性能及響應(yīng)式用戶界面。React負(fù)責(zé)解決其它JavaScript框架所面對(duì)的一大常見難題，即對(duì)大規(guī)模數(shù)據(jù)集的處理。能夠使用虛擬DOM并在發(fā)生變更時(shí)利用補(bǔ)丁安裝機(jī)制只對(duì)DOM中的dirty部分進(jìn)行重新渲染，React得以實(shí)現(xiàn)遠(yuǎn)超其它框架的速度表現(xiàn)。

Angular 2滿載強(qiáng)化機(jī)制

Angular 2相較于Angular 1迎來一系列強(qiáng)化。首先，Angular 2高度關(guān)注創(chuàng)建可復(fù)用的前端組件。盡管Angular 1在一定程度上也能實(shí)現(xiàn)同樣的效果，但該框架的新版本解決了大量影響利用性的難題，例如對(duì)$scope與控制器的依賴性。其指令亦得到顯著簡化，使得Angular 2代碼較前代更易于輸入及閱讀。Angular 2還考慮到與TypeScript的協(xié)作需求，消除了大量用于保證類型安全的代碼。再加上眾多性能與框架改進(jìn)，Angular 2確實(shí)給人煥然一新之感。

注意事項(xiàng)

值得強(qiáng)調(diào)的是，React與Angular（任意版本）之間的比較其實(shí)并不對(duì)等。Angular是一套前端框架，負(fù)責(zé)為應(yīng)用客戶端提供完整架構(gòu)，并允許我們將客戶端代碼作為強(qiáng)大的功能套件。而React則是一套庫，其提供的功能并不豐富——其主要作用是充當(dāng)完整項(xiàng)目的組成部分，而非主導(dǎo)整體代碼結(jié)構(gòu)。當(dāng)然，二者之間也存在著相當(dāng)程度的相似性，而這也正是此次比較存在的理由所在。

架構(gòu)

如上所述，React是一套用于創(chuàng)建響應(yīng)式模板的JavaScript庫。因此，React并不真正關(guān)注架構(gòu)——它更像是一款作用于應(yīng)用內(nèi)大型客戶端代碼中的工具。

另一方面，Angular 2則以框架的角色指明了前端代碼的“正確設(shè)計(jì)方式”。其專注于組件與類型安全，允許大家將注意力集中在代碼本身，并在強(qiáng)調(diào)復(fù)用性與封裝的同時(shí)建立面向?qū)ο笄岸恕?/p>

從這個(gè)角度來看，React與Angular 2實(shí)在沒什么可比性——React適合那些希望以更為靈活的方式構(gòu)建代碼架構(gòu)的朋友，而Angular 2則屬于應(yīng)用前端的整體架構(gòu)選項(xiàng)。因此，誰能更好地適應(yīng)應(yīng)用設(shè)計(jì)模式的需求，誰就將在這一環(huán)節(jié)中勝出。

模板

兩套方案皆提供模板工具，但采用的模板管理方式則區(qū)別很大。React以JSX為基礎(chǔ)構(gòu)建模板對(duì)象，大家可以構(gòu)建內(nèi)聯(lián)模板并將所有模板代碼進(jìn)行集中保存。Angular 2則以物理方式將用于驅(qū)動(dòng)應(yīng)用的JavaScript與作為渲染對(duì)象的HTML加以分離。

不過由于更關(guān)注組件化且能夠與TypeScript順暢協(xié)作，因此大家往往能夠憑借Angular 1.x實(shí)現(xiàn)更出色的復(fù)用性與靈活性?？偠灾谶x定了理想的模式之后，具體選擇將由美學(xué)與基本功能決定——React模板更緊湊且渲染速度更快，而Angular 2組件則更具復(fù)用性，并通過無處不在的雙向數(shù)據(jù)綁定簡化應(yīng)用對(duì)象管理流程。

原生支持

Angular 2與React有著不同的底層目標(biāo)，這也意味著二者在支持原生設(shè)備代碼時(shí)有著截然不同的表現(xiàn)。Angular 2團(tuán)隊(duì)決定專注于框架本身，并將設(shè)備可運(yùn)行代碼方面的工作交給其它供應(yīng)商。而React生態(tài)系統(tǒng)則推出了React Native——這套框架能夠?qū)eact代碼翻譯為原生應(yīng)用體驗(yàn)，從而帶來遠(yuǎn)超傳統(tǒng)混合型Web應(yīng)用的性能表現(xiàn)。

再次強(qiáng)調(diào)，選擇“正確的”方案才是理想的思維方式。如果大家希望自己的移動(dòng)應(yīng)用體驗(yàn)快如閃電，那么React將直接勝出。但如果大家希望采用組件化程度更高的應(yīng)用架構(gòu)，同時(shí)愿意犧牲部分性能以提升代碼結(jié)構(gòu)一致性，那么Angular 2與Ionic等框架的結(jié)合則將成為正確答案。

總結(jié)

Angular 2與React的選擇其實(shí)只是一種風(fēng)格偏好。React專注于渲染速度且能夠在客戶端或原生應(yīng)用內(nèi)處理復(fù)雜的UI設(shè)計(jì)，而Angular 2則更具開發(fā)普適性。它既能夠引導(dǎo)我們逐步構(gòu)建自己的應(yīng)用，同時(shí)也提供一定的表現(xiàn)力及可復(fù)用UI設(shè)計(jì)機(jī)制。

最終決定取決于應(yīng)用設(shè)計(jì)目標(biāo)及開發(fā)團(tuán)隊(duì)的普遍意見。大型復(fù)雜用戶界面外加出色性能是React的王牌，開發(fā)流程與代碼架構(gòu)則是Angular 2的主場?？傊?，只要能夠充分考量實(shí)際需求與定位，大家一定能做出正確的選擇。

原文標(biāo)題：Angular 2 vs. React

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