[译]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/…