React 为什么是 JSX 而不是 Templates

前言

前几天得到一个疑问，为什么 React 要用 JSX 语法，这样显得代码好像“很耦合”。按照传统应推荐 html、js、css 模版分离，这样设计的优越性到底在哪里？

从一开始接触前端，大学课程里首先学的也是 html、js、css 这前端二代三剑客，可以类比于“母语”的概念。于是接触了 Vue 框架，便顺理成章地理解了 templates、script、style 三个模版分离的概念。到后来接触了 React 框架确实在熟悉 JSX 语法过程中花费了一定的精力，现在理解来看，其实就是把 JS 语法和 DOM 结构组合绑定到了一起，当时真正头晕的应该是渲染的能力。

因此，React 为什么是 JSX 而不是 Templates，这种感觉就好像脱离了一开始学习的母语，这样的学习成本难道是徒增的嘛，带着疑问，尝试理解梳理，并总结出这篇文章。

官方文档

React

首先得去看看 React 官方文档是如何说明的。

为什么使用 JSX?[1]

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合。比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

大概意思是，DOM 的渲染逻辑与其他 UI 逻辑其实内在耦合，由于更新及时性，它们应该内聚在一起。

React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

keywords：标记与逻辑、关注点分离

React 在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

JS 和 DOM 的代码不用到处找逻辑关联。

Vue

然后看看 Templates 语言最具代表框架 —— Vue，官方是如何说明。

HTML & CSS[2]

React 组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖，有下面这些优势：

• 你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。
• 开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。

Vue 默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue 模板，这也带来了一些特有的优势：

• 习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。
• 基于 HTML 的模板应用更容易迁移框架。
• 学习成本低。
• 可以使用其他模板预处理器。
• 修饰符带来的便利

首先，JSX 并不是没有学习成本的——它是基于 JS 之上的一套额外语法。正如同熟悉 JS 的人学习 JSX 会很容易一样，熟悉 HTML 的人学习 Vue 的模板语法也是很容易的。

更抽象一点来看，我们可以把组件区分为两类：

• 偏视图表现的 (presentational)
• 偏逻辑的 (logical)

我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。

抛弃模板的概念用 JS 建构视图

React 的作者 Pete Hunt 演讲的一则视频，讲到了为何选择了 JSX 语法来构建组件，而不是模版 Templates。（React 官网文章说看这视频它会说服你为啥用 JSX）

Pete Hunt：React：重新思考典范实例的意义— JSConf EU[3]

构建组件，而非模版

React Build components, not templates。

Pete Hunt 提出了这个概念 React 构建组件，而非模版。

在以往的传统思路中，我们都喜欢关注点分离（SoC）。

点分离：降低耦合度，提高内聚。

耦合：两个程序模组之间的关联程度。（一连串的联合改动就是耦合的症状）

内聚：功能相关组件组合成一个模组的程度。

耦合和内聚是两个非常重要的软件工程原则，而在 templates 中，模版与控制期间却有着缠绕的联动，需要在整个模组上作出串联改动，这不是真正的去耦合。这带来一个弊端，当视图或控制器任意变动，你需要搞清楚所有需要更改的模型在什么地方，哪些需要更新，哪些节点会接收事件等等。

当我使用 Vue 框架时，在做比较个性化模版时，确实需要不断地翻滚跳跃代码行，来理解以及更改代码逻辑。

因此 Pete Hunt 认为模版（templates）的点分离效率极低，包括任何试图用机能来加强 DOM、HTML，试图让构建应用程序更容易的东西，它们只分离了技术而不是关注点。

框架却不经意蓄意弱化了点分离的概念，挑出特定想要分离的显示逻辑，并人工分离技术。不断地创造新概念，以至于构建抽象层时，才能达到要开发应用程序所需的表现程度。

创造新概念，Vue 的修饰符算是嘛？我认为是的

框架是无法自动帮你分离关注点，它应该是要提供强大且具表现性的工具来帮助你。也就是使用组件来分离关注点，而不要受制于模版语言（Html），充分利用程序语言（JS），并且可以重复使用组件。

但我们可能会想到使用组件而非 templates 模版会导致面条式代码（非结构、杂乱无章的程序代码），但我们是软件工程师，可以训练编程素质，将组件处理得很小，只把显示逻辑放在组件中。

这里也就是前言一开始提到的疑问，提问到为什么 JSX 语法的代码显得耦合。其将 JavaScript 表达式混入文件物件模型中，共置显示逻辑和产生标记逻辑。

JSX

JSX，一个选择性前置处理器。

在视频中提到的 JSX 语法优势：

• 把看起来像 HTML 的表现式转为函数式。
• 结合了模版的易用性和 JavaScript 的强大能力。
• 设计师能更容易产生程序码
• React DOM 可以很好地防范跨网站指令码安全性（XSS），React DOM 让产出文件物件模型描述变得非常容易，并且让生成 DOM 描述对我们来说非常安全。

被遗忘的资料更动是万恶的根源，工程师很难判断这件事。我们的智能更适合掌控静态关系，而把随时间不断发展的过程形象化的能力则相对比较弱，因此我们应当尽早缩短静态程序和动态过程之间的概念差距。

采用随时间前进的程序，并建立抽象概念使他们看起来像是在一个时间点上执行的程序。因此当资料发生改变时，React 将重新演绎整个组件，你可以清楚认识到应用程序在那个状态，无需任何中间介质模型的绑定（如 Jquery 框架）。

后言

视频除 JSX 之外，提到了 Virtual DOM、React 数据更新是如何更新的。跟文章主题无关，就没记录整理，其实跟 Vue 设计基本一致。

最后，总结一下几个关键概念

• javaScript 是基于一种以冯纽曼架构为基础、历史悠久的程序语言。
• 偏视图表现的，使用模版（Templates）。偏逻辑的，使用渲染函数（JSX）。

个人认为 JSX 也可以进行 Hooks 进行分离，渲染函数能做的，不至于非要套用模版。

• 耦合和内聚是两个非常重要的软件工程原则，也就是关注点分离。
• 任何试图用机能来加强 DOM、HTML，试图让构建应用程序更容易的东西，它们只分离了技术而不是关注点。
• 框架不断地创造新概念，以至于构建抽象层时，才能达到要开发应用程序所需的表现程度。
• 我们是软件工程师，需要训练编程素质，组件也可以是很小。
• 我们应当尽早缩短静态程序和动态过程之间的概念差距。

也就是更新的花费的过程。

参考资料

[1]为什么使用 JSX?: https://zh-hans.reactjs.org/docs/introducing-jsx.html#why-jsx

[2]HTML & CSS: https://cn.vuejs.org/v2/guide/comparison.html#HTML-amp-CSS

[3]Pete Hunt：React：重新思考典范实例的意义— JSConf EU: https://www.youtube.com/watch?v=x7cQ3mrcKaY