凌晨2點，Dan仍坐在電腦桌前，表情嚴(yán)肅。

作為React社區(qū)最知名的布道者，此時正遭遇一場不小的變故 —— 他擁有38w粉絲的推特賬號被影子封禁了。

所謂影子封禁，是指粉絲無法在流中刷到被封禁者的任何推文，只能點進(jìn)被封禁者的賬號才能看到新推文。

在RSC（React Server Component）特性發(fā)布后，Dan經(jīng)常用這個賬號科普各種RSC知識。這次封禁，顯然對他的布道事業(yè)造成不小打擊，不得已只能啟用新賬號。

雖然新賬號粉絲不多，但值得寬慰的是 —— 這篇題為The Two Reacts[1]的RSC布道文數(shù)據(jù)還不錯。

這篇文章通過解釋世界上存在2個React：

• 在客戶端運(yùn)行的React，遵循UI = f(state)，其中state是狀態(tài)，是可變的。
• 在服務(wù)端運(yùn)行的React，遵循UI = f(data)，其中data是數(shù)據(jù)源，是不變的。

來論證RSC的必要性（他為服務(wù)端運(yùn)行的React提供了底層技術(shù)支持）。

安靜的夜總是讓人思緒良多，Dan合上MacBook Pro，回想起當(dāng)年參加行業(yè)會議，在會議開始前一周才實現(xiàn)演講所需的Demo（也就是Redux的雛形）。也正是以這次參會為契機(jī)，他才得以加入Meta倫敦，進(jìn)入React核心團(tuán)隊。

隨后，Dan又回想起在React Conf 2018介紹Hook特性時，臺下觀眾驚喜的歡呼。

想到這里，不禁又感嘆 —— 曾經(jīng)并肩戰(zhàn)斗的戰(zhàn)友們都已各奔東西。

Redux的聯(lián)合作者Andrew Clark離開了（入職Vercel），Hook的作者sebastian markb?ge也離開了（入職Vercel），連自己最終也離開了（入職bluesky）。

雖然React仍是前端領(lǐng)域最熱門的框架，但一些微妙的東西似乎在慢慢變化，是什么變了呢？

React正迎來自己口碑的拐點

作為一款11歲高齡的前端框架，React正迎來自己口碑的拐點。

近期，有多名包括知名庫作者、React18工作組成員在內(nèi)的社區(qū)核心用戶公開表達(dá)了對React的批評，比如：

• Increasingly miffed about the state of React[2]
• Kind of annoyed at React[3]
• React, where are you going?[4]
• The decline of React[5]
• Concatenating text[6]

有人會說，React從誕生伊始至今從不乏批評的聲音，有什么大驚小怪的？

這其中的區(qū)別其實非常大。從React誕生伊始至今，批評通常是開發(fā)者與React核心團(tuán)隊的理念之爭，比如：

• JSX到底好不好用？這是理念之爭
• 用Class Component還是Function Component？這是理念之爭
• 要不要使用Signal技術(shù)？這還是理念之爭

雖然開源項目都很重視開發(fā)者的反饋，但React已經(jīng)不能算是普通開源項目，而是一個龐大的技術(shù)生態(tài)。

在這個生態(tài)中，開發(fā)者的不滿實際上并不會動搖React的基本盤。因為決定「開發(fā)者是否在項目中使用React」的，并不是開發(fā)者自身好惡，而是公司考量技術(shù)生態(tài)后作出的自上而下的選擇。

所以，React的基本盤是技術(shù)生態(tài)（而非開發(fā)者）。而構(gòu)成技術(shù)生態(tài)的，則是生態(tài)中大大小小的開源作者/開源團(tuán)隊。

這一輪對React的批評，多是核心技術(shù)生態(tài)的參與者發(fā)出的，他們才是支撐React大廈的一根根柱子。

批評的主要原因是 —— React團(tuán)隊將React的發(fā)展與一家商業(yè)公司（Vercel）牢牢綁定。

這對于React核心團(tuán)隊成員來說，是「從大廠到獨(dú)角獸」的個人職場躍遷。但對廣大React技術(shù)生態(tài)的開源作者/開源團(tuán)隊來說，則是被動與一家商業(yè)公司（Vercel）綁定。

舉個例子，RSC中有個叫Server Actions的特性，用于簡化「在服務(wù)端處理前端交互」的流程。Vercel是一家云服務(wù)公司，旗下的Next.js支持Server Actions可以完美契合自家Serverless服務(wù)的場景。

但其他開源項目可能并不會從這個特性中受益。

