為什麼 React JS 比 Angular 或 Vue JS 更好？

眾所周知，網頁主要使用 HTML、CSS 和 JavaScript 編程語言（網絡的三個基本構建塊）構建。 具體來說，HTML 在網頁上創建元素，例如菜單、文本和框。 而 CSS 用於設計、設計和放置這些元素在網頁上。 最後是 JavaScript，它促進了與這些元素的交互和操作。 我們討論的主題將圍繞 JavaScript； 特別是 React.Js 及其優於 Angular 和 Vue.Js 的優勢。

總之，React JS 比 Angular 或 Vue JS 更好，因為它具有卓越的虛擬 DOM 功能、強大的社區支持、豐富的文檔、輕量級的屬性、易於管理的學習曲線，以及它允許使用 React Native 的移動功能的靈活性。

JavaScript：膠水語言

為了為我們的案例設置優先級來證明 React 的主導地位，我們將回顧一些基礎知識。 JavaScript 通常被認為是一種膠水語言，用於組裝其他組件。 在三個 Web 構建塊中，HTML 和 CSS 不太複雜（儘管主要用於靜態設計）。 然而，對於創建動態 Web 內容的開發人員來說，JavaScript 是一個優先事項，這說明了為什麼它比同時代的軟件更大、更複雜。 本質上，成為大多數網頁上使用的事實上的標準。

因此，在過去十年中，在 JavaScript 之上設計了多個前端框架，以簡化網站的開發和維護。 結果，截至 2020 年，這些前端 JavaScript 框架中最受歡迎的是 React 和 Vue，然後是 Angular。

因為我們已經簡要地確定了 JavaScript 和基於 JavaScript 的框架和庫是 Web 開發的關鍵工具。 所以，為了給我們的博客設置上下文，讓我們簡要回顧一下 JavaScript 的歷史和發展。

Web 技術和瀏覽器的歷史

第一個 Web 瀏覽器於 1990 年 12 月開發並發布，Tim Berners-Lee 擔任首席開發人員。 他同時開發並發布了超文本傳輸協議 (HTTP)，這是用於萬維網索引和網站導航的應用協議。

後來，首個圖形 Web 瀏覽器 Mosaic 於 1993 年發布。同樣，同年，開發了 HTML。 這是在 JavaScript 誕生之前幾年，而 CSS 是在 1996 年發布的，比 JavaScript 晚了一年。 這三種語言後來形成了一個著名的技術堆棧，被稱為“Web 開發人員必須學習的三重技術”。

JavaScript 的發展

Mosaic 瀏覽器的著名後續產品之一是 1994 年發布的 Netscape Navigator 瀏覽器。1995 年，當時流行的 Netscape 的開發人員聘請程序員 Brendan Elch 為網頁創建一種新的動態腳本語言和客戶端的數據操作。

為了應對市場，Netscape 看到了創建動態網站的必要性，而不是局限於 HTML。 不幸的是，大多數早期網站只使用 HTML，因此計算效率低下。 因此，Netscape 不得不設計一種針對 DOM（文檔對像模型）操作的簡單 Web 腳本語言。 因此，該項目受到 Java 的功能和語法的啟發—— 儘管它們在句法上有細微的相似之處，但它們有著根本的不同。

JavaScript 於 1996 年 3 月正式發布，最終在網頁上啟用了 HTML 單獨無法實現的新功能。 例如，響應用戶輸入、顯示彈出窗口和更改元素顏色。 Netscape 後來被同樣擁有 Mozilla 的美國在線 (AOL) 收購，這促成了 JavaScript 作為互聯網標準的指數級增長。

XML、AJAX 和單頁應用程序的出現

在 2000 年代初期，Web 用戶對緩慢的服務器響應和較長的數據傳輸時間感到沮喪。 標誌著這個時代的低速互聯網連接進一步加劇了這些問題。 導致了 AJAX 技術棧（異步 XML 和 JavaScript）的發展

