競(jìng)爭(zhēng)者

框架之戰(zhàn)是 JavaScript 社區(qū)中的熱門話題，也是業(yè)界眾多圣戰(zhàn)之一。一開始，jQuery 嶄露頭角，接下來(lái) AngularJS 初露鋒芒，再到現(xiàn)代框架混戰(zhàn)，戰(zhàn)爭(zhēng)愈演愈烈。

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

jQuery

它可能是現(xiàn)存年齡最大的競(jìng)爭(zhēng)者。它非常受歡迎，因?yàn)樗鉀Q了瀏覽器之間的互操作性，但其應(yīng)用程序很難擴(kuò)展。

如今，jQuery 已經(jīng)不是主流，也不是大多數(shù)項(xiàng)目的最佳選擇。

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

AngularJS

它處于 LTS 模式，并且為了支持其老大哥已經(jīng)退居二線。不過(guò)毫無(wú)疑問，它曾是框架生態(tài)系統(tǒng)一次巨大的飛躍，很多人仍然懷念它。

但是，由于它不再被積極維護(hù)，因此它不再是競(jìng)爭(zhēng)者。

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

Angular

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

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

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

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

另一方面，讓人擔(dān)憂的是，Angular 也違背了很多承諾。例如，自 V2 以來(lái)，大家都期望有一個(gè)創(chuàng)建服務(wù)器端呈現(xiàn)頁(yè)面的簡(jiǎn)單方法，但截止到 2022 年 2 月 24 日，Angular.io 網(wǎng)站本身在沒有 JavaScript 的情況下都無(wú)法工作。

然而這還不是 Angular 的最大的問題，它最大的問題是碎片化和版本升級(jí)。升級(jí)版本非常困難，以至于用戶不敢冒險(xiǎn)升級(jí)其應(yīng)用程序。

在 npm 官網(wǎng)中可以看到有很多舊版本的用戶。

VueJS

Vue 是許多開發(fā)人員的答案，因?yàn)樗麄冃枰?AngularJS 性能更高的、更穩(wěn)定的，且更易于使用的框架。Vue 的模板系統(tǒng)非常接近原始的 Angular，也保持了 AngularJS 的簡(jiǎn)單性，與此同時(shí)，它又從 React 獲得了一些能力。

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

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

SvelteJS

它是戰(zhàn)爭(zhēng)中不斷壯大的競(jìng)爭(zhēng)者，并且正在做出巨大的承諾。它聲稱主要優(yōu)勢(shì)是將組件轉(zhuǎn)換成命令式語(yǔ)言，根據(jù)他們的說(shuō)法，它比 React 采用的聲明性語(yǔ)言更好。

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

毫無(wú)疑問，它使用起來(lái)更簡(jiǎn)單，但是轉(zhuǎn)換為命令式以及由此產(chǎn)生的組件并不像看起來(lái)那么容易預(yù)測(cè)。在某些情況下，SvelteJS 無(wú)法正確檢測(cè)變化。發(fā)生這種情況時(shí)，狀態(tài)可能已經(jīng)被破壞了，而視圖卻未正確更新。這個(gè)問題引起了很多關(guān)注，所以很難證明 SvelteJS 中的任何項(xiàng)目都是合理的。

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

StencilJS

嗯，從技術(shù)上講，它不是一個(gè)框架，盡管它是。StencilJS 允許編寫組件，并將其轉(zhuǎn)換為其他框架。如今，它將組件轉(zhuǎn)換為 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>  
     );  
   }  
 }

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

Mitosis

你可能沒有聽說(shuō)過(guò)它，但正是因?yàn)樗屛覍懴铝诉@篇文章。Mitosis 是由 Angular 的創(chuàng)建者 Misko  Hevery 編寫的最新框架。沒錯(cuò)，它是 Misko 在 Angular 之后創(chuàng)建的另一個(gè)框架。

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

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

React

它是最古老的現(xiàn)代框架之一，在 npm 存儲(chǔ)庫(kù)中已經(jīng)有 10 多年了。盡管它已經(jīng)發(fā)生了很大的變化，但它仍然與以前的大多數(shù)版本兼容。所有的變化都變得更好了。有人說(shuō)，帶有鉤子的  React 甚至已經(jīng)創(chuàng)建了一個(gè)更好的框架。

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

但 React  做的最棒的不是它有鉤子或任何可見的功能，而是推動(dòng)了 JavaScript 的最新標(biāo)準(zhǔn)，并推動(dòng)了 JSX  的發(fā)展。React 不再是一個(gè)框架，也許它從來(lái)都不是，它只是一個(gè)庫(kù)。它在推動(dòng)標(biāo)準(zhǔn)時(shí)做得如此努力，以至于最終將自己從用戶代碼中移除了。

贏家是...

JSX。好吧好吧，React，但不是 React 本身，而是其背后的哲學(xué)。React 本身就是一個(gè)庫(kù)，但它可以被許多其他庫(kù)所取代，比如 Preact 或 React  Native。但是如果你仔細(xì)觀察，StencilJS 或 Mitosis 與 React 非常相似，這不是巧合，這是因?yàn)椋?br>

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

React 大量利用 JavaScript 和 JSX（嵌入了 XML 的 JavaScript），用戶代碼是 React 無(wú)關(guān)的，只需進(jìn)行很少的調(diào)整，幾乎完全相同的代碼就可以在其他框架中運(yùn)行。因此，毫無(wú)疑問，React 是框架之戰(zhàn)的贏家。因?yàn)樗皇怯脩舸a中的框架。

注意：我最近發(fā)現(xiàn)了一個(gè)視頻：https://www.youtube.com/watch?v=4anAwXYqLG8。他將 React 描述為一個(gè)盡可能降低影響的庫(kù)，這正是我編寫本文的原因。我感到很沮喪，因?yàn)槲一?8 年時(shí)間才理解它。這就是為什么有這么多框架看起來(lái)像 React 的原因，因?yàn)樗皇?React，它是 JavaScript。