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的替代品[译]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

数据结构、算法与应用

数据结构、算法与应用

(美)Sartaj Sahni / 汪诗林、孙晓东、等 / 机械工业出版社 / 2000-01 / 49.00

本书是关于计算机科学与工程领域的基础性研究科目之一――数据结构与算法的专著。 本书在简要回顾了基本的C++ 程序设计概念的基础上,全面系统地介绍了队列、堆栈、树、图等基本数据结构,以及贪婪算法、分而治之算法、分枝定界算法等多种算法设计方法,为数据结构与算法的继续学习和研究奠定了一个坚实的基础。更为可贵的是,本书不仅仅介绍了理论知识,还提供了50多个应用实例及600多道练习题。 本书......一起来看看 《数据结构、算法与应用》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

MD5 加密
MD5 加密

MD5 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具