在這方面，XML 是一種類似於 HTML 的標記語言，儘管它用於數據表示而不是內容顯示。 隨著 AJAX 堆棧的創建，XML 在 JavaScript 中變得相關。

AJAX 通常被描述為多種技術的集合，它們捆綁在一起作為一個整體，由 XHTML、CSS、DOM、XML、XLST、XML HttpRequest 和 JavaScript 組成。 在 AJAX 中，JavaScript 將所有其他工具綁定在一起。 因此，AJAX 提供了一種無需下載整個內容即可更新部分 HTML 頁面的方法。

單頁應用程序

一般來說，所有的 JavaScript 框架都採用單頁應用原則。 在實踐中，單頁應用程序 (SPA) 是由單個組件組成的應用程序，在第一次訪問時加載到內存中，然後可以獨立替換或更新，因此不必重新加載整個網頁在每個用戶操作上。

此外，使用 SPA，可以重用組件，從而大大減少所需的代碼量。 第一個單頁應用程序於 2002 年實現，JavaScript 旨在作為實現的目標語言之一。 單頁應用的成功，主要得益於前面的 AJAX 技術及其在服務器通信方面的優勢。

JavaScript-HTML 關係

HTML 可以作為 JavaScript 的補充，就像 jQuery 一樣； 或者作為被編譯成 HTML 元素的集成的、類似 HTML 的語法。 JSX 語法就是一個例子，推薦在使用 React 開發時使用。 它既不是純 JavaScript 也不是 HTML，而是兩者的融合。 因此，從根本上說，將 HTML 的基本元素創建和結構功能與 JavaScript 的動態功能相結合。

CSS-HTML 關係

CSS 通常與 JavaScript 結合使用。 傳統的示例格式是在單獨的 .css 文件中實現 CSS 屬性。 另一種格式是通過 CSS-in-JS 和 styled-components 等專門的庫將 CSS 集成到 JavaScript 框架本身。 此類庫使開發人員能夠編寫 JavaScript 代碼，以使用類似 CSS 的語法來設置視覺元素的樣式，然後通常在瀏覽器中將其編譯成純 CSS。

JavaScript 服務器端實現的出現

最終，2009 年發布了 Node.js，這是一種 JavaScript 的服務器端實現。 Node.js 將 JavaScript 域擴展到後端，使 JavaScript 成為一種全棧語言。

Node.js 是目前使用最多的 JavaScript 運行時環境，用於在 Web 瀏覽器環境之外執行 JavaScript 代碼。 利用服務器端功能，Node.js 的創建者旨在開發一種更有效的替代當時流行的 Apache HTTP 服務器（通常與 PHP 一起使用）。 Node.js 是使用 Google 的 V8 JavaScript 引擎創建的，該引擎本身是使用 C++ 構建的。

前端 JavaScript 框架

既然我們已經奠定了基礎，我們現在可以鋪磚並深入研究我們傾向於 React.js 的原因。

框架與庫

在談論這個 JavaScript 三重奏時，一個常見的論點是什麼是庫。 具有諷刺意味的是，React 有時被稱為庫，有時也被稱為框架。 但是，為了清晰和一致，將框架與庫分開通常很有用。

特別是，庫是非易失性資源的被動集合，開發人員可以控制如何使用這些資源。 它們通常非常簡單，只執行一項特定任務，因此可以歸類為工具。

雖然框架被設計成不那麼被動，並迫使開發人員通過利用骨架進行開發並強制執行控制流來以某種方式做事。 例如，為開發人員提供了一種已定義的方式來開發和設置整個 Web 應用程序。 雖然 Web 應用程序庫沒有，而是提供更簡單的子域操作，例如網絡請求或樣式操作。

儘管 Vue 和 Angular 在技術上被認為是框架，但對於 React 是框架還是庫仍然存在一些分歧。 儘管 React 的原始開發人員將其稱為庫，但它仍然更常用作框架。

