关于javascript:React从来如此便对么

大家好，我卡颂。

这么多年大家习惯了应用 JSX 形容 UI 的React。甚至局部场景下应用 Vue 时也会抉择 JSX 而不是 模版语法。

如同所有就这么自然而然产生了。

然而，如果梳理历史的走向，模版语法 才是更天然的抉择。接下来让咱们看看 React 抉择 JSX 背地的逻辑是什么？这是 React 现在生态凋敝的关键因素么？

本文参考 HTML 模板语言纵览

模版语言简史

前端在有足够复杂度之前都是作为后端 MVC 框架的 V（view，即视图层）存在的，操作view 的支流办法是 模版语法。

虽说 PHP 是最好的语言，但在晚期 PHP 更多是作为 HTML 模版语言呈现的，这也能从他的全称Hypertext Preprocessor（超文本预处理器）中窥探出一丝端倪。

当浏览器申请网页时，服务端会执行模版中的 PHP 代码，将填充了变量值的 HTML 会作为数据返回。

比方如下模版，name会被填充为变量值：

<h1>
  <?php echo "My name is {$name}"; ?>
</h1>

很多服务端语言都实现了 PHP 格调的模版语法，比方：

• 基于 Java 的JSP
• 基于 PHP 二次封装的smarty
• 基于 Ecmascript 的EJS

这类模版语法尽管性能全面，然而当页面结构复杂时，逻辑（PHP代码）会不可避免的和UI（HTML）混淆在一起。

为了更好的展现 UI，Github 的联结创始人 Chris Wanstrath 开发了Mustache。

这是一款重 UI 而轻逻辑的模版解析引擎，支流编程语言简直都有各自的 Mustache 实现。

对于下面的例子，Mustache语法为：

<h1>
  My name is {{name}}
</h1>

Mustache能直观的表白 UI，然而缺失对逻辑的表达能力。更多 模版语法 则尝试在 UI 与逻辑之间寻找均衡。

比方 Django 的DTL（Django Template Language）除了应用与 Mustache 雷同的 {{}} 语法表白 UI 中的变量，还蕴含大量的常见逻辑，比方：

• if else等流程管制逻辑

  {% if condition %}
    ... display
  {% endif %}

• for in迭代逻辑

  <ul>
  {% for user in userList %}
    <li>{{user.name}}</li>
  {% endfor %}
  </ul>

• 过滤器

/* 将 name 转化为小写模式 */
<p>{{name | lower}}</p>

现如今，前端框架的 模版语法 中能够看到很多服务端曾应用的 模版语法 的影子。

如果你是个服务端工程师，看到如下 Vue 模版语法时想必会很亲切：

<h1>my name is {{name | lower}}</h1>

所以，从后端 view 层拆散并逐步倒退的前端框架，最合乎直觉的形式就是采纳 模版语法 形容视图，比方 09 年呈现的景象级前端框架angular。

然而，React并不这么认为。

用逆向思维思考

前端框架须要形容两样货色 —— UI与逻辑。

模版语言 的底层逻辑是：即然前端应用 HTML 形容 UI，那么咱们就扩大HTML 语法，让他能形容逻辑。

即：从 UI 登程，扩大UI，形容逻辑。

那咱们换个思路，在前端用什么形容逻辑呢？JS。

那咱们能不能从逻辑（即JS）登程，扩大逻辑，让他能形容UI，不就达到同样的成果吗？

这，就是 JSX —— 一种JS 语法糖。

后记

因为 JSX 以逻辑为终点，所以能轻松形容简单的 UI 变动。这使得 React 社区的晚期参与者能够疾速实现各种简单的根底库，丰盛社区生态。

对于前端框架的选型，一个重要的考量是：社区生态是否凋敝？

换言之，对于日常业务开发遇到的需要，是否很疾速在社区中找到成熟的解决方案？

我的项目一旦确定了技术选型，中途再切换其余技术栈会付出极高老本。这进一步推动更多开发者参加社区建设，最终造成源源不断的正反馈。使得 React 长期霸榜 工程师最违心应用的前端框架。

这所有，从另辟蹊径创造 JSX 那一刻就埋下了伏笔。

欢送退出人类高质量前端框架钻研群，带飞