怪不得這么多人學 React！
大家好，我是 CUGGZ。
React 大會于 2024 于 5 月 15 - 16 日舉行，本文就來回顧一下活動第一天的部分關鍵信息！
React 團隊的男女顏值擔當都來了，怪不得這么多人學 React 呢！（開個玩笑，下面來看正文）
React 19 新功能
React 19 Beta 版本已于近日發(fā)布，即將發(fā)布 RC 版，距離正式版又進了一步。
React 19 中的新功能主要包括：
- Actions 功能：通過 useTransition 和 useOptimistic 等 Hook 改進了處理異步操作和狀態(tài)更新的方式，簡化了掛起狀態(tài)、錯誤處理、樂觀更新的管理。
- 服務器組件：
- 服務器組件：React 19 正式集成了服務器組件特性，允許在構建前預先渲染組件，提供了兩種運行模式：構建時運行和實時請求處理。
- 服務器操作：允許客戶端組件調用并執(zhí)行服務端的異步函數(shù)，通過“use server”指令定義服務器操作，框架會創(chuàng)建指向服務端函數(shù)的引用。
- 功能優(yōu)化：
ref 作為屬性：ref 可以作為函數(shù)組件的參數(shù)直接訪問，不再需要 forwardRef。
水合錯誤報告優(yōu)化：改進了客戶端渲染與服務端渲染內容不匹配時的錯誤報告，提供了更清晰的錯誤信息。
作為提供者的 ：可以直接使用 <Context> 作為提供者，而無需傳統(tǒng)的 <Context.Provider>。
refs 清理函數(shù)：支持從 ref 回調函數(shù)返回一個清理函數(shù)，以便在組件卸載時進行清理工作。
useDeferredValue 的初始值：允許指定組件首次渲染時的值。
文檔元數(shù)據(jù)支持：允許在組件中直接定義 <title>、<link> 和 <meta> 等文檔元數(shù)據(jù)標簽，React 會自動將它們提升到文檔的 <head> 部分。
樣式表支持：提供了內置支持，允許在組件樹中直接管理樣式表，并自動處理樣式表的加載順序。
異步腳本支持：允許在組件樹的任何位置渲染異步腳本，簡化了腳本的管理。
資源預加載支持：引入了預加載 API，如 prefetchDNS、preconnect、preload 和 preinit，以優(yōu)化資源加載。
與第三方腳本和擴展的兼容性：改進了對第三方腳本和瀏覽器擴展的兼容性。
更好的錯誤報告：優(yōu)化了錯誤處理，提供了更多的錯誤處理選項。
自定義元素支持（Web Components）：增強了對自定義元素的支持。
React 編譯器開源
React 編譯器開源正式開源，并將在 React 19 中可用。值得一提的是，React 編譯器源代碼有近 36 萬行代，提交了 1900 次，底層使用 Rust 語言編寫。
目前可以在 React 19 beta 或者在線 Playground 中（https://playground.react.dev/）嘗試！
源代碼：https://github.com/facebook/react/tree/main/compiler。
React 編譯器（React Compiler）是一個實驗性工具，旨在通過自動優(yōu)化來提高 React 應用的性能。它通過理解 JavaScript 語義和 React 的規(guī)則，自動對代碼進行諸如記憶等優(yōu)化，從而減少不必要的計算和渲染，提升應用的響應速度和用戶體驗。
有了 React 編譯器，useMemo、useCallback、React.memo 等 API 都不需要了。
注意：
- 實驗性：React 編譯器目前仍處于實驗階段，尚未完全準備好用于生產環(huán)境。
- React 19 Beta 兼容：要使用 React 編譯器，需要確保項目依賴的是 React 19 Beta 或更高版本。
- 代碼庫健康與 React 規(guī)則：編譯器的效果取決于代碼庫的健康狀況以及遵循 React 規(guī)則的程度。如果代碼已經很好地進行了手動優(yōu)化，那么使用編譯器可能不會帶來顯著的性能提升。
- 不急于使用：盡管 React 團隊鼓勵在非關鍵項目中進行小規(guī)模實驗以提供反饋，但在將編譯器推廣到你的生產環(huán)境之前，請務必謹慎考慮。等待編譯器達到穩(wěn)定版本后再采用可能是一個更好的選擇。
- 集成與配置：React 編譯器與多種構建工具和框架兼容，但可能需要一些額外的配置才能正確集成。請仔細閱讀官方文檔，并按照指南進行配置。
官方文檔：https://react.dev/learn/react-compiler。
React Router 與 Remix 合并
在 React Conf 上，Remix 宣布與 React Router 合并。在即將發(fā)布的 React Router v7 中，將包含 Remix 的所有特性，屆時，對于 Remix 用戶，只需更改 import 語句即可；而對于 React Router 用戶，可以直接在 React 項目中使用 Remix 的特性！
那為什么 Remix 要合并到 React Router 中呢？
- Remix 作為構建在 React Router 之上的框架，兩者之間的界限變得越來越模糊。
- 隨著 Create React App 不再被推薦，社區(qū)需要一個新的、更好的方式來構建 React 應用，Remix 希望能填補這一空缺。
- React Router 用戶量更龐大，合并使得現(xiàn)有的 React Router 項目能夠更容易地采用 Remix 的特性（換一種方式推廣 Remix）。
Remix 是什么？
Remix 是 React Router 團隊開源的一個全棧 Web 框架。早期需要付費使用，于 2021 年正式開源，開源時還引起了不小的討論，很多人都認為它將成為 Next.js 的有力競爭對手。不過，開源兩年半的時間，Remix 和 Next.js 的下載量可謂是天差地別，：
兩個 React
主要討論了在使用 React 構建用戶界面（UI）時，組件應該在客戶端還是服務端運行的問題。
- 客戶端運行組件的優(yōu)勢：
- 即時反饋：用戶與UI交云時，如點擊按鈕，可以獲得即時的反饋，無需等待服務器響應。
- 無需服務器輪詢：對于一些用戶操作，如拖動滑塊或點擊按鈕，不需要服務器的額外請求或數(shù)據(jù)下載。
- 更好的用戶體驗：直接的交互響應提升了用戶體驗，使得應用感覺更靈敏和流暢。
- 利用客戶端狀態(tài)：組件可以使用客戶端狀態(tài)（UI = f(state)），這允許構建高度交互式和響應式的用戶界面。
- 服務端運行組件的優(yōu)勢：
數(shù)據(jù)訪問：服務端組件可以訪問服務器上的數(shù)據(jù)和文件，這對于數(shù)據(jù)密集型的應用非常有用。
預處理數(shù)據(jù)：在數(shù)據(jù)發(fā)送到客戶端之前，服務端組件可以對數(shù)據(jù)進行讀取和預處理。
構建時渲染：服務端組件可以在應用構建時運行，生成靜態(tài)的UI，這對于SEO和首屏加載性能有好處。
簡化客戶端：通過在服務端處理復雜的數(shù)據(jù)處理邏輯，可以減少客戶端的負擔，使得客戶端只接收并顯示必要的UI數(shù)據(jù)。
可以參見 Dan Abramov 的博客文章：https://overreacted.io/the-two-reacts/。
