原文链接: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

JSX的替代方案(译文)的更多相关文章

  1. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  2. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  3. [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:为ASP.NET MVC应用程序处理并发

    这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第十篇:为ASP.NET MVC应用程序 ...

  4. MEAN实践——LAMP的新时代替代方案(上)

    摘要:90 年代,LAMP 曾风靡一时,然而随着需求的变迁和数据流量的激增,LAMP 已不可避免的走下神坛.近日,在 MongoDB Blog 中,Dana Groce 介绍了一个基于新时代架构的实践 ...

  5. Ceph: A Scalable, High-Performance Distributed File System译文

    原文地址:陈晓csdn博客 http://blog.csdn.net/juvxiao/article/details/39495037 论文概况 论文名称:Ceph: A Scalable, High ...

  6. 中文译文:Minerva-一种可扩展的高效的深度学习训练平台(Minerva - A Scalable and Highly Efficient Training Platform for Deep Learning)

    Minerva:一个可扩展的高效的深度学习训练平台 zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouwan  2015-12-1 声明 ...

  7. 每日一译系列-模块化css怎么玩(译文)

    原文链接:How Css Modules Work 原文作者是Preact的作者 这是一篇关于如何使用Css Modules的快速介绍,使用到的工具是Webpack吊炸的css-loader 首先,我 ...

  8. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  9. Google C++单元测试框架GoogleTest---AdvancedGuide(译文)下

    因为AdvancedGuide文档太长,分上下两部分,本文档接googletest--AdvancedGuide(译文)上:Google C++单元测试框架GoogleTest---AdvancedG ...

随机推荐

  1. syslog实例详解rsyslog

    http://blog.csdn.net/chenhao112358/article/details/40892239http://www.cnblogs.com/blueswu/p/3564763. ...

  2. IOS 数据库管理系统(SQLite)

    嵌入式数据库 SQLite嵌入式数据库的优势 1.支持事件,你并不需要配置,无需安装,不需要管理员 2.支持部分脂肪SQL92 3.完整的数据库被存储在磁盘上的文件的顶部,相同的数据库文件可以在不同机 ...

  3. 机器人局部避障的动态窗口法(dynamic window approach) (转)

    源:机器人局部避障的动态窗口法(dynamic window approach) 首先在V_m∩V_d的范围内采样速度: allowable_v = generateWindow(robotV, ro ...

  4. 后台挂载/卸载程序[Linux/Windows]

    后台挂载应用程序 即使关闭掉控制台窗口,该程序的进程也将会一直运行下去 #Windows 1.编写bat命令文件[形如:a.bat] 2.cmd执行:start /b a.bat #Linux noh ...

  5. Android studio3.0打开Device File Explore(文件管理器)的方法(图文教程)

    Android studio3.0打开Device File Explore(文件管理器)的方法(图文教程) 看到网上AS3.0新增加的查看手机文件的新功能,全部都是转载的,没有几个人心细的把如何打开 ...

  6. docker-compose使用

    1.创建app.py项目文件,执行以下代码 import time import redis from flask import Flask app = Flask(__name__) cache = ...

  7. 【设计经验】3、ISE中烧录QSPI Flash以及配置mcs文件的加载速度与传输位宽

    一.软件与硬件平台 软件平台: 操作系统:Windows 7 64-bit 开发套件:ISE14.7 硬件平台: FPGA型号:XC6SLX45-CSG324 QSPI Flash型号:W25Q128 ...

  8. python爬虫学习之XPath基本语法

    XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径(path)或者步(steps)来选取的. XML实例文档 我们将在下面的例子中使用这个XML文档. <?xml ...

  9. ☆C++学习心得

    C++是我进大学的学的第一种编程语言,在高中的时候有电脑课,有教过部分的VB语言,所以其实对编程也并不是非常的陌生,刚开是上课也觉得感觉不难,都懂,没多少课后,恍了个神..居然听不懂了!老师经常让我们 ...

  10. Flask web开发之路五

    Jinjia2模板 紧接着上篇博客,接下去写if条件判断和for循环遍历以及过滤器 if条件判断 主app文件代码: from flask import Flask,render_template a ...