十年前，facebook 開發者 christopher chedeau 在 o'reilly 開源大會上發表演講，介紹了當時新興的 javascript 框架 react。正如 the new stack 的 chris dawson 當時所評論的，這次演講引人入勝，因為它深入闡釋了 react 的核心理念——不僅解釋了工作原理，還說明了為什麼要開發這個框架。
自 2014 年 oscon 大會以來，react 在前端開發領域確立了其領導地位，在本文中，我將重新審視 react 的核心理念，並評估它在當今技術環境中的是否仍然經久不衰。這在 2024 年尤其重要，因為一些主流的軟件產品，例如微軟的 edge，開始探索一種我稱之為後 react 方法的 web 開發方法，即微軟 edge 團隊所謂的“html 優先”策略。此外，像 svelte 和 solid 這樣的非 react 框架也為前端開發者提供了越來越可行的替代方案。
在 2014 年的演講中，chedeau 闡釋了 react 的起源，也就是 facebook 在 2010 年 2 月作為開源軟件發布的 php 擴展 xhp。chedeau 說：“我們擴展了 php 語法，使其能夠嵌入 xml”。這主要是出於提高安全性的考慮，同時也帶來了“非常快速的迭代周期”。
然而，因為 php 是一種服務器端語言，每次有變化時，頁面都需要進行完整的重新渲染。為了避免服務器與客戶端之間頻繁的往返，facebook 團隊決定將 xhp 的很多應用程序邏輯遷移到 javascript 中，畢竟 javascript 這是瀏覽器的本地腳本語言。然後，他們開始探索如何進一步優化 javascript 來提升性能和體驗。
“我傾向於將 react 視為對 dom 的版本控制”
—— christopher chedeau，2014 年
他們最終開發出了一個叫作 react 的 javascript 庫：關鍵創新是引入了“虛擬 dom”的概念。dom，即文檔對象模型，正如 wikipedia所解釋的，是“html 文檔的對象化表示，充當了 javascript 和文檔之間的橋樑。”
正如 chedeau 所解釋的，react 提供了兩個“虛擬”的 dom 副本（交互前和交互後各一個），通過一個“差異”比較過程就可以識別出實際發生的變化。然後，react 將這些變化應用到實際的 dom 中——這意味着只有 dom 的一部分發生更新，其餘部分保持不變。這也意味着只有網頁的一部分需要重新渲染。
facebook 開發者 christopher chedeau 在 2014 年的 oscon 大會上介紹 react
chedeau 使用了一個巧妙的比喻來總結 react 的好處：“我傾向於將 react 視為對 dom 的版本控制”。因此我們可以說 react 有點像前端的 git。
另一個創新是 jsx（javascript xml，即 javascript 語法擴展），這是一種 xml 風格的 javascript 語法擴展。早在 2013 年，facebook 的 pete hunt 就對 jsx 進行過描述，並將其定位為一種“可選的語法擴展，旨在為那些更偏愛 html 的可讀性而非純 javascript 的開發者提供便利。”
react 背後的一個核心理念是，它不基於模板，這與之前流行的框架（如 ruby on rails 和 django）不同。正如 hunt 所指出的，“react 採用了一種不同的方法來構建用戶界面——將界面分解為獨立的組件，這意味着 react 使用了一個真正的、全功能的編程語言來渲染視圖。”
react 確實提供了一種革命性的 web 應用開發方法——特別適合那些數據頻繁變化的大型應用程序。這引起越來越多開發者的注意，react 在 2014 年的採用率開始顯著增長。2014 年 5 月，mozilla 的開發者 james long 在一篇題為“去除用戶界面複雜性——為什麼說 react 很棒”的文章中表達了對 react 的樂觀情緒。
儘管廣受好評，但不久之後，開始有人對 react 提出批評。到了 2015 年底，一些開發者因為陡峭的學習曲線而感到“疲憊”。2015 年 12 月，eric clemmons 在他的文章) 中寫道：
“最終的問題在於，當你選擇了 react（及其固有的 jsx 語法），實際上是在開始開發之前無意中跳入了一個由構建工具、樣板文件、代碼檢查器和時間黑洞構成的陷阱。”
開發者還對 react 管理狀態的處理方式提出了質疑。2016 年 8 月，charlie crawford 在 the new stack 上發表了 觀點：
“當組件樹變得龐大，且存在一些位置相距較遠的組件時，如果這些組件並非直接的父子關係，並且兩個組件都依賴於同一部分狀態，那麼問題就開始出現了。”
到 2017 年，一些有影響力的開發者開始頻繁表達他們對 react 的不滿。2017 年 8 月，當時在谷歌 chrome 團隊工作的 alex russell 反駁了虛擬 dom 速度快的觀點：
“從來沒有任何確鑿的事實基礎可以證明虛擬 dom 的速度“快”，現在同樣如此。它實際上是以犧牲空間為代價來換取便利性，而非速度。”
瀏覽器開發者 alex russell 一直是 react 的批評者，經常在社交媒體上表達他的不同意見
2019 年 6 月，russell 再次發聲，指出 react 的“diffing”算法實際上比其它框架慢：
“結果表明 diffing 確實慢！其他框架通過採取不同的方法實現了更快的速度（如 svelte、lit、vue 等），而且它們在提供相似的表面語法的同時具有更小的體積。
在過去的十年里，開發者對 react 的一些抱怨已經逐漸減少或得到了妥善解決。例如，學習曲線現在不再是一個大問題——自 2014 年以來，許多新的前端開發者湧入，許多人的起點便是學習 react。對於狀態管理問題，也有了好的解決方案，比如 redux 或 react 的 context api。
即使可能面臨性能方面的挑戰，react 依然擁有堅定的支持者，vercel 公司便是其中之一，它運行着行業領先的 react 框架 next.js。2023 年 7 月，vercel 發表了一篇關於 react 18 的長博文，這是 react 的當前穩定版本。文章概述了“如何利用並發特性，如 transitions、suspense 和 react server components，來提升應用程序性能。”
然而，即使這些特性確實提升了性能，但是否是以複雜性為代價？包括 netlify ceo matt biilmann 在內的一些人對此持有疑問。今年 1 月，biilmann 巧妙利用 vercel ceo guillermo rauch 的一條推文，以諷刺的方式提出了 vercel（以及間接地涉及 react）的複雜性問題。
值得注意的是，netlify 實際上是 vercel 的直接競爭對手！在那次演講中，biilmann 推薦 astro 作為一個更簡潔的框架來替代 next.js。雖然 astro 允許用戶集成 react，但他們也可以選擇其他 ui 框架，比如 vue、svelte 和 solid。
最近，netlify 和 astro 宣布了一項正式的合作夥伴關係——所以我們可以期待 netlify 在推廣“保持簡潔”的理念上發揮更大作用。
現在就宣稱我們已經邁入後 react 時代可能還為時尚早，因為 react——以及像 next.js 這樣的相關框架——仍然廣受歡迎。但不可否認的是，開發者現在有了更多的選擇。astro 和 svelte 都不使用虛擬 dom，所以開發者可以選擇一個不依賴 react 的 web 框架（儘管 astro 仍然保留集成 react 的能力）。
微軟的 edge 團隊正在推動一種“html 優先”的方法，alex russell（他是那個團隊的成員）將其描述為“現代 web components 加 html 優先的架構”。
不管怎樣，前端開發不再像幾年前那樣與 react 緊密綁定。如果你是剛進入這個行業的 web 開發者，甚至可以考慮完全不使用 react——儘管這可能會在短期內影響你的就業機會。但至少這是一個值得認真考慮的選項，它或許能幫你吸引到那些具有前瞻性眼界的僱主，從而為你的職業生涯開闢新的道路。
聲明：本文由 infoq 翻譯，未經許可禁止轉載。
