v19.2Latest

簡介

React Compiler 是一個新的建置階段工具，能自動最佳化您的 React 應用程式。它使用純 JavaScript 運作，並理解React 規則，因此您無需重寫任何程式碼即可使用它。

您將學習
  • React Compiler 的功能
  • 開始使用編譯器
  • 增量採用策略
  • 出錯時的除錯與疑難排解
  • 在您的 React 函式庫上使用編譯器

React Compiler 的功能是什麼？

React Compiler 在建置階段自動最佳化您的 React 應用程式。React 通常在不進行最佳化的情況下已經足夠快，但有時您需要手動記憶化元件和值以保持應用程式的響應性。這種手動記憶化既繁瑣又容易出錯，並且增加了需要維護的額外程式碼。React Compiler 會自動為您執行此最佳化，讓您從這種心智負擔中解脫出來，從而專注於建置功能。

在 React Compiler 之前

沒有編譯器時，您需要手動記憶化元件和值來最佳化重新渲染：

注意

這種手動記憶化存在一個細微的錯誤，會破壞記憶化：

即使 handleClick 被包裹在 useCallback 中，箭頭函數 () => handleClick(item) 會在元件每次渲染時建立一個新函數。這意味著 Item總是會接收到一個新的onClickprop，從而破壞記憶化。

React Compiler 能夠正確地最佳化此程式碼，無論是否有箭頭函數，都能確保Item 僅在 props.onClick變更時才重新渲染。

在 React Compiler 之後

使用 React Compiler 時，您編寫相同的程式碼而無需手動記憶化：

在 React Compiler Playground 中查看此範例

React Compiler 會自動套用最佳記憶化，確保您的應用程式僅在必要時才重新渲染。

Deep Dive
React Compiler 加入了哪種記憶化？

我應該試用編譯器嗎？

我們鼓勵大家開始使用 React Compiler。雖然編譯器目前仍然是 React 的可選附加元件，但未來某些功能可能需要編譯器才能完全運作。

使用它安全嗎？

React Compiler 現已穩定，並已在生產環境中進行了廣泛測試。雖然它已在 Meta 等公司的生產環境中使用，但將編譯器部署到你的應用程式的生產環境將取決於你的程式碼庫的健康狀況以及你遵循React 規則的程度。

支援哪些建置工具？

React Compiler 可以安裝在多種建置工具上，例如 Babel、Vite、Metro 和 Rsbuild。

React Compiler 主要是一個圍繞核心編譯器的輕量級 Babel 外掛包裝器，其設計目的是與 Babel 本身解耦。雖然編譯器的初始穩定版本將主要作為 Babel 外掛，但我們正在與 swc 和oxc團隊合作，為 React Compiler 建立一流的支援，這樣你將來就不必將 Babel 重新加入建置流程中。

Next.js 使用者可以透過使用 v15.3.1及更高版本來啟用 swc 調用的 React Compiler。

我應該如何處理 useMemo、useCallback 和 React.memo？

預設情況下，React Compiler 將根據其分析和啟發式方法來記憶化你的程式碼。在大多數情況下，這種記憶化將與你手動編寫的一樣精確，甚至更精確。

然而，在某些情況下，開發人員可能需要對記憶化進行更多控制。useMemo 和 useCallbackHook 可以繼續與 React Compiler 一起使用，作為一個逃生艙口，以控制哪些值被記憶化。一個常見的使用情境是，如果一個記憶化的值被用作 effect 的依賴項，以確保即使其依賴項沒有實質性變化，effect 也不會重複觸發。

對於新程式碼，我們建議依賴編譯器進行記憶化，並在需要時使用useMemo/useCallback 來實現精確控制。

對於現有程式碼，我們建議要麼保留現有的記憶化（移除它可能會改變編譯輸出），要麼在移除記憶化之前仔細測試。

試用 React Compiler

本節將幫助你開始使用 React Compiler，並了解如何在你的專案中有效地使用它。

其他資源

除了這些文件，我們建議查看React 編譯器工作小組以獲取關於編譯器的額外資訊與討論。

上一篇React 編譯器下一篇安裝