[译]JSX的替代品
栏目: JavaScript · 发布时间: 5年前
内容简介:JSX现在是一种非常受欢迎的选择,用户在各种框架中进行模板模式开发,而不仅仅是在React中,但是,如果你不喜欢它,或者有一个你想要避免使用它的项目,或者只是好奇如何在没有它的情况下编写您的React代码呢?最简单的答案是阅读官方文档,但是它有点短。我们有更多的选择
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(是的,甚至可以重复!)。以下是如何使用它的示例:
以上所述就是小编给大家介绍的《[译]JSX的替代品》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- JSX的替代品[译]
- sharedata 的替代品:datasheet
- Kubectl 的替代品:kubeman
- Postman 的替代品来了
- 初识wolfSSL,OpenSSL的一个替代品
- Alfred的免费开源替代品Zazu
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。