React 長期以來一直是首選的 JavaScript 函式庫，並且很容易成為世界上最受歡迎的函式庫之一。此外，隨著 Next.js 和 Remix 等流行框架建立在 React 之上，以及使用 React-Native 進行行動開發的能力，這個函式庫不會很快消失。然而，這樣做的問題是，大多數初學者都湧向 React，並在沒有真正理解它是如何工作的情況下開始學習它。那麼讓我們深入探討一下。

JSX 的工作原理

在 React 中，JSX (JavaScript XML) 是一種看起來與 HTML 類似但在 JavaScript 中工作的語法。它本身不是有效的 JavaScript，因此 React 使用轉譯器（通常是 Babel）將 JSX 轉換為標準 JavaScript。該 JavaScript 程式碼是瀏覽器最終解釋的內容。

當您編寫 JSX 時，它會轉換為 React.createElement() 函數呼叫。這些函數呼叫產生 React 元素，它們是 React 應用程式的建構塊。每個元素代表 UI 的一部分。

下面有一個例子：

React 元件中的 JSX

const element = (
  

    
Hello, React!
    
This is a paragraph.
  
);

JSX 轉換為 JavaScript：

const element = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello, React!'),
  React.createElement('p', null, 'This is a paragraph.')
);

React 接受這些嵌套的 React.createElement() 調用，並將它們轉換為瀏覽器 DOM 中相應的 HTML 元素。

結論

JSX 允許您編寫類似於 HTML 的語法，從而使編寫 React 元件變得更加容易，但它只是使用 JavaScript 創建應用程式結構的 React.createElement() 呼叫的語法糖。這就是 React 透過其 Virtual DOM 機制有效管理 UI 的原因。

如果您喜歡這篇文章，您可能也會喜歡我每周向像您一樣的開發人員發送的免費新聞通訊。您可以在這裡註冊。