React的JSX:硬币的另一面

原创 Badmaster_Y 译文 瞎鼓捣 177阅读 2018-07-25 15:44:46 举报

框架虽好,但我们要知道为什么要使用它。
保持冷静。拥抱进化。

React发布时,许多人只看了一眼JSX并且失去了兴趣。这些尖括号在JavaScript中有什么作用?!关注点分离怎么样?Facebook是否从社区中学到了什么?

像许多人一样,我对ReactJSX的初步反应至少可以说是持怀疑态度。虽然我喜欢JSX,但无论何时我将它介绍给新的开发人员,我都觉得我正在炫耀我的丑陋宝贝。

尽管最初的戏剧性,我已经意识到JSX毕竟不是一个激进的想法。事实上,它只是硬币的另一面。这是一个自然的进化过渡。要理解为什么,历史课是有序的。

第1阶段:不引人注目的JavaScript

还记得jQuery的美好时光吗?不引人注目的JavaScript时代盛开。我们的HTML是纯HTML。我们的JavaScript是纯JavaScript。我们的担忧是完全分开的。

我们写这样的HTML

然后我们写这样的JavaScript

这似乎是一个好主意。我们的HTML非常纯净!但后来我们意识到了一些问题:呃,我怎么知道这两行代码是相互关联的呢?答:除非我阅读每一行JavaScript,否则我不能。使用此模式,您无法在不检查每一行JavaScript的情况下更改标记行,以确保您不会破坏选择器。你知道,这里没有真正的分离。当然,JSHTML都在单独的文件中,但这两种技术从根本上需要同时更新。它们必须以锁步方式移动,否则应用程序将崩溃。

严格区分HTMLJS实际上导致了难以维护和调试的应用程序。每次想要更改标记行时,都不得不担心破坏jQuery选择器。也许如果我们放松对分离关注的宗教信仰,我们可以减轻一些痛苦吗?这迎来了第二阶段......

阶段2:双向绑定

当前端开发人员在KnockoutAngular中看到双向绑定时,这是一个启示。我们中的许多人抛弃了我们对分离关注点的宗教信仰,并接受了在HTML中声明绑定的力量。当数据改变时,UI改变了。当UI改变时,数据改变了。太干净了 很简单。

当然,每个库和框架都有一种完成这项工作的专有方法,但它们从根本上做同样的事情。只需考虑在几个流行框架中迭代数组的简单示例:

但有趣的是在这里发挥的作用。很少有人认识到一个非常基本的问题:我们正在有效地将JavaScript放入HTML中。这不是关注点的分离。所有这些方法都做同样的事情:通过添加额外的专有标记,它们使HTML变得更强大。此标记有效地解析为JavaScript。现在我们终于可以通过这种方式将JSHTML混合在一起了,现在是时候让React介入并向我们展示硬币的另一面......

第3阶段:JSX

ReactJSX不是一个彻底的转变。它只是一个简单实现的成果:

作为一个行业,我们已经决定:HTML和JavaScript属于一体。

不可否认,我们并没有大声说出来。但是拥抱AngularKnockoutEmber让我们的新偏好变得清晰。正如我在上面所提到的,用HTML编写数据绑定代码实际上是将JS放入HTML中。但是,如果我们要混合在一起,为什么我们应该选择将技术扩展为像HTML一样脆弱和松懈?浏览器从一开始就松散地解释了HTML。那么HTML是声明数据绑定,循环和条件逻辑的逻辑基础吗?

Facebook认识到JavaScript是处理这两个混合问题的更合理和更强大的技术。顿悟归结为:

Angular,Ember和Knockout在您的HTML中添加了"JS"。
React在你的JS中放入"HTML"。

这一举措的好处是多方面的,在你尝试使用ReactJSX之前不一定会受到重视。ReactJSX基本上优于上述所有"Phase 2"风格框架,原因如下:

编译时错误

当您在HTML中输入拼写错误时,您通常不知道在哪里搞砸了。在许多情况下,这是一个无声的运行时错误。例如,如果在使用Angular时键入n-repeat而不是ng-repeat,则不会发生任何事情。相同的在Knockout中的data-bnd vs data-bind的故事。在任何一种情况下,您的应用程序都会在运行时静默失败。这令人沮丧。

相反,当您在JSX中输入拼写错误时,它将无法编译。忘了关闭那个<li>标签?当您在HTML中输入拼写错误时,您是不是希望获得这样的丰富反馈?

ReactifyError: /components/header.js: Parse Error: Line 23: Expected corresponding JSX closing tag for li while parsing file: /components/header.js

有了JSX,这个详细的反馈终于成为现实!这是一个巨大的胜利。这种快速反馈回路大大提高了生产率。

充分利用JavaScript的全部功能

JavaScript中编写标记意味着您可以在使用标记时享受JavaScript的所有功能,而不是像AngularKnockout这样以HTML为中心的框架中提供的小型专有子集。

客户端框架不应要求您学习声明循环和条件的专有语法。

React避免了学习另一种声明循环和基本条件逻辑的专有方法的开销。正如您在第2阶段中所见,每个双向绑定框架都使用自己的特殊语法。相比之下,JSX看起来几乎与HTML相同,它使用简单的'ol JavaScript( it uses plain ‘ol JavaScript )来处理条件和循环之类的东西。在像JavaScript一样分散的生态系统中,不必学习另一种专有数据绑定语法就是一个不错的胜利。

由于您在与相关JavaScript数据相同的文件中编写标记,因此许多IDE将在您引用函数时为您提供智能感知支持。想想在面向HTML的框架中引用函数时,你经常犯错误的频率。

最后

JSX并不是一个疯狂的想法。这是一个自然的进展。所以尽量不要惊慌失措。

JSX不是革命性的。它只是进化的一小步。

像大多数形式的进化一样,这是一个明显的改进。

评论 ( 7 )
最新评论
lawrence 6F 2018-09-03 14:13:26 7F

react与vue相比有哪些优势呢?

Badmaster_Y 5F 2018-09-03 09:11:08 6F

怎么说呢,Angular是扩展的HTML,而react是扩展的js,我比较偏向于js编程,毕竟HTML页面真的大段大段的编写(比如电商),其中再掺杂一些奇奇怪怪的代码,我觉得我会崩溃的。
react使用jsx,相当于是单独维护了,维护起来,我觉得是比较方便的(angular用的比较少,具体维护做的也少,不去进行太多比较)。
其实文章也写到了,一个是扩展html一个扩展js,html页面结构松散,扩展之后,维护依旧是一个问题,而且变相的在html中添加了新的语法,新的学习成本;而react扩展js,使用jsx文件,从实际上来看,与js区别真的不大,无外乎就是js中添加一些新的方法,记住了,知道干什么的,自然不存在什么学习成本。
最主要的,我觉得还是不在html中寻找需要修改的代码是最好不过的。个人意见。

lawrence 4F 2018-09-02 17:45:55 5F

React代码比Angular代码更易于维护?

Badmaster_Y 3F 2018-09-02 08:54:02 4F

不知道你所谓的负责是什么啊,电商页面有,普通页面也有,反正都会做,也不知道算不算复杂

lawrence 2F 2018-08-21 13:19:14 3F

你用react做过多复杂的页面?

Badmaster_Y 1F 2018-08-20 14:56:21 2F

都还可以吧 没有什么喜不喜欢 就是项目用哪个舒服用哪个 不过还是比较喜欢react

lawrence 2018-08-16 20:35:21 1F

楼主喜欢angularjs么?