v19.2Latest

除錯與疑難排解

本指南協助您在使用 React 編譯器時識別並修復問題。學習如何除錯編譯問題並解決常見問題。

理解編譯器行為

React 編譯器旨在處理遵循React 規則的程式碼。當它遇到可能違反這些規則的程式碼時，它會安全地跳過最佳化，而不是冒險改變您應用程式的行為。

編譯器錯誤發生在建置時期，會阻止您的程式碼編譯。這類錯誤很少見，因為編譯器的設計是跳過有問題的程式碼而非導致失敗。

執行階段問題發生在編譯後的程式碼行為與預期不同時。大多數情況下，如果您遇到 React 編譯器的問題，那通常是執行階段問題。這通常發生在您的程式碼以編譯器無法偵測的微妙方式違反了 React 規則，而編譯器錯誤地編譯了它本應跳過的元件。

在除錯執行階段問題時，請將精力集中在尋找受影響元件中未被 ESLint 規則偵測到的 React 規則違規。編譯器依賴於您的程式碼遵循這些規則，而當它們以編譯器無法偵測的方式被破壞時，就會發生執行階段問題。

React 編譯器可能破壞您應用程式的主要方式之一，是您的程式碼依賴記憶化來確保正確性。這意味著您的應用程式依賴於特定的值被記憶化才能正常運作。由於編譯器的記憶化方式可能與您手動的方式不同，這可能導致意外行為，例如副作用過度觸發、無限迴圈或更新遺漏。

常見的發生情境：

遇到問題時，請遵循以下步驟：

如果您遇到編譯器錯誤意外中斷了您的建置，這很可能是編譯器中的錯誤。請向facebook/react儲存庫報告，並附上：

對於執行階段行為問題：

使用"use no memo"來隔離問題是否與編譯器相關：

如果問題消失，則很可能與違反 React 規則有關。

您也可以嘗試從有問題的元件中移除手動記憶化（useMemo、useCallback、memo），以驗證您的應用程式在沒有任何記憶化的情況下能正確運作。如果移除所有記憶化後錯誤仍然發生，則表示您有一個需要修復的 React 規則違規。

如果您認為發現了編譯器錯誤：