原文链接：https://blog.bloomca.me/2019/02/23/alternatives-to-jsx.html
JSX作为一种流行的模板语言，在各种框架都得到了广泛的应用。但是，如果您不喜欢它，或者您想在某个项目中使用其他的方案，或者只是想知道如何在没有它的情况下编写React代码，最简单的答案是阅读官方文档，不过它有点过于精简了。
什么是JSX？
首先，我们需要知道JSX是什么，以便知道其翻译为纯JS是什么样的。JSX是一种特定领域的语言，这意味着我们需要使用JSX转换器以获得常规JS代码，否则浏览器将无法识别。如果在未来，浏览器能够支持JSX的所有特性，而我们仍然没有扔掉转换器，这可能就是一个问题了。
JSX转换示例：
class A extends React.Component {
render() {
return (
<div className={"class"} onclick={some}>
{"something"}
<div>something else</div>
</div>
)
}
}
转换为JS代码则是：
class A extends React.Component {
render() {
return React.createElement("div", {
className: "class",
onclick: some
}, "something", React.createElement("div", null, "something else"));
}
}
可以看到，所有标签都被React.createElement代替。其中，第一个参数可以是React组件或HTML标签字符串，第二个参数是标签属性，其他的参数则是内部children。
强烈推荐您花费一点时间，看一下React是如何用不同的方式，利用布尔值、数组、组件等去渲染它的属性的。即使您只使用JSX并对它相当满意，它也是有用的。
命名式
使用纯JS书写React代码是合法的也能够正确运行，但是，这种方式存在几种问题：
最突出的问题就是，它非常冗长，而冗长的罪魁祸首就是React.createElement语句。一个可见的解决方案就是将它保存到变量中，通常利用hyperscript语法命名为h，通过这种方式可以大幅度提高代码的简洁性和可读性。为更好的体现这一点，我们重写一下上面的代码：
const h = React.createElement;
class A extends React.Component {
render() {
return h(
"div",
{
className: "class",
onclick: some
},
"something",
h("div", null, "something else")
);
}
}
Hyperscript
如果你使用过React.createElement或h的任何一种方式，就知道它有一些缺陷。首先，它需要3个参数，当不存在这些参数时，就需要用null、className等一些常用的值去填充。
作为一种替代方案，你可以使用react-hyperscript库，这样就不用去填充多余的属性。并且，它还支持id和class的精简写法：div#main.content —> <div id="main" class="content">。这样一来，我们的代码就变成这样了：
class A extends React.Component {
render() {
return h("div.class", { onclick: some }, [
"something",
h("div", "something else")
]);
}
}
HTM
如果您不反对JSX本身，但是不喜欢编译代码，那么就可以使用htm作为替代方案。它的目标是做与JSX相同的事情(并且看起来相同)，但是使用模板文字。这无疑增加了一些开销(运行时需解析模板)，但在您的情况下，这可能是值得的。
它通过包装元素函数来工作，在我们的例子中是React.createElement。它可以是任何其他具有类似API的库，并返回一个函数，该函数将解析我们的模板，并返回与babel完全相同的代码，但只在运行时返回。
const html = htm.bind(React.createElement);
class A extends React.Component {
render() {
return html`
<div className=${"class"} onclick=${some}>
${"something"}
<div>something else</div>
</div>
`
}
}
正如上述代码所示，它与JSX非常相似，只是变量的插入方式稍有不同。不过，这些都是细节，如果您想展示如何在不需要任何工具的情况下使用React，这可能是一个很好的方式。
类Lisp语法
这个方法的思想类似于hyperscript，但是，作为一种优雅的实现方式，还是值得研究的。相关的类库有很多，可以选择一种进行实现，它可能会给你自己的项目带来灵感。
以库ijk为例，仅使用数组(使用位置作为参数)编写模板。主要的优点是你不需要不断地写h（React.createElement），下面是一个如何使用它的例子:
function render(structure) {
return h('nodeName', 'attributes', 'children')(structure)
}
class A extends React.Component {
render() {
return render([
'div', { className: 'class', onClick, some}, [
'something',
['div', 'something else']
]]);
}
}
结论
本文并没有说您不应该使用JSX，或者它是否是一个坏主意。但是，您可能想知道，没有它，您如何编写代码，您的代码可能是什么样子的，本文的目的只是回答这个问题。
相关文章：