React JSX 如何在幕後轉換為 JavaScript

當你寫 React 時，你會經常看到 JSX——一種在 JavaScript 程式碼中看起來像 HTML 的語法。但你有沒有想過這段程式碼在瀏覽器中是如何運作的呢？

神奇之處在於：JSX 不是有效的 JavaScript！瀏覽器無法直接理解它。在幕後，像 Babel 這樣的工具介入將 JSX 轉換（或「轉譯」）為常規 JavaScript。

流程：

1.你寫 JSX – 它看起來像 HTML，但存在於你的 React 元件中。例如：

const element = <h1 id="Hello-World">Hello, World!</h1>;

2.Babel 轉換 – 在建置過程中，Babel 使用 React.createElement:
將 JSX 轉換為純 JavaScript

const element = React.createElement('h1', null, 'Hello, World!');

3.瀏覽器中的 JavaScript – 最後，這個標準 JavaScript 是瀏覽器執行的，動態建構 DOM。

巴別塔是如何運作的？

Babel 是一個強大的 JavaScript 編譯器，可讓您使用最新的 JavaScript 功能（包括 React 中的 JSX），同時確保不同瀏覽器和環境之間的相容性。以下是 Babel 工作原理的詳細說明：
1.解析
Babel 先將現代 JavaScript 或 JSX 程式碼解析為抽象語法樹 (AST)。 AST 是一種詳細的樹狀結構，以 Babel（和其他工具）易於使用的方式表示程式碼來分析和操縱。在此步驟中，Babel 讀取了程式碼，但尚未更改它。
例如，Babel 採用以下 JSX 程式碼：

const element = <h1 id="Hello-World">Hello, World!</h1>;

並產生一個AST，代表這段程式碼的結構。
2.轉變
接下來，Babel 將一系列外掛程式套用到AST。每個插件負責根據它定義的 規則 轉換 AST 的特定部分。這些轉換可以包括將現代 JavaScript 語法（如箭頭函數或 async/await）轉換為舊的、瀏覽器相容的版本。
對於 JSX，Babel 進行轉換：

const element = <h1 id="Hello-World">Hello, World!</h1>;

const element = React.createElement('h1', null, 'Hello, World!');

3。 程式碼產生
完成所有轉換後，Babel 從轉換後的 AST 產生 JavaScript 程式碼。這是產生人類可讀輸出的最後一步，瀏覽器或 Node.js 可以執行該輸出。

讓我們得出結論...

為什麼它很重要：

JSX 允許您編寫更直觀、基於元件的 UI 程式碼，但 Babel 和 JavaScript 運行時讓它變得栩栩如生。了解這種轉換可以幫助您更好地排除故障並編寫更優化的 React 應用程式。

以上是React JSX 如何在幕後轉換為 JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！