React 入门教程系列（三）——JSX 和 虚拟 DOM

1. JSX

JSX的全称是 JacaScript XML，是 React 定义的第一种类似于 XML 的 JS 拓展语法。

JSX 的语法大致遵循下面几条：

• 标签名任意
• 标签属性任意
• 遇到< 符号，以标签的语法进行解析
• 遇到{ 符号，以 js 语法解析，js代码必须用 {} 包含

JSX 的作用是用来创建 react 虚拟 DOM 对象，例如下面的代码：

var vDom = <h1>Hello React!</h1>

值得注意的是，上面的代码不是字符串，也不是 HTML/XML 标签，也不是存粹的 JavaScript 代码，上面代码最终产生的就是一个 JS 对象。

上面的一段 code 会被 babel解释成如下代码：

var vDom = React.createElement('h1', {
   }, 'Hello React')

React 对象直接调用 createElement 函数，函数接受三个参数：

1. 第一个是要渲染的标签
2. 第二个传入标签相关属性，例如 title、id等等
3. 第三个参数则是传入标签中的文本。

2. 虚拟 DOM

在之前使用原生 JavaScript 或者 jQuery 操作 DOM 是一件非常麻烦的事情，DOM 标签和 JavaScript 代码混在一起，编写困难且不易阅读。另外，频繁的操作 DOM 也会带来性能上的问题。

虚拟 DOM 的出现，很好的解决了上面的问题。

虚拟 Dom 可以看作是使用 JavaScript 代码模拟 DOM 结构的树形结构，DOM 中的标签、内容对应着 JavaScript 代码中以 key-value 的对象，例如下图：

在 React 中创建虚拟 DOM 有两种方法：

• 第一种是使用纯 JavaScript 代码进行创建
• 第二种方式是使用 JSX 的语法，通过 babel 对这种语法进行解释成浏览器可识别的 JS 代码。

具体使用可以查看下面两个实例。

3. 实例1

下面我们就分别尝试使用 JSX 语法和纯 JavaScript 代码两种方式