大家好，我是卡松。这么多年，大家已经习惯了React用JSX来描述UI。即使在某些场景下使用Vue时，也会选择JSX而不是模板语法。就好像一切都是自然而然发生的一样。但是，如果从历史的趋势来看，模板语法是更自然的选择。接下来我们看看React选择JSX背后的逻辑是什么？这是React生态繁荣到今天的关键因素吗？这篇文章参考了HTML模板语言的概述。模板语言简史。在前端没有足够复杂之前，它作为后端MVC框架的V（view，即视图层）存在。操作视图的主流方法是模板语法。PHP虽然是最好的语言，但是PHP在早期更多是作为一种HTML模板语言出现的，这一点从他的全称HypertextPreprocessor（超文本预处理器）也可以看出。当浏览器请求网页时，服务器会执行模板中的PHP代码，返回填充了变量值的HTML作为数据。例如，在下面的模板中，名称将被填充为一个变量值：

很多服务端语言都实现了PHP风格的模板语法，比如：基于Java的JSP、基于PHP的二次封装、smarty、基于Ecmascript的EJS模板语法都很全面，但是当页面结构复杂，逻辑（PHP代码）难免会和UI（HTML）混在一起。为了更好地展示UI，Github联合创始人ChrisWanstrath开发了Mustache。这是一个重UI轻逻辑的模板解析引擎。几乎所有的主流编程语言都有自己的Mustache实现。对于上面的例子，Mustache的语法是：

我的名字是{{name}}

Mustache可以直观的表达UI，但是缺乏表达逻辑的能力。更多的模板语法试图在UI和逻辑之间找到平衡。比如Django的DTL（DjangoTemplateLanguage）不仅使用和Mustache一样的{{}}语法来表达UI中的变量，还包含了很多通用的逻辑，比如：ifelse等流控逻辑{%ifcondition%}...display{%endif%}forin迭代逻辑

{%foruserinuserList%}
• {{user.name}}
{%endfor%}

filter/*将name转换为小写*/

{{name|lower}}

如今，在前端框架的模板语法中，可以看到很多服务器使用的模板语法的影子。如果你是服务端工程师，看到下面这样的Vue模板语法，你一定会很亲切：

mynameis{{name|lower}}

所以，前端框架是从后端视图层中分离出来逐步发展起来的，最直观的方式就是用模板语法来描述视图，比如现象级前端框架2009年出现的angular。然而，React并不这么认为。用逆向思维思考前端框架需要描述两个东西——UI和逻辑。模板语言的底层逻辑是：既然前端是用HTML来描述UI的，那我们就扩展HTML的语法，让它来描述逻辑。即：从UI入手，扩展UI，描述逻辑。那我们换个思路，前端应该用什么样的描述逻辑呢？JS。那我们能不能从逻辑（也就是JS）入手，把逻辑展开，让他来描述UI，不就达到同样的效果了吗？这就是JSX——一种JS语法糖。后记由于JSX从逻辑开始，它可以轻松描述复杂的UI变化。这使得React社区的早期参与者能够快速实现各种复杂的基础库，丰富社区生态。对于前端框架的选择，一个重要的考虑因素是：社区生态是否繁荣？或者说，对于日常业务发展中遇到的需求，能否在社区中快速找到成熟的解决方案？一旦项目确定了技术选型，中途切换到其他技术栈的成本将非常高。这进一步推动了更多的开发者参与社区建设，最终形成源源不断的正反馈。让React长期霸道工程师最愿意使用的前端框架。自从JSX以另一种方式被发明的那一刻起，所有这一切就已经预示了。欢迎加入人类优质前端框架研究组，带头