有些事情發生了變化，另一些發生了變化。 最新的是什么?

> Photo by the author.

數量眾多的前端框架會讓您大吃一驚。 框架種類繁多：反應式，聲明式，功能性，MVC，MVVM，OOP等。 但是最受歡迎的仍然是React和Angular。 截至2020年，它們之間有什么區別?

什么是React?

React是一個由Facebook開發和開源的UI庫。 我要強調的是它是這里的圖書館。 稍后我將解釋為什么這很重要。

React是目前最受歡迎的UI庫，它為數千個網站提供支持。 React使用JavaScript作為主要語言，可以在許多平臺上運行，包括Web，Android，iOS甚至VR。

什么是Angular?

Angular是由Google開發和開源的前端框架。 馬上，您會發現它們根本不同：React是一個庫，而Angular是一個框架。 在上一節中，我將解釋這兩個術語之間的區別。

Angular使用TypeScript作為其主要語言，并且還能夠在多種平臺上運行。 Angular的架構采用MVC(模型-視圖-控制器)模式，該模式被認為是行業標準之一。 那么，React和Angular之間有什么相似之處?

它們如何相似?

首先，React和Angular都產生相同的可交付成果：一個前端應用程序，無論是網站，應用程序還是介于兩者之間的東西。 兩者都在后臺使用JavaScript，并充分利用了NPM(節點程序包管理器)，這使得共享重復代碼非常容易。

社區

這兩種產品背后都有龐大的社區。 由于React和Angular是開源的，因此許多公司都依賴它們并試圖使其保持運行和更新，因此使用它們時您會感到相對安全。 由于文檔不完整，缺少關于Stack Overflow的幫助或第三方庫的可用性，您不太可能會遇到很多問題。

建筑

這兩種解決方案都提供了與MVC相似的體系結構，盡管存在一些誤解(正如我將在上一節中所述)。 另外，Angular和React都允許您使用TypeScript進行開發，但是只有React支持純JavaScript。 最后，這兩個都是基于組件的，這與其余的UI框架(Vue，Flutter等)非常一致。

它們有何不同?

好家伙。 在這里，我們還有很多要點-我認為這就是您閱讀本文的原因。 因此，讓我們開始吧。

庫與框架

如前所述，React是一個庫，Angular是一個框架。 簡而言之，庫可以解決問題，而框架則可以解決問題。 多數情況下，框架由庫組成。 這實際上是什么意思：React非常輕巧，快速并且易于學習，但是它本身并不會做任何事情(除了繪制一些按鈕之外)。 您將需要用于路由，API連接，狀態管理等的第三方庫。另一方面，Angular具有此庫，并且內置得多。 Angular雖然較難學習，但為您提供了不錯的功能，例如路由，表單生成，依賴項注入等。 在MVC中，React只占部分，但是Angular就是整個。

常規DOM與虛擬DOM

在屏幕上渲染內容時，Angular和React使用略有不同的方法。 Angular的行為就像您期望的那樣：在每次重新渲染時，它都會從頭開始構建一個新的DOM并將其替換在瀏覽器中。 另一方面，React嘗試盡可能重用。 它計算將瀏覽器的DOM帶到React的內部虛擬DOM并執行它們所需的最少操作集。 這將帶來巨大的性能提升，一旦并發模式推出，這一點將更加明顯。

可擴展性

這是Angular的強項之一。 由于Angular實施的架構更加復雜，因此擴展起來更容易。 在React中，太多的東西放在開發者的肩膀上，并且搞砸起來要容易得多。 但是，直到代碼庫足夠大時，您才會注意到它。 當然，可以通過應用"干凈架構"原則來減輕這種情況，但是您需要意識到這一點。

移動開發

React曾經是該部門的明顯贏家，但現在還不那么明顯。 React Native允許您使用React編寫本機應用程序，NativeScript允許您使用Angular和Vue編寫本機應用程序。 兩者都提供比較的性能和功能集。 區別在于平臺訪問。 如果要訪問React Native中的某些本機API方法，則必須使用Kotlin或Swift編寫一個橋。 在本機腳本上，您可以直接從JS代碼訪問本機方法。 另一方面，React Native具有更大的社區，這是無價的資產。 但是，如果性能是重中之重，則應考慮使用Flutter。

結束語

感謝您的閱讀。 我希望您現在對React和Angular之間的區別有所了解。 如有任何疑問，請告訴我。