React框架方才宣布的时刻，JSX推翻了许多人的主张。习惯了HTML标签与JavaScript代码星散的前端工程师们，看到JSX或许都邑不禁吐槽：“这些新鲜的标签涌现在JavaScript里是要干啥?！”我们一直贯彻的关注点星散准绳呢？Facebook的工程师岂非一点都不相识这些社区中已默许的范例？
像许多人一样，我一最先对JSX这类语法是持疑心态度的。以至当我爱上JSX后，每次我向别的开辟者引荐这类语法，我都邑以为我是在向他人展现我貌寝的孩子。
从一最先的疑心到爱上JSX，我逐渐意想到JSX实在并没有那末激进。它不过是硬币的另一面。JSX实际上是前端开辟中天然进化的一个过渡。为何这么说呢，我们有必要回忆一下前端这几年的生长进程了。
第一阶段：非侵入式JavaScript（Unobtrusive JavaScript）
还记得谁人jQuery盛行的时期么？非侵入式的JavaScript被种种首倡。我们的HTML是纯HTML，我们的JavaScript是纯JavaScript。我们开辟时是严厉贯彻所谓的关注点星散的。
我们像下面如许写HTML：
<a class="hide">Click to hide me</a>而我们的JavaScript会如许写：
$(".hide").click(function() {
$(this).hide();
})根据之前的邃晓，如许做是真的做到了关注点星散对吧？然则我以为并非如许。
如许写看起来像是一个好主张。我们的HTML是相对纯洁的，完整不参合任何逻辑代码。然则我们会逐步发明一个题目：我怎样晓得哪行JavaScript代码在掌握我的HTML呢？答案是：除非我阅读了悉数JavaScript文件，我才邃晓，哪段JavaScript代码在掌握哪段HTML。（译者注：如许的状况很罕见，尤其是在大型项目中，我们有无数的另有可以反复的DOM节点，HTML和JavaScript文件不在一同，要修正起来险些太庞杂了）。在这类形式中，你不能仅仅简朴的修正一个标签而不去搜检对应的JavaScript代码以确保你的修正没有破换选择器实行。你看，这里实际上并没有完成关注点星散，我们照样要不停的关注HTML和JavaScript之间的联络。我们做到的仅仅是把JS和HTML星散到了两个差别的文件中。在本质上这两种手艺是密不可分的，他们必需坚持步调一致，不然就会致使我们的运用崩溃。
直接支解HTML和JS致使我们的运用越发难以保护和调试。每次你想修正一个标签，老是会忧郁损坏一个jQuery选择器。假如我们对关注点的星散不那末严厉，或许可以减轻一些痛楚。因而，我们迎来了第二阶段…
第二阶段：双向绑定（Two-way Binding）
在Knockout和Angular中涌现的双向绑定，让一切前端开辟者眼前一亮。许多开辟者最先扬弃之前信仰的关注点星散，并尽力拥抱这类在HTML标签中声明式绑定的气力。当数据发作转变，UI也自动发作更改。当UI发作更改，数据也随之更改。云云清楚，云云简朴。（译者注：我以为这是另一种意义上的关注点星散，我们不再须要关注HTML与JavaScript之间的联络，我们须要做的就是保护好数据。）
这些框架的完成确实大不雷同，但他们都在试图做雷同的事变。试想运用这几个盛行框架完成迭代数组这个例子：
//Angular
<div ng-repeat=”user in users”>
//Ember
{{#each user in users}}
//Knockout
data-bind=”foreach: users”然则这里涌现了一些有意思的事变————很少有人意想到一个异常明显的题目：我们实际上在把JavaScript放到HTML中。这并非我们所邃晓的那种关注点星散。我们可以发明这些框架都在处置惩罚统一件事：经由过程为HTML增加分外的特别标记使其更壮大。这些标记可以被剖析为JavaScript。因而，既然我们可以接收JavaScript与HTML经由过程这类体式格局混合在一同，那末是时刻让React参与并向我们展现硬币的另一面了…
第三阶段：JSX
React的JSX并非一个激进的转变，是因为我们这个行业从一最先就必定HTML和JavaScript应该是在一同的。
只要当你体验过React和JSX以后，才体会到如许做有若干优点。React的JSX完整优于一切的“第二阶段”作风的框架的缘由有以下几点：
编译时毛病（Compile-time Errors）
当你的HTML中涌现输入毛病时，你很难晓得本身是那里写错了。在许多状况下这是一种无声的运行时毛病。比方，假如你在写Angular运用时输入n-repeat而不是ng-repeat，什么都不会发作。当你在写Knockout运用时把data-bind写成data-bnd，也一样什么都不会发作。在涌现这些毛病时，你的运用会悄无声息的运行时失利。这太使人懊丧了。
比拟之下，当你在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，如许雄厚的毛病反应终究成为实际！靠这一点JSX相对完胜。云云疾速而又雄厚的反应极大的提高了临盆效力。正如我在我的Clean Code课程中议论的那样————优越的工程解决方案遵照速错准绳。（译者注：原文是：well- engineered solutions fail fast，关于fail fast可以检察http://geeklu.com/2010/07/fai… 举行相识）
充分利用JavaScript（Leverage the Full Power of JavaScript）
运用JavaScript编写你的标记，意味着这些标记可以借助JavaScript的悉数才能，而不是像Angular或许Knockout这类以HTML为中间的框架只能供应有限的特别标记。（译者注：我以为这里作者的表述并不正确，Angular也一样可以自在扩大HTML，只不过没有React那末灵活轻易）。
Client-side frameworks shouldn’t require you to learn a proprietary syntax for declaring loops and conditionals.
客户端框架不应该请求运用者进修特别的语法来声明轮回或许前提语句。
React减少了运用者进修另一种特别的声明轮回和基本前提语句的本钱。你可以看看第二阶段中提到的几个框架，他们完成双向绑定的体式格局都是依托一些属于他们本身的特别语法。相反，JSX看上去和HTML险些一样，像轮回和前提语句，完整依靠原生的JavaScript。与浩瀚的JavaScript框架比拟，不须要去进修相似于数据绑定等特别语法，这一点又让React和JSX脱颖而出。
而且，因为你将这些标记与相关联的JavaScript数据写在一个文件中，当你援用函数时，许多IDE可以供应一些智能提醒。想一想当你运用那些以HTML为中间的框架时，挪用一个function却老是输入毛病时的苦恼吧！
Final Thoughts
JSX并不一个猖獗的主张，它就是一段很正常的顺序，因而不要再恶感它了。
JSX isn’t revolutionary. It’s evolutionary.
JSX不是反动，它只是进化生长的效果。
像许多进化、演化一样，它给我们带来的是一种改良。
