JSX的替代方案（譯文）

jsx作為一種流行的模板語言，在各種框架都得到了廣泛的應用。但是，如果您不喜歡它，或者您想在某個專案中使用其他的方案，或者只是想知道如何在沒有它的情況下編寫react**，最簡單的答案是閱讀官方文件，不過它有點過於精簡了。

什麼是jsx？

首先，我們需要知道jsx是什麼，以便知道其翻譯為純js是什麼樣的。jsx是一種特定領域的語言，這意味著我們需要使用jsx轉換器以獲得常規js**，否則瀏覽器將無法識別。如果在未來，瀏覽器能夠支援jsx的所有特性，而我們仍然沒有扔掉轉換器，這可能就是乙個問題了。

jsx轉換示例：

class a extends react.component 
something else
) }
}

轉換為js**則是：

class a extends react.component , "something", react.createelement("div", null, "something else"));
}}

可以看到，所有標籤都被react.createelement代替。其中，第乙個引數可以是react元件或html標籤字串，第二個引數是標籤屬性，其他的引數則是內部children。

強烈推薦您花費一點時間，看一下react是如何用不同的方式，利用布林值、陣列、元件等去渲染它的屬性的。即使您只使用jsx並對它相當滿意，它也是有用的。

注：如果想深入了解jsx，可以檢視官方文件。

命名式

使用純js書寫react**是合法的也能夠正確執行，但是，這種方式存在幾種問題：

最突出的問題就是，它非常冗長，而冗長的罪魁禍首就是react.createelement語句。乙個可見的解決方案就是將它儲存到變數中，通常利用hyperscript語法命名為h，通過這種方式可以大幅度提高**的簡潔性和可讀性。為更好的體現這一點，我們重寫一下上面的**：

const h =react.createelement;
class a extends react.component ,
"something",
h("div", null, "something else")
);}}

如果你使用過react.createelement或h的任何一種方式，就知道它有一些缺陷。首先，它需要3個引數，當不存在這些引數時，就需要用null、classname等一些常用的值去填充。

作為一種替代方案，你可以使用react-hyperscript庫，這樣就不用去填充多餘的屬性。並且，它還支援id和class的精簡寫法：div#main.content —> 。這樣一來，我們的**就變成這樣了：

class a extends react.component , [
"something",
h("div", "something else")
]);}}

它通過包裝元素函式來工作，在我們的例子中是react.createelement。它可以是任何其他具有類似api的庫，並返回乙個函式，該函式將解析我們的模板，並返回與babel完全相同的**，但只在執行時返回。

const html =htm.bind(react.createelement);
class a extends react.component 
something else
` }
}

正如上述**所示，它與jsx非常相似，只是變數的插入方式稍有不同。不過，這些都是細節，如果您想展示如何在不需要任何工具的情況下使用react，這可能是乙個很好的方式。

這個方法的思想類似於hyperscript，但是，作為一種優雅的實現方式，還是值得研究的。相關的類庫有很多，可以選擇一種進行實現，它可能會給你自己的專案帶來靈感。

以庫ijk為例，僅使用陣列(使用位置作為引數)編寫模板。主要的優點是你不需要不斷地寫h（react.createelement），下面是乙個如何使用它的例子:

function
render(structure) 
class a extends react.component , [
'something',
['div', 'something else']
]]);
}}

結論

本文並沒有說您不應該使用jsx，或者它是否是乙個壞主意。但是，您可能想知道，沒有它，您如何編寫**，您的**可能是什麼樣子的，本文的目的只是回答這個問題。