iOS 开发学 React 系列:JSX 与 语法糖

导语

前段时间因为工作缘故,从 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 补齐了类型判断等特性,极大提高了前端的开发效率。

推荐阅读更多精彩内容

  • 前言 在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分...
    itclanCoder阅读 197评论 0 1
  • JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS...
    可乐爱上咖啡阅读 51,550评论 1 58
  • 1、什么是react React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了...
    谷子多阅读 814评论 1 10
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 1,719评论 0 16
  • 1.RN简介 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架...
    smart_yang阅读 1,817评论 1 3