React正在殺死Angular嗎？
共 6732字，需瀏覽 14分鐘
·
2024-04-24 09:20
點擊上方 前端Q，關注公眾號
回復加群，加入前端Q技術交流群
這是一個老生常談的爭論（在技術時代，這是在所難免的）：Angular 對戰(zhàn) React。這就像“先有雞還是先有蛋”的難題，不過這個問題是針對 Web 開發(fā)人員的。在過去的幾年間，如果你曾經(jīng)出現(xiàn)在開發(fā)人員的咖啡機旁或者參加過技術論壇，那么你可能會聽到關于哪個框架才是霸主的竊竊私語、爭論，甚至是偶爾出現(xiàn)的鍵盤對決。
現(xiàn)在，我們明確一下對戰(zhàn)的雙方。一邊是經(jīng)驗豐富的戰(zhàn)士 Angular。它經(jīng)歷過風雨，見證了潮流的起起落落，并擁有炫酷的特性。而另一邊則是 React，它是年輕的神童。它來到這個世界，驚艷了所有人。隨著它的迅速走紅，有人開始懷疑 React 是否就是那個讓老將 Angular 望塵莫及的后起之秀。有傳言說，React 花哨的行為正在侵蝕 Angular 穩(wěn)扎穩(wěn)打的基石。
但是，對于 Angular 來說，React 真的是歌利亞的大衛(wèi)嗎（按照傳說，歌利亞是身材巨大，擁有無窮力量的巨人，最后牧童大衛(wèi)用投石彈弓打中歌利亞的腦袋，并將其殺死，日后這個牧童成為了著名的大衛(wèi)王——譯者注）？或者這只是一個技術神話，就像“重啟能夠解決 99% 的 IT 問題一樣”？（好吧，這個說法也許就是真的）請繼續(xù)關注我們對這場爭論的深入探討，一起揭開炒作背后的真相！
我們將時光撥回到 2010 年，當時，jQuery 是最酷的東西，世界各地的開發(fā)人員都在與臭名昭著的意大利面條式代碼抗爭。就像超級英雄突然從陰影中現(xiàn)身一樣，谷歌為我們引入了 AngularJS。AngularJS 擁有雙向數(shù)據(jù)綁定和依賴注入等有趣的功能，許多開發(fā)人員自己都沒有意識到這就是他們需要的英雄。將時間快進一些，AngularJS 長大了，也去掉了“JS”，變成了威嚴的“Angular”。就像我們最喜歡的電影系列一樣，它會不斷推出續(xù)集（也就是技術術語中的版本），讓我們目不暇接！
現(xiàn)在，我們把時間推移到 2013 年。就在 Angular 掀起熱潮的時候，一個新的玩家進入了這個領域。從 Facebook 天才實驗室直接走出來的 React 突然登上了舞臺。但 React 并不是普通的初出茅廬者，它就像一個新生，第一天就在才藝表演上讓所有人驚嘆不已。憑借其創(chuàng)新性的虛擬 DOM 和基于組件架構的全新用戶界面，React 很快成為整個領域的焦點。它簡單易用的特性和靈活性使其備受青睞，很快就從新生兒變成了舞會之王！
還記得小時候玩過的樂高積木嗎？只要把五顏六色的積木拼接在一起，你就能搭建出任何東西，從城堡到宇宙飛船。React 基于組件的架構就像是 Web 開發(fā)中的樂高積木。它允許開發(fā)人員將 UI 分解成可重用的組件，使得構建和維護復雜的應用程序就像是玩兒心愛的積木一樣有趣和簡單。最棒的一點是什么呢？那就是如果你需要更換一個組件，你不必拆除整個城堡。
在 Web 開發(fā)領域，速度是最重要的。React 的虛擬 DOM 就像是這個領域的超級英雄。React 不會更新整個頁面，而是聰明地只更新發(fā)生變化的部分，因此它的速度非?？?。這就好比你有一個私人助理，他知道你把鑰匙落到了什么地方，這樣你就不用把整個房子翻個底朝天了。
React 就像是一把方便的瑞士軍刀，你希望每次露營都帶上它。如果你需要與不同的庫集成？React 會助你一臂之力。無論你是將它與 Redux 搭配進行狀態(tài)管理，還是與 Axios 搭配進行 HTTP 請求，React 都能很好地與其他庫配合，確保你具備探險所需的所有工具。
每個優(yōu)秀的工具背后都有一個更強大的社區(qū)。React 也不例外。React 社區(qū)擁有一支由開發(fā)者、愛好者和向導組成的大軍，這可以說是一座金礦。從教程到第三方庫，如果你有問題，很可能早就已經(jīng)有人回答過了。這就像擁有一個全天候的技術支持團隊，不過這要比它酷得多。
想象一下，如果你入住一個度假勝地，從 SPA 中心到美食餐廳，一切都觸手可及。這就是 Angular，它不僅僅是一個框架，還是一個完整的生態(tài)系統(tǒng)，具備大量可開箱即用的工具。無需尋找任何第三方庫，Angular 為你提供了開發(fā)過程中可能需要的一切。
還記得在童話故事里那些能夠同時顯示現(xiàn)在和未來的魔鏡嗎？Angular 的雙向數(shù)據(jù)綁定與之頗有幾分神似。它在模板（視圖）和組件（模型）之間搭起了一座橋梁，確保其中的任何一項發(fā)生變化都能反映到另外一項中。這就像有一個私人神仙教母，能夠確保你的舞會禮服（在本例中，也就是用戶界面）始終保持完好無損。
你可以將 Angular 的依賴注入視為代碼中的近藤麻理惠（《怦然心動的人生整理魔法》一書的作者，以整理家庭內務而著名——譯者注）。它能確保每段代碼都處在自己恰當?shù)奈恢蒙希瑥亩鰪娔K化和可重新性。有了 Angular 的依賴注入，組件就能輕松獲取它們所需的服務，讓你的代碼庫變得整潔且令人愉悅。
我們都有一個對語法很挑剔的朋友，對吧？對于 Angular 來說，TypeScript 就是這位朋友。通過提供強類型，TypeScript 可以確保你在編譯時就能捕獲到那些討厭的錯誤，而不是在用戶試圖查看購物車的時候。這就像為你的代碼配備了一個內置校對員，確保一切都處于最佳狀態(tài)。
如果你曾經(jīng)希望有一根魔法棒可以簡化你的開發(fā)過程，那就來看看 Angular CLI 吧。借助其強大的命令，你可以創(chuàng)建項目、添加特性，甚至只需揮揮手（或者更確切地說，一個簡單的命令）就能運行測試。這就像在終端里有一個精靈，隨時準備實現(xiàn)你的開發(fā)愿望。
就其本質而言，React 就像一位信奉極簡主義的朋友。他只有五件衣服，但是每件衣服的搭配都非常漂亮。它是一個庫，只關注視圖層，在項目的其他方面，允許你去自由探險。
而 Angular 則像是一位擁有復式衣帽間和各種小玩意兒的朋友。它是一個完整的框架，提供了開箱即用的路由、狀態(tài)管理、HTTP 客戶端等解決方案。它包羅萬象，能夠為你帶來連貫的開發(fā)體驗。
React 因其簡單易用而受到廣泛稱贊。它采用了基于組件的方式，就像在初學者賽道上練習滑雪，因此深受希望涉足 web 開發(fā)的初學者的喜愛。
Angular 的綜合性更像是挑戰(zhàn)頂級難度的滑雪道。一開始，它可能令人望而生畏，尤其是其獨特的術語和理念，但是一旦你掌握了竅門，你就能像專業(yè)人士那樣應對 web 開發(fā)的挑戰(zhàn)了。
隨著 React 的廣泛采用，它成為了一個熱鬧的社區(qū)，就像鄉(xiāng)村中的集市那樣。每個需求都有一個攤位，無論是使用 Redux 進行狀態(tài)管理，還是使用 React-Router 進行路由選擇。社區(qū)充滿了活力，擁有大量的資源、插件和第三方庫。
有谷歌強大支持的 Angular 則像一個盛大的狂歡節(jié)。它擁有龐大的官方庫、豐富的工具和經(jīng)受了考驗的社區(qū)，為成熟而廣闊的生態(tài)系統(tǒng)做出了貢獻。
在性能方面，React 和 Angular 就像精英速滑運動員，各有千秋。React 采用虛擬 DOM，確保了高效更新，使其能夠快速高效。而 Angular 則通過預先編譯（AOT）和變更探測，確保始終能夠領先一步，提供一流的性能。
首先，我們看一下統(tǒng)計數(shù)據(jù)。雖然受歡迎程度并不代表一切 (只要問問流量電影的主角就知道了)，但它確實能夠讓我們了解開發(fā)者領域的趨勢。
React：自誕生以來，React 便迅速崛起。在 npm 上每周有數(shù)百萬的下載量，很明顯這個庫已經(jīng)打動了全世界的開發(fā)者。這不僅僅是數(shù)量的問題，用 React 構建的項目和應用程序的質量也令人印象深刻。
Angular：Angular 在受歡迎程度方面也不遜色，一直保持著自己的地位。憑借穩(wěn)定的下載量和龐大的社區(qū)，Angular 的綜合性顯然引起了許多人的共鳴。它就像一個可靠的朋友，當你需要搬家時，盡可以打電話給他，它可能并不新穎奪目，但它能完成任務。
大聯(lián)盟：知名代言人
現(xiàn)在，我們來談談代言人。就像運動員有自己的贊助商一樣，框架和庫也有自己的知名用戶。在這個領域，React 和 Angular 都有一些重量級的用戶。
React：從社交媒體巨頭 Facebook（畢竟是他們創(chuàng)造了 React）到流媒體巨頭 Netflix，許多科技大公司都因 React 的靈活性和性能而采用了它。不僅是科技界，各行各業(yè)的公司，無論是酒店業(yè)的 Airbnb 還是媒體業(yè)的《紐約時報》，都搭上了 React 的列車。
Angular：Angular 背后的策劃者谷歌在其多個平臺上都使用了 Angular，這充分說明了 Angular 的可靠性。但它的粉絲俱樂部并不止于此。像福布斯、寶馬，甚至美國國家航空航天局（NASA，沒錯，就是太空人?。┑裙径荚谄鋽?shù)字領域中使用了 Angular。
影響選擇 React 和 Angular 的因素
這是一個古老的難題，到底是該選擇 React 還是 Angular？這就像在巧克力和香草、海灘度假和登山度假之間做出選擇一樣。兩者各有其長處，但最佳選擇往往取決于具體的情況。讓我們來分析一下哪些因素可能會促使我們傾向于選擇其中的某一個。
React：我們可以把 React 想象成時髦的定制西裝。它非常適合需要特定功能而不需要額外裝飾的項目。基于組件的特性使其支持高度定制，因此非常適合需要量身定制的獨特項目。
Angular：而 Angular 就像一套成衣。它配備了你所需要的一切。對于需要內置功能的綜合解決方案的項目，Angular 可能是你的首選。
團隊專長
團隊的專業(yè)知識會在很大程度上影響你的選擇。如果你的團隊精通 React 并已使用多年，那么堅持使用自己熟悉的產(chǎn)品可能會更有合理。反之，如果你的團隊中有 Angular 專家，又何必冒險進入陌生的領域呢？
在可維護性方面來看，React 和 Angular 都有各自的特點。請考慮項目的長期目標。你需要易于擴展的產(chǎn)品嗎？是否需要定期更新？React 的庫方式提供了靈活性，而 Angular 包羅萬象的特性可能會簡化更新和擴展。
在結束這次啟蒙之旅的時候，讓我們來澄清一下。React 并沒有“殺死”Angular，而 Angular 也沒有將 React 推向被遺忘的境地。它們就像兩位才華橫溢的藝術家，各有其風格和天賦。
在 React 和 Angular 之間做出選擇，并不是要追趕最新的潮流或選擇“哪一個更好”。而是了解自己的需求，評估自己的資源，然后做出明智的決定。畢竟，最好的工具是能完成工作的工具，而不是炒作最多的工具。
原文鏈接：
https://blog.stackademic.com/is-react-killing-angular-the-truth-behind-the-hype-6294e2cf6688
聲明：本文為 InfoQ 翻譯整理，未經(jīng)許可禁止轉載
往期推薦
最后
歡迎加我微信，拉你進技術群，長期交流學習...
歡迎關注「前端Q」,認真學前端，做個專業(yè)的技術人...