部落格

React 編譯器 Beta 版發布

2024 年 10 月 21 日，Lauren Tan 發表。

React 團隊很高興分享新的更新

  1. 我們今天發布了 React 編譯器 Beta 版，以便早期採用者和函式庫維護者可以試用並提供回饋。
  2. 我們正式支援 React 17+ 以上應用程式的 React 編譯器，透過一個可選的 react-compiler-runtime 套件。
  3. 我們正在開放 React 編譯器工作小組 的公開成員資格，為社群逐步採用編譯器做好準備。

在 2024 React 大會 上，我們宣布了 React 編譯器的實驗性版本，這是一個透過自動記憶體優化 React 應用程式的建置時工具。您可以在這裡找到 React 編譯器的介紹。

自第一個版本發布以來，我們修復了 React 社群回報的大量錯誤，收到了針對編譯器的幾個高質量的錯誤修復和貢獻1，使編譯器對各種 JavaScript 模式更具彈性，並持續在 Meta 內部更廣泛地推廣編譯器。

在這篇文章中，我們想分享 React 編譯器的後續發展。

立即試用 React 編譯器 Beta 版

在 2024 React 印度大會 上，我們分享了 React 編譯器的更新資訊。今天，我們很高興宣布 React 編譯器和 ESLint 插件的新 Beta 版。新的 Beta 版本使用 @beta 標籤發布到 npm。

安裝 React 編譯器 Beta 版

終端機
npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

或者，如果您使用的是 Yarn

終端機
yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

您可以在這裡觀看 Sathya Gunasekaran 在 React 印度大會上的演講

我們建議每個人現在都使用 React 編譯器程式碼檢查工具

React 編譯器的 ESLint 插件可幫助開發人員主動識別和糾正違反 React 規則 的情況。 我們強烈建議大家現在就使用這個程式碼檢查工具。該程式碼檢查工具不需要您安裝編譯器，因此您可以獨立使用它，即使您尚未準備好試用編譯器。

僅安裝程式碼檢查工具

終端機
npm install -D eslint-plugin-react-compiler@beta

或者，如果您使用的是 Yarn

終端機
yarn add -D eslint-plugin-react-compiler@beta

安裝後，您可以透過 將其新增至 ESLint 設定 來啟用程式碼檢查工具。使用程式碼檢查工具有助於識別違反 React 規則的情況，讓您在編譯器正式發布時更容易採用它。

向下相容性

React 編譯器產生的程式碼依賴於 React 19 中新增的執行階段 API，但我們之後也增加了對 React 17 和 18 的編譯器支援。如果您尚未使用 React 19，在 Beta 版中，您現在可以透過在編譯器設定中指定最低 target，並將 react-compiler-runtime 作為依賴項來試用 React 編譯器。 您可以在這裡找到相關文件。

在函式庫中使用 React 編譯器

我們的初始版本專注於識別在應用程式中使用編譯器的主要問題。我們獲得了很好的回饋，並從那時起大幅改進了編譯器。我們現在已準備好接收來自社群的廣泛回饋，並讓函式庫作者試用編譯器，以提高效能和維護函式庫的開發體驗。

React 編譯器也可以用來編譯函式庫。由於 React 編譯器需要在任何程式碼轉換之前在原始程式碼上執行，因此應用程式的建置流程無法編譯他們使用的函式庫。因此，我們建議函式庫維護者獨立使用編譯器編譯和測試他們的函式庫，並將編譯後的程式碼發布到 npm。

由於您的程式碼已預先編譯，因此您的函式庫使用者將不需要啟用編譯器即可受益於套用至您的函式庫的自動記憶體優化。如果您的函式庫目標應用程式尚未使用 React 19，請指定最低 target，並將 react-compiler-runtime 作為直接依賴項新增。執行階段套件將根據應用程式的版本使用正確的 API 實作，並在必要時填充缺少的 API。

您可以在這裡找到更多相關文件。

開放 React 編譯器工作小組給所有人

我們先前在 React Conf 上宣布了僅限邀請參加的 React 編譯器工作小組，以便針對編譯器的實驗版本提供意見回饋、提出問題並進行協作。