為什麼 React 是主要的替代方案！

事後看來，React 是作為 XHP（Facebook 創建的 PHP 庫）的 JavaScript 端口開發的。 通常，XHP 是對 PHP 的修改，允許創建自定義組件，旨在防止惡意用戶攻擊。 後來在這個 JavaScript 移植項目中發展出了 JSX（JavaScript XML），它成為 React 的通用標準語言。

考慮到所有因素，React 的範圍比它的同行更窄，只呈現應用程序用戶界面。 然而，它保持了輕量級結構的優勢，因此學習和使用成本更低。 話雖如此，它仍然可以被視為一個框架，因為它的用途與 Vue 和 Angular 相同。

卓越的虛擬 DOM 功能。

React 是第一個根據 DOM 優化其功能的框架。 這是其成功的一個促成因素，因為 DOM 操作在使用的計算資源方面非常昂貴。 具體來說，React 旨在通過使用直觀的狀態管理和虛擬 DOM 來控制這種操作，從而盡可能少地執行 DOM 操作。

這種對虛擬 DOM 的利用使 React 更新更快，但代價是佔用更多內存。 並且為了對瀏覽器 DOM 執行快速更新，react 在內存中維護了一個虛擬 DOM 樹的副本，這會消耗額外的內存。 因此，React 的流行催生了許多衍生庫，例如用於移動開發的 React Native。

單向數據流

在 React 中，數據是向下流動的，被稱為單向數據流。 雖然 Angular 和 Vue 的雙向數據綁定使代碼更漂亮、更簡單，但 React 彌補了卓越的可管理性和性能。 我們的論點有一個顯著的優勢。

為什麼 React 比 Angular 更好

讓我們逐案比較以獲取更多上下文，好嗎？ Angular 旨在用於大型應用程序開發，在編程功能和文件大小方面是一個功能更全面的 JavaScript 框架。

然而，與 React 相比，Angular 具有負面的臃腫、複雜和沈重的開發風格特徵。 建議用於較小的開發項目，並被認為具有陡峭的學習曲線。 更糟糕的是，AngularJS 不再處於積極開發中。

Angular 完全使用 TypeScript 構建，需要大量代碼，這使得它有點複雜。 相反，React 相當“簡單”，它最初的定位是專注於控制和操縱視圖。 從本質上講，它允許開發人員準確地選擇他們需要的東西，而且它還可以使用大量的第三方包。 因此，與 Angular 相比，React 並沒有包含很多開銷。

為什麼 React 比 Vue 更好

Vue.js 由 Google 員工 Evan You 創建。 Evan 受到 AngularJS 的啟發，但想創建一個更精簡、改進的版本。 儘管 Vue 具有輕量級的屬性、出色的性能和良好的編程風格，但 Vue 的缺點是笨拙。這正是 React 的優勢所在。

例如，與 React 相比，Vue.js 中沒有明確的最佳實踐，這可能會使主要應用程序難以維護。 然而，React 的最佳實踐可以在社區中找到。 例如，可以通過官方的 create-react-app 包創建可行的工作流。 由於以上幾點，React 適當地提供了編寫和維護大量複雜代碼的能力。

ES6 語法

此外，開發人員也可以在 Vue 中使用 ES6 語法，但是在這方面，React 比 Vue 設計得更優化。 雖然 Vue 當前提供 TypeScript 支持，但它的支持並沒有像 React 那樣在單個命令中使用 CRA（創建 React 應用程序）和 TS 支持。 此外，使用 Vue，我們仍然需要一些帶有自定義裝飾器和特性的第三方包來創建一個真正的、完整的 TypeScript 應用程序。 不幸的是，官方文檔並未提供入門所需的所有信息。 React 的另一個優勢！

當我們鞏固我們的論點時，讓我們使用更清晰的某些基准進一步分解討論。

