JavaScript框架大戰已結束，贏家只有一個
競爭者
框架之戰是 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 的決戰之約。
angular
.module("app", [])
.controller("HelloWorldCtrl", ($scope) => {
$scope.message = "Hello 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。
