什麼是 React 編譯器？

React 編譯器是一個新的實驗性編譯器，它有望徹底改變 React 應用程式效能最佳化的方式。

您可以透過這個免費的 Medium 連結閱讀和收聽播客格式的這篇文章。

什麼是編譯器？

簡而言之，編譯器是將一種程式語言（原始語言）翻譯成另一種程式語言（目標語言）的程式。

編譯器將原始語言翻譯成目標語言

例如，JSX 和 TSX 被編譯成 JavaScript（使用 Babel 或其他）以便瀏覽器理解程式碼。

為什麼要使用新的 React 編譯器？

我聽說的主要原因之一是效能最佳化。

有時，React 應用程式會遭受不必要的重新渲染，從而導致效能問題。
開發人員可以使用記憶、回調等方式來優化程式碼。但這通常會轉化為充滿記憶調用的混亂組件。

React 編譯器解決方案是什麼？

簡單來說，React Compiler 應該會自動優化你的程式碼，減少手動效能最佳化的需求。

因此，React Compiler 應該提高應用程式的回應能力。

讓我們深入探討一下。

什麼是 React 編譯器？

React 編譯器是 React 18 中已經提供的實驗性編譯器。即使在 React 19 中，它也很可能是一個可選工具。

在 React 18 中使用 React Compiler 需要一些手動配置，但您已經可以嘗試了。

React 編譯器設計為在 React 19 生態系中工作

安裝 React 編譯器

雖然 React Compiler 在 Instagram 的生產中使用，但它作為測試版開源並可在 React 17 上使用。

編譯器附帶了強烈建議的 eslint 插件，可以在編輯器中顯示編譯器分析。

即使您沒有使用 React Compiler，也可以使用 eslint 外掛程式。

React 編譯器健康檢查

在安裝 React Compiler 之前，建議檢查相容性。

執行以下指令：

npx react-compiler-healthcheck@beta

得到以下結果：

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

編譯組件的數量較多是一件好事。這是可以成功優化的元件數量。

我的 StrictMode 未啟用，但啟用並遵循此模式意味著遵循 React 規則的機會更高。
所以我們應該保持它啟用。

最後，react-compiler-healthcheck 檢查與編譯器不相容的已知函式庫。我沒有，但 MobX 會為你帶來問題。不行的。

安裝 React 編譯器

使用 npm 安裝 React 編譯器：

npx react-compiler-healthcheck@beta

或者，如果您使用的是 Yarn：

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

您也應該將 eslint 外掛程式加入到配置中。就我而言，它是一個 .eslintrc.js 檔案。

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

正確設定 eslint 外掛程式後，您可能會收到一些有關 React 規則的警告。您可以當場或稍後更新。

唯一的區別是在第二種情況下，React 跳過了對該元件或鉤子的最佳化。

您可以透過這個免費的 Medium 連結閱讀和收聽播客格式的這篇文章。

以上是什麼是 React 編譯器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！