1. 框架大小

雖然 npm 註冊表中框架的縮小包的大小不太可能阻止或鼓勵任何開發人員選擇框架，但它仍然可以幫助我們的論點。 Angular 明顯比其他的（187.6 kB）大很多，而 React 為 6.4 kB，而 Vue 介於兩者之間，為 63.5 kB。

通常，包大小比較表明 Angular 支持並包含更廣泛的功能，而 React 是為更簡化的開發而設計的。 因此，React 的性質為開發人員提供了更少的選擇來提高效率，這對於小型項目來說非常方便。

此外，與 React 或 Vue 相比，Angular 的複雜結構會導致性能不佳的潛在風險，尤其是在內存分配方面。

2. 開發經驗、學習曲線和可用性

一般來說，TypeScript 本身並不比 JavaScript 更難或更容易學習。 但是，與 JavaScript 相比，它的使用並不廣泛，並且包含的庫和整體文檔更少。 這些因素，再加上語法上的差異以及習慣於使用稍微不同的 JavaScript 進行編碼所需的時間，為 React 提供了相對於 Angular 的輕微優勢。

3. 基於語言的情況

另一個關鍵點是 React 和 Vue 使用 JavaScript ES6 作為它們的基礎語言。 ES6 是自 2015 年以來最新的 JavaScript 行業標準。另一方面，Angular 1 利用 JavaScript ES5，這是以前的版本，而 Angular 2 依賴於 TypeScript。

儘管 TypeScript 使開發人員能夠擺脫傳統的 JavaScript 編程格式，但它的用戶社區有限。 這意味著如果出現另一個新的 JavaScript 語法嚴格超集，TypeScript 可能會消失。 相反，JavaScript ES6 不會很快消失，因為它是當前用 JavaScript 開發的行業標準。

4. 文檔

老實說，所有這些框架的文檔可用性都令人滿意。 也就是說，仍然值得注意的是，React 的文檔以最多的語言提供（16 種）。 Vue 落後，有 8 種語言的文檔，而 Angular 文檔有 4 種語言。 React 文檔是連貫的，並且在為不同的開發人員交付時具有統一的理論。

不幸的是，Angular 的框架情況可能會給開發人員帶來一些困難，因為它分為 AngularJS 和 Angular 2。此外，“Angular”這個詞有時會在它在在線上下文中指代哪個框架時變得模棱兩可。 特別是在瀏覽較小的網站和較短的答案時。

5. 社區支持

在大多數情況下，React 可以說是目前所有 JavaScript 框架中最大的社區支持。 其討論論壇和聊天室的廣度就是例證。 此外，用戶可以關注最新消息並參與 Facebook 和 Twitter 上的討論。

Svelte 框架（榮譽獎）

我們認為在 JavaScript 領域提及一個相對較新的入口是明智的。 Svelte 由 Rich Harris 開發，最初於 2016 年發布，在 2019 年廣受歡迎。它引入了 JavaScript 的多項增強功能，例如更改本地狀態處理。

還值得注意的是，Svelte 沒有虛擬 DOM，並且在構建時而不是運行時將編寫的代碼轉換為 JavaScript。 本質上，它避免了將聲明性元素轉換為真實的 DOM。

概括

儘管 Vue 在 Github 上的 star 稍多一些，但 React 仍然更勝一籌，沒有明顯的弱點，並且具有更好的性能優勢。 從本質上講，更好的性能意味著更短的加載時間和更高的用戶滿意度。 此外，對於商業網站，這會導致收入增加，因為加載時間減少幾毫秒可以增加用戶交互和保留。

最終，JavaScript 框架格局的未來很難預測。 儘管有證據表明，在可預見的未來，React 可能仍然是主導框架。 但是，對於希望使用成熟的、受良好支持的、具有出色性能和大量文檔的框架來開發應用程序的開發人員來說，React 是最佳選擇！