JSX的替代方案（译文）

原文链接：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并对它相当满意，它也是有用的。

注：如果想深入了解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，或者它是否是一个坏主意。但是，您可能想知道，没有它，您如何编写代码，您的代码可能是什么样子的，本文的目的只是回答这个问题。

相关文章：

Node.js Fundamentals: Web Server Without Dependencies

Small Websites Are Dying

Metrics are Dangerous for Users