[譯]JSX的替代品

前言

JSX如今是一種很是受歡迎的選擇，用戶在各類框架中進行模板模式開發，而不只僅是在React中，可是，若是你不喜歡它，或者有一個你想要避免使用它的項目，或者只是好奇如何在沒有它的狀況下編寫您的React代碼呢？最簡單的答案是閱讀官方文檔，可是它有點短。

咱們有更多的選擇

免責聲明：就我的而言，我喜歡JSX並在個人React項目中使用它，可是，我稍微研究了這個主題，發現了一些成果，並想分享給你們。

什麼是JSX

首先，咱們須要瞭解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。這將爲您節省大量文本，並使其更具可讀性。爲了說明這一點，讓咱們重寫一下過去的例子：

Hyperscript

若是您使用過上面任何一個例子用於開發的話，您會發現它有幾個缺陷。首先，React.createElement函數須要 3個參數，因此若是沒有屬性，你必須提供null，而且className多是最多見的屬性，每次都須要編寫一個新對象。

做爲替代方案，您可使用react-hyperscript庫。它不須要提供空道具，也容許您以相似emmet的樣式

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

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

HTM

若是您不反對JSX自己，但不喜歡轉換代碼的必要性，那麼有一個名爲htm的項目。它的宗旨與JSX同樣（而且看起來很想通），可是它使用模板文字。這確定會增長一些開銷（你必須在運行時解析這些模板）。可是它在某些狀況下多是值得的。

它經過包裝元素函數來工做，React.createElement在咱們的例子中，它能夠是任何其餘具備相似API的庫，並返回一個函數，僅在運行時。它將解析咱們的模板並返回與babel徹底相同的代碼。

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

可是，這些主要是細節，若是你想在沒有任何工具設置的狀況下展現如何使用React，這可能很方便。

相似Lisp的語法

這個想法相似於hyperscript，然而，這是一個值得關注的優雅方法。還有許多其餘相似的輔助庫，所以，在選擇哪一個上，徹底取決於主觀。 它可能會爲您本身的項目提供一些靈感。

庫 ijk 帶來了僅使用數組編寫模板的想法，使用位置做爲參數。主要優勢是你不須要常常寫h（是的，甚至能夠重複！）。如下是如何使用它的示例：

END

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

來源：blog.bloomca.me/2019/02/23/…