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

> Photo by the author.

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

什么是React?

React是一個(gè)由Facebook開(kāi)發(fā)和開(kāi)源的UI庫(kù)。 我要強(qiáng)調(diào)的是它是這里的圖書(shū)館。 稍后我將解釋為什么這很重要。

React是目前最受歡迎的UI庫(kù)，它為數(shù)千個(gè)網(wǎng)站提供支持。 React使用JavaScript作為主要語(yǔ)言，可以在許多平臺(tái)上運(yùn)行，包括Web，Android，iOS甚至VR。

什么是Angular?

Angular是由Google開(kāi)發(fā)和開(kāi)源的前端框架。 馬上，您會(huì)發(fā)現(xiàn)它們根本不同：React是一個(gè)庫(kù)，而Angular是一個(gè)框架。 在上一節(jié)中，我將解釋這兩個(gè)術(shù)語(yǔ)之間的區(qū)別。

Angular使用TypeScript作為其主要語(yǔ)言，并且還能夠在多種平臺(tái)上運(yùn)行。 Angular的架構(gòu)采用MVC(模型-視圖-控制器)模式，該模式被認(rèn)為是行業(yè)標(biāo)準(zhǔn)之一。 那么，React和Angular之間有什么相似之處?

它們?nèi)绾蜗嗨?

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

社區(qū)

這兩種產(chǎn)品背后都有龐大的社區(qū)。 由于React和Angular是開(kāi)源的，因此許多公司都依賴(lài)它們并試圖使其保持運(yùn)行和更新，因此使用它們時(shí)您會(huì)感到相對(duì)安全。 由于文檔不完整，缺少關(guān)于Stack Overflow的幫助或第三方庫(kù)的可用性，您不太可能會(huì)遇到很多問(wèn)題。

建筑

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

它們有何不同?

好家伙。 在這里，我們還有很多要點(diǎn)-我認(rèn)為這就是您閱讀本文的原因。 因此，讓我們開(kāi)始吧。

庫(kù)與框架

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

常規(guī)DOM與虛擬DOM

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

可擴(kuò)展性

這是Angular的強(qiáng)項(xiàng)之一。 由于Angular實(shí)施的架構(gòu)更加復(fù)雜，因此擴(kuò)展起來(lái)更容易。 在React中，太多的東西放在開(kāi)發(fā)者的肩膀上，并且搞砸起來(lái)要容易得多。 但是，直到代碼庫(kù)足夠大時(shí)，您才會(huì)注意到它。 當(dāng)然，可以通過(guò)應(yīng)用"干凈架構(gòu)"原則來(lái)減輕這種情況，但是您需要意識(shí)到這一點(diǎn)。

移動(dòng)開(kāi)發(fā)

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

結(jié)束語(yǔ)

感謝您的閱讀。 我希望您現(xiàn)在對(duì)React和Angular之間的區(qū)別有所了解。 如有任何疑問(wèn)，請(qǐng)告訴我。