React，前端框架之王——或者我該說「函式庫」，因為 React 的忠實粉絲每 10 分鐘就會提醒你它不是一個框架。但我們不要陷入技術細節。如果你在 2024 年進行任何認真的前端開發卻不使用 React，那麼恭喜你，你是一個文青。不過對於我們其他的凡人來說，React 已經成為前端競賽中無可否認的贏家，這就是你應該喜愛它（或至少假裝喜愛它）的原因。
1. 由 Facebook 支持——哦，我是說 Meta
讓我們先面對這個不可忽視的事實：React 有 Meta 作為後盾。你知道的，這家公司只管理著 30 億人的社交生活。如果你在科技界想找一個安全的選擇，由 Facebook 和 Instagram 背後的人維護的產品無疑是好選擇。沒有什麼能像擁有最大的資料收集公司來確保你所愛的前端工具保持相關性一樣表達「我們擁有網路」。
但嘿，別擔心。這不是某個邪惡公司的壟斷網路或什麼的。不是，完全不是。放鬆心情，相信扎克伯格確保你的 React 應用能平穩運行直到永遠（或者直到下個隱私醜聞）。
2. 這是一個函式庫，不是框架（而且你會聽到這句話直到你死）
讓我們釐清一下：React不是一個框架。你會在開發者圈子裡不斷聽到這個事實，仿佛這是一種榮譽的象徵。「哦，你在使用 Angular？可愛。我比較喜歡 React，因為它給了我更多的靈活性。」是的，React 開發者喜歡提醒你，和那些「限制性」框架不同，React 讓你可以隨心所欲地組合你的應用。你喜歡混亂，對吧？
因為誰需要一個有條不紊、明確意見的結構，當你可以享受選擇自己的路由、狀態管理和項目結構的精彩自由？就像被給了一個沒有說明書的 IKEA 扁平包裝，然後告訴你「你自己搞定。這樣更有成就感。」
這種靈活性很好——直到它不再好，你為了渲染一個按鈕深陷於 15 個依賴中。但嘿，至少 React 沒有對你施加任何約束。這也是值得的，對吧？
3. 基於組件的架構（用華麗的方式說明你將在 JavaScript 中編寫 HTML）
創新！創意！將 HTML 和 JavaScript 結合成一種美味的混合體叫 JSX 的純粹天才。使用 React，你終於可以以任何人沒有要求的方式將結構和邏輯混合在一起。為什麼要像過去那樣明確的關注分離，當你可以將所有東西混在一起，然後稱之為進步呢？
但等等，還有更多！不僅可以在 JavaScript 中編寫 HTML，還可以像某種俄羅斯套娃一樣將組件嵌套在其他組件內部。需要一個按鈕在模態框內的表單中嗎？沒問題。繼續嵌套，最終你會忘記組件的邊界在哪裡。就好像 React 想同時挑戰你的心理穩定性和你對乾淨代碼的熱愛。
不過，我想知道用 React 寫的前端代碼將會看起來像一個前衛的現代藝術裝置，這也有一點美妙的地方。如果你的老闆完全不明白發生了什麼，還認為你是個天才，因為你創建了這麼“精緻”的應用，那就更好了。
4. 虛擬 DOM：如此酷炫，你甚至不需要去理解它
啊，虛擬 DOM。React 的壓軸之作。這就是為什麼 React 如此迅猛快速——至少，他們是這麼告訴你的。我們大多數人只是點頭附和，假裝理解虛擬 DOM 實際做了什麼，因為聽起來複雜又令人印象深刻。這裡有個專業小提示：如果你被抓到突然發呆，只需說「它會對 DOM 進行最小更新的差異檢查」，人們就會認為你是天才。相信我，這有效。
但虛擬 DOM 的真正美妙之處在於你其實根本不需要知道它是如何運作的。它就那樣存在，靜靜在後台運行，使你的應用在某些可能重要但大多不可見的地方變得稍微快一些。把它視為 React 的方式，告訴你「別擔心，我搞定了。」畢竟，你最不想的就是在無聊的低階細節中深陷，當有許多迷因等著你去翻閱。
5. 狀態管理：因為光有 props 仍然不夠混亂
如果你認為管理狀態很簡單，顯然你還沒有正確接觸到 React 對狀態管理的各種方法。當然，React 提供了一個簡單的 useState Hook，但那只是入口毒品。不久後，你會發現自己陷入了 useReducer、useContext，或者更好的是，一個閃亮的新外部函式庫如 Redux、MobX 或 Recoil。
為什麼？因為 React 開發者在複雜中茁壯成長。將 props 傳遞幾個組件的行為太簡單了。讓我們讓事情變得不一樣！何不擁有全局狀態容器，讓你的組件可以與似乎在代碼中無法接觸的變數進行交互呢？這是開發者版的掃雷遊戲——一個錯誤的舉動，然後一切都崩潰。
當然，你可以將事情保持簡單，但這有什麼意思呢？使用 React 的一半樂趣就是看著初級開發者在狀態、props 和生命週期方法的浪潮中淹死，而你則提供像「你嘗試過使用 Redux Thunk 嗎？」這樣的智慧建議。
6. Hooks：你現在無法生活的閃亮玩具
React Hooks。還記得 React 是基於類別、生命週期方法如火如荼的時候嗎？哈哈，那是一個古老的時代——我想是 2018 年？好吧，忘掉那些，因為 React Hooks 現在來了，而且它們絕對是革命性的。更具革命性的是，它們讓 React 修復了類別組件所造成的混亂。
使用 Hooks，你可以在幾行代碼中編寫更多複雜邏輯的組件！想在一個組件中獲取一些數據，追蹤加載狀態，並觸發副作用？沒問題，隨便點幾個 useEffect hooks 和一個 useState 調味品，你就完成了。當然，如果你不理解依賴數組，可能會不小心觸發無限循環，但失去一點混亂又有什麼呢？
Hooks 是 React 的方式在告訴你「我們知道這已經很複雜了，所以這裡有一個全新的範式讓它變得更有趣」。但你會繼續使用它們，因為嘛，一旦你上癮，就永遠不會回頭。 （抱歉，這是一個雙關語。我克制不住。）
7. 生態系統：你可能不需要的數千個套件
React 的生態系統是龐大的。說龐大，我的意思是就像走進了一個自助餐廳，然後意識到有 57 種不同的意大利麵。需要路由器嗎？React Router 可以滿足你的需求。需要狀態管理嗎？選擇 Redux、MobX、Zustand、Recoil，或者剛剛在 GitHub 上出現的任何新庫。CSS in JS？Styled-components、Emotion，或也許只是原汁原味的 CSS 模組。選擇無窮無盡。
你會很快發現自己陷入 NPM 套件的洪流。有些維護良好，而有些則是被遺棄的廢墟，但這不會阻止你將大量依賴添加到 package.json 中。當然，你可以堅持基本，但為什麼要滿足於香草 React，當你可以創建歷史上最臃腫的前端應用？
畢竟，沒有什麼比花整整一天選擇狀態管理庫更能讓人感受到「現代開發者」的身份了，而不是，嗯，真正地構建你的實際應用。
8. React Native：一個幾乎能統治所有的平台代碼庫
讓我們別忘了 React 的小弟，React Native。寫一個代碼庫並將其部署到 Android 和 iOS 的夢想聽起來太棒了，對吧？好吧，React Native 正好承諾了這一點——有點。這就像一個好的電視購物廣告。你會得到 80% 的預期，但那最後 20%？哦，好吧，它會讓你努力。
「一次編寫，隨處運行」變成了「一次編寫，然後花幾個星期調試為什麼你的 UI 在 Android 上看起來很好，但在 iOS 上卻一團糟」。但嘿，至少你不需要編寫單獨的應用程序，誰需要睡眠呢？
React Native 是 React 的勝利之旅的重要組成部分。它剛好接近通用代碼庫的夢想，讓你保持興趣，但又足夠遠，確保你永遠不會停止調整和優化。完美的平衡。
結論：抵抗是徒勞的
那麼，為什麼 React 在前端競賽中獲勝？因為它擁有一切優勢：企業的支持、一個讓你質疑人生選擇的生態系統，以及足夠的複雜性讓開發者始終感到興奮和沮喪。你不必須喜歡 React，但老實說——你別無選擇。
最終，React 就像是一個你不確定是否想要觀看的熱門電影系列。你不確定自己想不想去看，但最終，因為每個人都在談論它，你會妥協。就這樣，你成為了我們的一員，開始寫 JSX，管理狀態，並向人們解釋為什麼「它不是一個框架」。
歡迎加入這個圈子。別擔心——你會習慣的。
原文出處：https://dev.to/pranta/why-react-won-the-front-end-race-4e55
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式