從今天開始，隨著 React 編譯器 Beta 版的發布，我們將開放工作小組成員資格給所有人。React 編譯器工作小組的目標是讓生態系統做好準備，以便現有的應用程式和函式庫能夠順利、逐步地採用 React 編譯器。請繼續在 React 倉庫 中提交錯誤報告，但在 工作小組討論區 中留下意見回饋、提出問題或分享想法。

核心團隊也將使用討論區倉庫來分享我們的研究成果。隨著穩定版越來越接近，任何重要資訊也會發布在此論壇上。

Meta 的 React 編譯器

在 React Conf 上，我們分享了編譯器在 Quest Store 和 Instagram 上的成功推出經驗。從那時起，我們已將 React 編譯器部署到 Meta 的其他幾個主要網路應用程式中，包括 Facebook 和 Threads。這表示如果您最近使用過這些應用程式，您的體驗可能已由編譯器提供支援。我們能夠將這些應用程式整合到編譯器中，只需少量程式碼變更，即可在擁有多個超過 100,000 個 React 元件的 monorepo 中使用。

我們在所有這些應用程式中都看到了顯著的效能提升。隨著我們推出編譯器，我們持續看到 先前在 ReactConf 上分享的成果。這些應用程式多年來已由 Meta 工程師和 React 專家進行了大量的手動調整和最佳化，因此即使效能提升幾個百分點，對我們來說也是一大勝利。

我們也預計 React 編譯器能提升開發人員的生產力。為了衡量這一點，我們與 Meta 的資料科學合作夥伴2 合作，對手動記憶體優化對生產力的影響進行了徹底的統計分析。在 Meta 推出編譯器之前，我們發現只有大約 8% 的 React 拉取請求使用了手動記憶體優化，而且這些拉取請求的撰寫時間增加了 31-46%3。這證實了我們的直覺，即手動記憶體優化會導致認知負擔，我們預計 React 編譯器將能更有效率地撰寫和審查程式碼。值得注意的是，React 編譯器預設會對*所有*程式碼進行記憶體優化，而不僅僅是開發人員明確應用記憶體優化的 8%（在我們的案例中）。

邁向穩定版的路線圖

這不是最終的路線圖，可能會有所變更。

我們打算在 Beta 版之後不久推出編譯器的候選發布版 (RC)，屆時大多數遵循 React 規則的應用程式和函式庫都已證明可以與編譯器良好運作。在社群提供最終意見回饋後，我們計畫推出編譯器的穩定版。穩定版將標誌著 React 新基礎的開始，強烈建議所有應用程式和函式庫使用編譯器和 ESLint 外掛程式。

  • ✅ 實驗版：在 React Conf 2024 上發布，主要供早期採用者提供意見回饋。
  • ✅ 公開 Beta 版：今天開放，供更廣泛的社群提供意見回饋。
  • 🚧 候選發布版 (RC)：React 編譯器適用於大多數遵循規則的應用程式和函式庫，且沒有問題。
  • 🚧 正式發行版 (GA)：在社群提供最終意見回饋期之後。

這些版本也包含編譯器的 ESLint 外掛程式，可顯示由編譯器靜態分析的診斷訊息。我們計畫將現有的 eslint-plugin-react-hooks 外掛程式與編譯器的 ESLint 外掛程式合併，因此只需安裝一個外掛程式即可。

在穩定版發布後，我們計畫新增更多編譯器最佳化和改進。這包括持續改進自動記憶體優化，以及全新的最佳化，只需最少或甚至不需要更改產品程式碼。升級到每個新版本的編譯器都旨在簡化流程，每次升級都將持續提高效能，並更好地處理各種 JavaScript 和 React 模式。

在整個過程中，我們還計畫製作 React IDE 擴充功能的原型。目前仍在研究的初期階段，因此我們希望在未來的 React Labs 部落格文章中分享更多研究成果。

感謝 Sathya Gunasekaran、Joe Savona、Ricky Hanlon、Alex Taylor、Jason Bonta 和 Eli White 審閱和編輯這篇文章。

註腳

  1. 感謝 @nikeee、@henryqdineen、@TrickyPi 以及其他幾位對編譯器的貢獻。 ↩

  2. 感謝 Vaishali Garg 領導這項關於 Meta 的 React 編譯器的研究，並審閱這篇文章。 ↩

  3. 在控制作者年資、差異長度/複雜性和其他潛在的混淆因素之後。 ↩

上一頁部落格
下一頁React Conf 2024 回顧