[譯]JSX的替代品

前言

JSX現在是一種非常受歡迎的選擇，使用者在各種框架中進行模板模式開發，而不僅僅是在React中，但是，如果你不喜歡它，或者有一個你想要避免使用它的專案，或者只是好奇如何在沒有它的情況下編寫您的React程式碼呢？最簡單的答案是閱讀官方文件，但是它有點短。

我們有更多的選擇

免責宣告：就個人而言，我喜歡JSX並在我的React專案中使用它，但是，我稍微研究了這個主題，發現了一些成果，並想分享給大家。

首先，我們需要了解JSX是什麼，以便用純JavaScript程式碼來編寫匹配的程式碼。

JSX是一種特定於域的語言，這意味著我們需要使用JSX轉換程式碼以獲得常規JavaScript，否則瀏覽器將無法理解我們的程式碼。在未來，如果你的目標瀏覽器不是完全支援所有的JSX語法轉換，您就無法完全刪除轉換，這可能是一個問題。

理解JSX的最佳方法可能是使用babel-repl實際執行此操作。您需要單擊presets（應該在左側皮膚中）並且選擇react，以便正確解析它。之後，您將能夠在右側實時檢視JavaScript程式碼。例如，您可以寫入以下內容：

其實這段原本寫法為。

您可以看到每<%tag%>的結構，都被函式呼叫React.createElement替換。

第一個引數是徐建活具有內建標記值的字串（如div或span），第二個引數是關於options 所有其餘引數都被視為子項。

我強烈建議您使用不同的樹來玩，例如，看看React如何使用true或false值、陣列、元件等呈現屬性：即使您只使用JSX和漂亮的內容，它也很有用。

要深入閱讀JSX，有一個[官方文件](https://reactjs.org/docs/jsx-in-depth.html)頁面

雖然生成的程式碼完全有效，並且我們可以用這種方式編寫所有的React程式碼，但這種方法存在一些問題。

第一個問題是它非常冗長。就像真人一樣很囉嗦，這裡的主要罪犯是React.createElement。因此，第一個解決方案是把它儲存到一個變數，通常命名為h，類似hyperscript。這將為您節省大量文字，並使其更具可讀性。為了說明這一點，讓我們重寫一下過去的例子：

如果您使用過上面任何一個例子用於開發的話，您會發現它有幾個缺陷。首先，React.createElement函式需要 3個引數，所以如果沒有屬性，你必須提供null，並且className可能是最常見的屬性，每次都需要編寫一個新物件。

作為替代方案，您可以使用react-hyperscript庫。它不需要提供空道具，也允許您以類似emmet的樣式

div#main.content- > <div id="main" class="content">
複製程式碼

指定類和ID 。這樣子改版的話，我們的程式碼會變的更精煉：

如果您不反對JSX本身，但不喜歡轉換程式碼的必要性，那麼有一個名為htm的專案。它的宗旨與JSX一樣（並且看起來很想通），但是它使用模板文字。這肯定會增加一些開銷（你必須在執行時解析這些模板）。但是它在某些情況下可能是值得的。

它通過包裝元素函式來工作，React.createElement在我們的例子中，它可以是任何其他具有類似API的庫，並返回一個函式，僅在執行時。它將解析我們的模板並返回與babel完全相同的程式碼。

正如您所看到的，它幾乎與真正的JSX相同，我們只需要以稍微不同一點的方式插入變數。

但是，這些主要是細節，如果你想在沒有任何工具設定的情況下展示如何使用React，這可能很方便。

這個想法類似於hyperscript，然而，這是一個值得關注的優雅方法。還有許多其他類似的輔助庫，因此，在選擇哪個上，完全取決於主觀。它可能會為您自己的專案提供一些靈感。

庫 ijk 帶來了僅使用陣列編寫模板的想法，使用位置作為引數。主要優點是你不需要經常寫h（是的，甚至可以重複！）。以下是如何使用它的示例：

本文並未說明您不應該使用JSX，或者它是否是一個壞主意。但是，您可能想知道如何在沒有它的情況下編寫程式碼，以及程式碼的外觀如何，本文的目的僅僅是回答這個問題。