React Labs：我們最近的工作進展 - 2022 年 6 月
2022 年 6 月 15 日，由 Andrew Clark、Dan Abramov、Jan Kassens、Joseph Savona、Josh Story、Lauren Tan、Luna Ruan(阮玉蘭)、Mengdi Chen(陳夢迪)、Rick Hanlon、Robert Zhang(張家軒)、Sathya Gunasekaran、Sebastian Markbåge 和 Xuan Huang(黃玄) 發佈
React 18 的開發歷時數年，React 團隊也從中汲取了寶貴的經驗。它的發佈是多年研究和探索許多路徑的結果。有些路徑是成功的；更多的是死胡同， dẫn đến những hiểu biết mới. 我們學到的一個教訓是，如果社群在不了解我們正在探索的這些路徑的情況下等待新功能，會感到沮喪。
我們通常會同時進行許多專案，從實驗性專案到明確定義的專案都有。展望未來，我們希望開始定期與社群分享更多關於我們在這些專案中的工作進展。
為了設定預期，這不是一個有明確時間表的路線圖。其中許多專案正在積極研究中，難以確定具體的發佈日期。根據我們的學習情況，它們甚至可能永遠不會以目前的迭代形式發佈。相反，我們想與您分享我們正在積極思考的問題空間，以及我們迄今為止的學習成果。
伺服器元件
我們在 2020 年 12 月發佈了 React 伺服器元件 (RSC) 的實驗性 Demo。從那時起，我們一直在 React 18 中完成它的依賴項，並根據實驗回饋進行更改。
特別是，我們放棄了使用分支 I/O 函式庫（例如 react-fetch）的想法，而是採用 async/await 模型以獲得更好的相容性。這在技術上並不會阻止 RSC 的發佈，因為您也可以使用路由器來擷取資料。另一個變化是，我們也正在放棄檔案副檔名方法，轉而採用 註釋邊界 的方式。
我們正在與 Vercel 和 Shopify 合作，在 Webpack 和 Vite 中統一對共享語義的打包器支援。在發佈之前，我們希望確保 RSC 的語義在整個 React 生態系統中都是相同的。這是達到穩定版本的 主要障礙。
資源載入
目前，像腳本、外部樣式、字體和圖像等資源通常使用外部系統進行預載和載入。這使得跨串流、伺服器元件等新環境的協調變得困難。我們正在考慮新增 API，透過可在所有 React 環境中運作的 React API 來預載和載入重複的外部資源。
我們也正在考慮讓這些 API 支援 Suspense，以便您可以讓圖像、CSS 和字體在載入完成之前阻擋顯示，但不會阻擋串流和並行渲染。這可以幫助避免 「爆米花」 現象（視覺元素突然出現和版面偏移）。
靜態伺服器渲染最佳化
靜態網站生成 (SSG) 和增量靜態再生 (ISR) 是提高可快取頁面效能的絕佳方法，但我們認為可以新增一些功能來提高動態伺服器端渲染 (SSR) 的效能，尤其是在大多數但並非所有內容都可快取的情況下。我們正在探索利用編譯和靜態處理來最佳化伺服器渲染的方法。
React 優化編譯器
我們在 2021 年的 React Conf 上提前預覽了 React Forget。它是一個編譯器，可以自動生成等效的 useMemo 和 useCallback 呼叫，以最大限度地降低重新渲染的成本，同時保留 React 的程式設計模型。搶先預覽
最近，我們完成了編譯器的重寫，使其更可靠且功能更強大。這種新的架構允許我們分析和記憶更複雜的模式，例如 局部變異 的使用，並開啟了許多新的編譯時優化機會，而不僅僅是與記憶 Hook 相提並論。
我們也正在開發一個遊樂場，用於探索編譯器的許多方面。雖然遊樂場的目標是使編譯器的開發更容易，但我們認為它將更容易嘗試並建立對編譯器功能的直覺。它揭示了其底層工作原理的各種見解，並在您輸入時即時渲染編譯器的輸出。這將在編譯器發布時與其一起發布。
Offscreen
如今，如果您想要隱藏和顯示組件，您有兩個選項。一種是將其完全添加到樹中或從樹中移除。這種方法的問題是，每次卸載時，UI 的狀態都會丟失，包括儲存在 DOM 中的狀態，例如捲動位置。
另一個選項是保持組件已掛載，並使用 CSS 在視覺上切換外觀。這會保留 UI 的狀態，但會導致效能成本，因為 React 必須在每次收到新的更新時，持續渲染隱藏的組件及其所有子組件。
Offscreen 引入了第三個選項：在視覺上隱藏 UI，但降低其內容的優先級。這個想法與 content-visibility CSS 屬性在精神上相似：當內容被隱藏時，它不需要與 UI 的其餘部分保持同步。 React 可以將渲染工作延遲到應用程式的其餘部分閒置，或者直到內容再次變得可見為止。
Offscreen 是一種低階功能，可以解鎖高階功能。類似於 React 的其他並發功能，例如 startTransition，在大多數情況下，您不會直接與 Offscreen API 互動，而是透過一個固執己見的框架來實作諸如以下的模式：
- 即時轉場。 一些路由框架已經預先擷取資料以加速後續的導覽，例如滑鼠懸停在連結上時。借助 Offscreen，它們還能夠在背景中預先渲染下一個畫面。
- 可重複使用的狀態。 同樣，在路由或標籤頁之間導覽時，您可以使用 Offscreen 來保留前一個畫面的狀態，以便您可以切換回來並從您離開的地方繼續。
- 虛擬化清單渲染。 顯示大量項目清單時，虛擬化清單框架將預先渲染比目前可見的更多行。您可以使用 Offscreen 以比清單中可見項目更低的優先級預先渲染隱藏的行。
- 背景內容。 我們也正在探索一項相關功能，用於在不隱藏內容的情況下降低背景內容的優先級，例如顯示模態覆蓋時。
轉場追蹤
目前，React 有兩個效能分析工具。原始的 Profiler 顯示效能分析會話中所有提交的概覽。對於每個提交，它還會顯示所有已渲染的組件以及渲染它們所花費的時間。我們還有一個在 React 18 中引入的 時間軸 Profiler 的測試版，它顯示組件何時安排更新以及 React 何時處理這些更新。這兩個效能分析器都可以幫助開發人員識別程式碼中的效能問題。
我們意識到，開發人員覺得了解個別緩慢的提交或脫離上下文的組件沒有那麼有用。了解實際導致緩慢提交的原因更有用。而且開發人員希望能夠追蹤特定的互動（例如按鈕點擊、初始加載或頁面導覽），以觀察效能回歸，並了解互動緩慢的原因以及如何解決它。
我們之前嘗試透過創建一個 互動追蹤 API 來解決這個問題，但它有一些根本的設計缺陷，降低了追蹤互動緩慢原因的準確性，有時甚至導致互動永遠不會結束。由於這些問題，我們最終 刪除了這個 API。
我們正在開發新版本的互動追蹤 API（暫時稱為轉場追蹤，因為它是透過 startTransition 啟動的），可以解決這些問題。
新的 React 文件
去年，我們宣布了新 React 文件網站的測試版（後來作為 react.dev 發布）。新的學習教材首先教授 Hooks，並包含新的圖表、插圖以及許多互動式範例和挑戰。我們暫停了這項工作，專注於 React 18 的發布，但現在 React 18 已經發布，我們正在積極努力完成並發布新的文件。
我們目前正在撰寫一個關於副作用（Effects）的詳細章節，因為我們聽說這對 React 新手和經驗豐富的使用者來說都是一個比較具有挑戰性的主題。與副作用同步是本系列的第一個已發布頁面，接下來幾週還會有更多內容。當我們開始撰寫關於副作用的詳細章節時，我們意識到通過向 React 添加一個新的基本元素可以簡化許多常見的副作用模式。我們在useEvent RFC中分享了一些初步的想法。它目前處於早期研究階段，我們仍在迭代這個想法。我們感謝社群迄今為止對 RFC 的評論，以及對正在進行的文件重寫的反饋和貢獻。我們特別要感謝Harish Kumar提交和審閱了新網站實作的許多改進。
感謝Sophie Alpert審閱這篇部落格文章！