再比如，React Bricks的作者曾抱怨 —— 雖然表面上看，React可以與Vite結(jié)合，可以與React Router結(jié)合（也就是Remix的前身），一切都是自由的選擇。但上層的服務(wù)商表示：如果React Bricks不能支持Next.js，就不會再使用他。

換句話說，React在逐漸將自己的技術(shù)生態(tài)遷移到Next.js，而技術(shù)生態(tài)是公司技術(shù)選型的首要考慮因素。如果開源庫不主動融入Next生態(tài)，公司在做技術(shù)選型時可能就不會考慮這個庫。

迫于市場的考量，會有很多原React生態(tài)下的庫遷移到Next生態(tài)，即使這么做并非庫作者意愿（畢竟Next.js的背后是一家商業(yè)公司）。

框架作者的反抗

如果說一般的開源庫只能被動選擇是否追隨Next生態(tài)，那還有一類開源庫選擇與Next.js正面對抗，這就是Meta Framework（元框架）。

所謂元框架，是指基于前端框架封裝的「功能更全的上層框架」，比如：

• 框架Vue，元框架Nuxt.js
• 框架React，元框架Remix、Next.js
• 框架Solid.js，元框架SolidStart
• 框架Svelte，元框架SvelteKit

還有些框架本身就是元框架，比如Angular、Astro。

從NPM年下載量看，Next.js對這些競品基本呈碾壓之勢（下表綠色是Next）：

造成當(dāng)前局面有多少是因為「Next.js相比其他元框架表現(xiàn)更出色」我們不得而知，但有一點可以肯定 —— React生態(tài)向Next生態(tài)的遷徙對形成當(dāng)前局面一定貢獻(xiàn)了不少。

參考下圖，黃色（React年下載量）對綠色（Next年下載量）的提攜：

圖片

元框架的競爭已經(jīng)逐漸白熱化，現(xiàn)在甚至出現(xiàn)了「生成元框架的框架」 —— vinxi[7]。

你可以選擇框架（React、Vue、Solid...），再選擇應(yīng)用場景（客戶端、SSR、SSG...）以及一些個性化配置，vinxi會為你生成一個獨(dú)屬于你的元框架。

順便一提，SolidStart就是基于vinxi構(gòu)建的。

后記

對「React將技術(shù)生態(tài)向Next遷移」的不滿在社區(qū)已經(jīng)醞釀已久，并在近期迎來了爆發(fā)。長久來看，這種不滿必將影響React的根基 —— 技術(shù)生態(tài)。

但從上帝視角來看，沒有人是真正在意React的：

• 開發(fā)者只在意是否能穩(wěn)定、高效完成工作。
• 開源作者只在意技術(shù)生態(tài)市場是否夠大（不能被少數(shù)公司壟斷）。
• React核心團(tuán)隊成員在意的是自己的職業(yè)前景。
• 元框架作者在意的是從Next無法顧及的細(xì)分場景切一塊蛋糕。

React就像一個被開采了11年的金礦，開采的各方都有所抱怨，同時又不停下手中揮舞的鐵鎬。

當(dāng)React將技術(shù)生態(tài)逐漸遷移到Next生態(tài)后，React的身影將只存在于一些細(xì)節(jié)中，比如：

• Hook的執(zhí)行順序不能變。
• 嚴(yán)格模式下組件會render兩次。
• 相比其他框架更低的性能。

作為一家商業(yè)公司，未來Vercel會不會為了市場考量逐漸優(yōu)化這些特性（比如引入Signal）？

如果說React未來一定會消失，那他的死必不會像煙花那樣猝不及防而又燦爛（就像谷歌宣布研發(fā)Angular2后，Angular1在關(guān)注度最高時迎來了他的死亡）。

更可能的情況是像忒修斯之船一樣，在航行的過程中不斷更換老舊的木條，最終在悄無聲息中逐漸消失......

參考資料

[1]The Two Reacts:https://overreacted.io/the-two-reacts/。

[2]Increasingly miffed about the state of React:https://macwright.com/2024/01/03/miffed-about-react。

[3]Kind of annoyed at React:https://blog.cassidoo.co/post/annoyed-at-react/。

[4]React, where are you going?:https://dev.to/matfrana/react-where-are-you-going-5284。

[5]The decline of React:https://gomakethings.com/the-decline-of-react/。

[6]Concatenating text:https://johan.hal.se/wrote/2024/01/24/concatenating-text/。

[7]vinxi:https://www.brenelz.com/posts/building-a-react-metaframework-with-vinxi/。