导语

前段时间因为工作缘故，从 iOS 开发转为了前端开发，一上来就接触了 React 。尽管我们常常说大前端，但实际上前端开发和客户端开发在很多理念上是不一样的。尽管在网上有很多文章介绍React（如阮一峰的系列课程），官方文档也写得很详细，但是由于理念上的差异导致理解这些内容还是有一些门槛的。我尝试分享着我在 React 学习过程的思考，希望能够帮助大家。

阅读说明

在开始阅读这篇文章前，我会假设，你已经有 JS (ES6) 基础和 HTML 基础。并且本文不是对 React 的详细教程，而是对 React 一些不太好理解的部分分享自己的思考，这便要求读者最好通过官方文档对 React 有个简单的认知。

JSX

下面这个例子是React 的最基本用法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

在这小段代码中，我们看到一个有趣的标签语法<h1>Hello, world!</h1>。这个标签语法既不是字符串也不是 HTML，React 团队将其称为 JSX，它是 JavaScript 的语法扩展。通过 JSX，React 可以更容易的在代码中描述 UI。JSX不仅仅可以用来描述UI，同时也可以混杂 JS 的逻辑。如：

const target = 'world'
ReactDOM.render(
  <h1>Hello, {target}!</h1>,
  document.getElementById('example')
);

这段代码的作用和上一段代码的作用一样，但是其中包含了动态的逻辑而不是固定的。JSX 的基本语法规则是：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

语法糖

讲到这里，我们对 JSX 有了简单的了解，但是有过 JS 基础的朋友就会纳闷，JS 本身并不支持 JSX 的语法，JSX 是怎么做到对 JSX 文件的解析。在解释这个问题之前，我们需要先了解一个概念——语法糖。简单的说，语法糖就是一种便捷写法。例如：

input.map(item => item + 1);
input.map(function (item) {
  return item + 1;
});

上面的代码中，前一句代码就是后一句代码的语法糖形式。而对于JSX，便仅仅只是React.createElement(component, props, ...children)函数的语法糖。如下 JSX 代码：

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

实际是:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

当然，这个依然无法解释我们的疑问，React 是如何实现对 JSX 的支持转换。通常来说，我们会说 JS 是解释型语言，典型特征是 JS 无需编译即可运行。但是对 JSX 却不是这样的了。如果你尝试过在本地保存运行一次 React 的代码，仔细看一下终端的输出会发现有一个编译的过程。实际上，通常 React 应用使用 Babel 编译器将 JSX 的代码转化为浏览器能够理解使用的 J S代码。这个过程和C、C++编译器将代码转换为机器码类似，只不过它的目标是将其转换为浏览器能理解的 JS 代码。
这种创造语法并编写一个编译器来支持它的做法在客户端很很罕见，然而在前端中却是常见的做法。除了 JSX，还有微软推出的 TypeScript ，其实也是在 JS 上的一种语法糖，只不过他的语法比 JSX 要复杂的多，但为动态类型的 JS 补齐了类型判断等特性，极大提高了前端的开发效率。