框架之戰是 JAVAScript 社區中的熱門話題，也是業界眾多圣戰之一。一開始，jQuery 嶄露頭角，接下來 AngularJS 初露鋒芒，再到現代框架混戰，戰爭一直很激烈。然而現在框架之戰已經結束，是誰贏得了最終的勝利，它又是憑什么取勝，且看本文分解。

競爭者

框架之戰是 JavaScript 社區中的熱門話題，也是業界眾多圣戰之一。一開始，jQuery 嶄露頭角，接下來 AngularJS 初露鋒芒，再到現代框架混戰，戰爭愈演愈烈。

如今，似 Backbone 或 Sencha 之流，許多競爭者已經馬革裹尸倒在路邊：只留下大量必須維護的遺留代碼。如 jQuery 等其他幸存者，仍然有著龐大的社區，實在令人驚訝。其他如 Angular，似乎也未像預期或承諾的那樣一飛沖天。

jQuery

它可能是現存年齡最大的競爭者。它非常受歡迎，因為它解決了瀏覽器之間的互操作性，但其應用程序很難擴展。

如今，jQuery已經不是主流，也不是大多數項目的最佳選擇。

 $(document).ready(() => { 
   $("#App").html("Hello World!"); 
 });

復制代碼

AngularJS

它處于 LTS 模式，并且為了支持其老大哥已經退居二線。不過毫無疑問，它曾是框架生態系統一次巨大的飛躍，很多人仍然懷念它。

但是，由于它不再被積極維護，因此它不再是競爭者。

 angular 
   .module("app", []) 
   .controller("HelloWorldCtrl", ($scope) => { 
     $scope.message = "Hello World!"; 
   });

復制代碼

Angular

它的出現是為了與 React 一決雌雄。AngularJS 已經老了，它存在性能和健壯性問題，而隨著 React 變得越來越好，許多程序員對其投出艷羨的目光。因此，Angular 利用 ECMAScript 6 的改進對 AngularJS 進行了現代化改造，試圖履行與 React 的決戰之約。

 import { Component } from '@angular/core'; 
  
 @Component ({ 
    selector: 'my-app', 
    template: `<h1>Hello {{name}}</h1>`, 
 }) 
 export class AppComponent  { name = 'World'; }

復制代碼

Angular 最突出的困難是其陡峭的學習曲線。它需要了解很多概念，而且并不是一下子直截了當給你的，很多時候會把你繞進死胡同。學好 Angular 是很困難的：它繼承了 AngularJS 的學習曲線，但又有新的困難，比如 RxJS 或分層依賴注入。

本·納德爾提供原始照片。

另一方面，讓人擔憂的是，Angular 也違背了很多承諾。例如，自 V2 以來，大家都期望有一個創建服務器端呈現頁面的簡單方法，但截止到 2022 年 2 月 24 日，Angular.io 網站本身在沒有 JavaScript 的情況下都無法工作。

然而這還不是 Angular 的最大的問題，它最大的問題是碎片化和版本升級。升級版本非常困難，以至于用戶不敢冒險升級其應用程序。

在npm官網中可以看到有很多舊版本的用戶。

VueJS

Vue 是許多開發人員的答案，因為他們需要比 AngularJS 性能更高的、更穩定的，且更易于使用的框架。Vue 的模板系統非常接近原始的 Angular，也保持了 AngularJS 的簡單性，與此同時，它又從 React 獲得了一些能力。

但是 VueJS 在版本 1 和版本 2 中遇到了一個嚴重的問題：它不能很好地處理數組，作者指責 JavaScript 對更新算法的選擇不佳。如果你不使用像 Vuex 或 Redux 這樣的庫，則可能會遇到嚴重的問題。你可以看到在AngularJS中可用的應用程序，但在VueJS中卻不行。

從理論上講，這個問題在版本 3 中得到了解決。但是，將自己的錯誤歸咎于他人并不適合社區。

