Angular 2對 React:究竟孰優孰劣?

Itay Herskovits發表於2016-05-06

Angular 2與React的選擇其實只是一種風格偏好。React專注於渲染速度且能夠在客戶端或原生應用內處理複雜的UI設計,而Angular 2則更具開發普適性。它既能夠引導我們逐步構建自己的應用,同時也提供一定的表現力及可複用UI設計機制。

ReactJS快速回顧

ReactJS是一套JavaScript Web庫,由Facebook打造而成且主要用於構建高效能及響應式使用者介面。React負責解決其它JavaScript框架所面對的一大常見難題,即對大規模資料集的處理。能夠使用虛擬DOM並在發生變更時利用補丁安裝機制只對DOM中的dirty部分進行重新渲染,React得以實現遠超其它框架的速度表現。

Angular 2滿載強化機制

Angular 2相較於Angular 1迎來一系列強化。首先,Angular 2高度關注建立可複用的前端元件。儘管Angular 1在一定程度上也能實現同樣的效果,但該框架的新版本解決了大量影響利用性的難題,例如對$scope與控制器的依賴性。其指令亦得到顯著簡化,使得Angular 2程式碼較前代更易於輸入及閱讀。Angular 2還考慮到與TypeScript的協作需求,消除了大量用於保證型別安全的程式碼。再加上眾多效能與框架改進,Angular 2確實給人煥然一新之感。

注意事項

值得強調的是,React與Angular(任意版本)之間的比較其實並不對等。Angular是一套前端框架,負責為應用客戶端提供完整架構,並允許我們將客戶端程式碼作為強大的功能套件。而React則是一套庫,其提供的功能並不豐富——其主要作用是充當完整專案的組成部分,而非主導整體程式碼結構。當然,二者之間也存在著相當程度的相似性,而這也正是此次比較存在的理由所在。

架構

如上所述,React是一套用於建立響應式模板的JavaScript庫。因此,React並不真正關注架構——它更像是一款作用於應用內大型客戶端程式碼中的工具。

另一方面,Angular 2則以框架的角色指明瞭前端程式碼的“正確設計方式”。其專注於元件與型別安全,允許大家將注意力集中在程式碼本身,並在強調複用性與封裝的同時建立物件導向前端。

從這個角度來看,React與Angular 2實在沒什麼可比性——React適合那些希望以更為靈活的方式構建程式碼架構的朋友,而Angular 2則屬於應用前端的整體架構選項。因此,誰能更好地適應應用設計模式的需求,誰就將在這一環節中勝出。

模板

兩套方案皆提供模板工具,但採用的模板管理方式則區別很大。React以JSX為基礎構建模板物件,大家可以構建內聯模板並將所有模板程式碼進行集中儲存。Angular 2則以物理方式將用於驅動應用的JavaScript與作為渲染物件的HTML加以分離。

不過由於更關注元件化且能夠與TypeScript順暢協作,因此大家往往能夠憑藉Angular 1.x實現更出色的複用性與靈活性。總而言之,在選定了理想的模式之後,具體選擇將由美學與基本功能決定——React模板更緊湊且渲染速度更快,而Angular 2元件則更具複用性,並通過無處不在的雙向資料繫結簡化應用物件管理流程。

原生支援

Angular 2與React有著不同的底層目標,這也意味著二者在支援原生裝置程式碼時有著截然不同的表現。Angular 2團隊決定專注於框架本身,並將裝置可執行程式碼方面的工作交給其它供應商。而React生態系統則推出了React Native——這套框架能夠將React程式碼翻譯為原生應用體驗,從而帶來遠超傳統混合型Web應用的效能表現。

再次強調,選擇“正確的”方案才是理想的思維方式。如果大家希望自己的移動應用體驗快如閃電,那麼React將直接勝出。但如果大家希望採用元件化程度更高的應用架構,同時願意犧牲部分效能以提升程式碼結構一致性,那麼Angular 2與Ionic等框架的結合則將成為正確答案。

總結

Angular 2與React的選擇其實只是一種風格偏好。React專注於渲染速度且能夠在客戶端或原生應用內處理複雜的UI設計,而Angular 2則更具開發普適性。它既能夠引導我們逐步構建自己的應用,同時也提供一定的表現力及可複用UI設計機制。

最終決定取決於應用設計目標及開發團隊的普遍意見。大型複雜使用者介面外加出色效能是React的王牌,開發流程與程式碼架構則是Angular 2的主場。總之,只要能夠充分考量實際需求與定位,大家一定能做出正確的選擇。

相關文章