漸進式採用
React Compiler 可以漸進式採用，讓您先在程式碼庫的特定部分試用。本指南將向您展示如何在現有專案中逐步推出編譯器。
您將學習
- 為何推薦漸進式採用
- 使用 Babel 覆寫進行基於目錄的採用
- 使用 "use memo" 指令進行選擇性編譯
- 使用 "use no memo" 指令排除元件
- 使用閘道控制的執行階段功能標誌
- 監控您的採用進度
為何採用漸進式？
React Compiler 旨在自動優化您的整個程式碼庫，但您不必一次全部採用。漸進式採用讓您能控制推出過程，讓您先在應用程式的小部分測試編譯器，再擴展到其餘部分。
從小處著手有助於您建立對編譯器優化的信心。您可以驗證應用程式在編譯後的程式碼下行為是否正確，測量效能改進，並識別程式碼庫特有的任何邊緣案例。這種方法對於穩定性至關重要的生產應用程式尤其有價值。
漸進式採用也使處理編譯器可能發現的任何 React 規則違規變得更容易。您不必一次修復整個程式碼庫的違規，而是可以在擴展編譯器覆蓋範圍時系統性地處理它們。這使得遷移過程更易於管理，並降低了引入錯誤的風險。
透過控制哪些程式碼部分被編譯，您還可以執行 A/B 測試來衡量編譯器優化在實際情況中的影響。這些數據有助於您做出關於全面採用的明智決策，並向您的團隊展示其價值。
漸進式採用的方法
有三種主要方法可以漸進式採用 React Compiler：
- Babel 覆寫 - 將編譯器應用於特定目錄
- 使用 "use memo" 選擇加入 - 僅編譯明確選擇加入的元件
- 執行階段閘道控制 - 使用功能標誌控制編譯
所有方法都允許您在全面推出前，在應用程式的特定部分測試編譯器。
使用 Babel 覆寫進行基於目錄的採用
Babel 的overrides選項讓您可以將不同的外掛程式套用到程式碼庫的不同部分。這非常適合逐個目錄漸進式採用 React Compiler。
基本配置
首先將編譯器套用到特定目錄：
擴展覆蓋範圍
隨著您建立信心，新增更多目錄：
使用編譯器選項
您也可以為每個覆寫配置編譯器選項：
使用 "use memo" 的選擇加入模式
為了獲得最大控制權，您可以使用compilationMode: 'annotation' 來僅編譯那些明確使用 "use memo"指令選擇加入的元件和鉤子。
注意
這種方法讓您能對個別元件和鉤子進行細粒度控制。當您想在特定元件上測試編譯器而不影響整個目錄時，這非常有用。
註解模式配置
使用指令
在您想要編譯的函式開頭新增"use memo"：
使用compilationMode: 'annotation'時，您必須：
- 在您想要最佳化的每個元件中新增
"use memo" - 在每個自訂 Hook 中新增
"use memo" - 記得在新元件中新增它
這讓您能精確控制哪些元件被編譯，同時評估編譯器的影響。
使用 Gating 的執行階段功能標誌
gating選項讓您能使用功能標誌在執行階段控制編譯。這對於執行 A/B 測試或根據使用者群組逐步推出編譯器非常有用。
Gating 如何運作
編譯器將最佳化的程式碼包裹在一個執行階段檢查中。如果閘門函數回傳true，則執行最佳化版本。否則，執行原始程式碼。
Gating 配置
實作功能標誌
建立一個匯出您的閘門函數的模組：
疑難排解採用問題
如果您在採用過程中遇到問題：
- 使用
"use no memo"暫時排除有問題的元件 - 查看 除錯指南以了解常見問題
- 修復 ESLint 外掛程式識別出的 React 規則違規
- 考慮使用
compilationMode: 'annotation'以更逐步地採用