SvelteJS

它是戰爭中不斷壯大的競爭者，并且正在做出巨大的承諾。它聲稱主要優勢是將組件轉換成命令式語言，根據他們的說法，它比 React 采用的聲明性語言更好。

 <script> 
   let world = "World"; 
 </script> 
  
 <div> 
   Hello {world}! 
 </div>

復制代碼

毫無疑問，它使用起來更簡單，但是轉換為命令式以及由此產生的組件并不像看起來那么容易預測。在某些情況下，SvelteJS 無法正確檢測變化。發生這種情況時，狀態可能已經被破壞了，而視圖卻未正確更新。這個問題引起了很多關注，所以很難證明 SvelteJS 中的任何項目都是合理的。

https://twitter.com/drpicox/status/1496461071334490112

StencilJS

嗯，從技術上講，它不是一個框架，盡管它是。StencilJS 允許編寫組件，并將其轉換為其他框架。如今，它將組件轉換為 Angular、React、Vue 和 WebComponents 組件。

 import { Component, Prop, h } from '@stencil/core'; 
  
 @Component({ 
   tag: 'app' 
 }) 
 export class MyComponent { 
   @Prop() world: string; 
    
   render() { 
     return ( 
       <p> 
         Hello {this.world} 
       </p> 
     ); 
   } 
 }

復制代碼

但是，這個類有一些奇怪的地方。它和另一個東西很相似，對吧?

Mitosis

你可能沒有聽說過它，但正是因為它讓我寫下了這篇文章。Mitosis 是由 Angular 的創建者 Misko Hevery 編寫的最新框架。沒錯，它是 Misko 在 Angular 之后創建的另一個框架。

import { useState } from "@builder.io/mitosis"; 
  
 export default function MyComponent(props) { 
   const state = useState({ 
     world: "World", 
   }); 
    
   return <div>Hello {state.world}!</div>; 
 }

復制代碼

Mitosis 與 StencilJS 具有相同的目的，它將其組件轉換為許多框架。順便說一句，代碼是不是與其他框架有點像？

React

它是最古老的現代框架之一，在 npm 存儲庫中已經有 10 多年了。盡管它已經發生了很大的變化，但它仍然與以前的大多數版本兼容。所有的變化都變得更好了。有人說，帶有鉤子的 React 甚至已經創建了一個更好的框架。

 import { useState } from "react"; 
  
 export default function HelloWorld() { 
   const [world] = useState("World"); 
    
   return <div>Hello {world}!</div>; 
 }

復制代碼

但 React 做的最棒的不是它有鉤子或任何可見的功能，而是推動了 JavaScript 的最新標準，并推動了 JSX 的發展。React 不再是一個框架，也許它從來都不是，它只是一個庫。它在推動標準時做得如此努力，以至于最終將自己從用戶代碼中移除了。

贏家是...

JSX。好吧好吧，React，但不是 React 本身，而是其背后的哲學。React 本身就是一個庫，但它可以被許多其他庫所取代，比如 Preact 或 React Native。但是如果你仔細觀察，StencilJS 或 Mitosis 與 React 非常相似，這不是巧合，這是因為：

“最好的框架是將自己從用戶代碼中刪除的框架。“ ——勇于改變，才是更明智的決定

React 大量利用 JavaScript 和 JSX（嵌入了 XML 的 JavaScript），用戶代碼是 React 無關的，只需進行很少的調整，幾乎完全相同的代碼就可以在其他框架中運行。因此，毫無疑問，React 是框架之戰的贏家。因為它不是用戶代碼中的框架。

注意：我最近發現了一個視頻：
https://www.YouTube.com/watch?v=4anAwXYqLG8。他將 React 描述為一個盡可能降低影響的庫，這正是我編寫本文的原因。我感到很沮喪，因為我花了 8 年時間才理解它。這就是為什么有這么多框架看起來像 React 的原因，因為它不是 React，它是 JavaScript。