[译]JSX的替代品

栏目: JavaScript · 发布时间: 5年前

内容简介:JSX现在是一种非常受欢迎的选择,用户在各种框架中进行模板模式开发,而不仅仅是在React中,但是,如果你不喜欢它,或者有一个你想要避免使用它的项目,或者只是好奇如何在没有它的情况下编写您的React代码呢?最简单的答案是阅读官方文档,但是它有点短。我们有更多的选择

JSX现在是一种非常受欢迎的选择,用户在各种框架中进行模板模式开发,而不仅仅是在React中,但是,如果你不喜欢它,或者有一个你想要避免使用它的项目,或者只是好奇如何在没有它的情况下编写您的React代码呢?最简单的答案是阅读官方文档,但是它有点短。

我们有更多的选择

免责声明:就个人而言,我喜欢JSX并在我的React项目中使用它,但是,我稍微研究了这个主题,发现了一些成果,并想分享给大家。

什么是JSX

首先,我们需要了解JSX是什么,以便用纯JavaScript代码来编写匹配的代码。

JSX是一种特定于域的语言,这意味着我们需要使用JSX转换代码以获得常规JavaScript,否则浏览器将无法理解我们的代码。在未来,如果你的目标浏览器不是完全支持所有的JSX语法转换,您就无法完全删除转换,这可能是一个问题。

理解JSX的最佳方法可能是使用babel-repl实际执行此操作。您需要单击presets(应该在左侧面板中)并且选择react,以便正确解析它。之后,您将能够在右侧实时查看JavaScript代码。例如,您可以写入以下内容:

[译]JSX的替代品

其实这段原本写法为。

[译]JSX的替代品

您可以看到每<%tag%>的结构,都被函数调用React.createElement替换。

第一个参数是徐建活具有内置标记值的字符串(如div或span),第二个参数是关于options 所有其余参数都被视为子项。

我强烈建议您使用不同的树来玩,例如,看看React如何使用true或false值、数组、组件等呈现属性:即使您只使用JSX和漂亮的内容,它也很有用。

要深入阅读JSX,有一个[官方文档](https://reactjs.org/docs/jsx-in-depth.html)页面

重命名

虽然生成的代码完全有效,并且我们可以用这种方式编写所有的React代码,但这种方法存在一些问题。

第一个问题是它非常冗长。就像真人一样很啰嗦,这里的主要罪犯是React.createElement。因此,第一个解决方案是把它保存到一个变量,通常命名为h,类似 hyperscript 。这将为您节省大量文本,并使其更具可读性。为了说明这一点,让我们重写一下过去的例子:

[译]JSX的替代品

Hyperscript

如果您使用过上面任何一个例子用于开发的话,您会发现它有几个缺陷。首先,React.createElement函数需要 3个参数,所以如果没有属性,你必须提供null,并且className可能是最常见的属性,每次都需要编写一个新对象。

作为替代方案,您可以使用 react-hyperscript 库。它不需要提供空道具,也允许您以类似emmet的样式

div#main.content- > <div id="main" class="content">
复制代码

指定类和ID 。这样子改版的话,我们的代码会变的更精炼:

[译]JSX的替代品

HTM

如果您不反对JSX本身,但不喜欢转换代码的必要性,那么有一个名为htm的项目。它的宗旨与JSX一样(并且看起来很想通),但是它使用模板文字。这肯定会增加一些开销(你必须在运行时解析这些模板)。但是它在某些情况下可能是值得的。

它通过包装元素函数来工作,React.createElement在我们的例子中,它可以是任何其他具有类似API的库,并返回一个函数,仅在运行时。它将解析我们的模板并返回与babel完全相同的代码。

[译]JSX的替代品

正如您所看到的,它几乎与真正的JSX相同,我们只需要以稍微不同一点的方式插入变量。

但是,这些主要是细节,如果你想在没有任何 工具 设置的情况下展示如何使用React,这可能很方便。

类似Lisp的语法

这个想法类似于hyperscript,然而,这是一个值得关注的优雅方法。还有许多其他类似的辅助库,因此,在选择哪个上,完全取决于主观。 它可能会为您自己的项目提供一些灵感。

ijk 带来了仅使用数组编写模板的想法,使用位置作为参数。主要优点是你不需要经常写h(是的,甚至可以重复!)。以下是如何使用它的示例:

[译]JSX的替代品

以上所述就是小编给大家介绍的《[译]JSX的替代品》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Getting Real

Getting Real

Jason Fried、Heinemeier David Hansson、Matthew Linderman / 37signals / 2009-11-18 / USD 24.99

Getting Real details the business, design, programming, and marketing principles of 37signals. The book is packed with keep-it-simple insights, contrarian points of view, and unconventional approaches......一起来看看 《Getting Real》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具