开源项目精选：React界面构建语言——JSX

本文主要介绍一些关于 JSX 的知识，包括 JSX 是什么，以及它的用途等，力求让各位对 JSX 有一个简单的了解。

JSX 是什么

JSX=JavaScript+XML，它看起来像是 HTML 和 JavaScript 的混合体，实际上它是一种 JavaScript 的语法扩展，用来在 React 中描述 UI 。

XML？HTML？

相信各位看到 XML 时都多多少少会想起这个名字相近的 HTML，实际上，XML 和 HTML 都是一种标记语言。但是 XML 不同于 HTML 的地方在于它拥有更严格的语法要求和它允许用户自定义标签。一般 XML 是描述数据用的，人们的关注点在于数据本身；而 HTML 更多的时候只需要显示数据，这时人们比较关心数据的外观而不是内容。

JSX 语法

来个最简单直观的例子

这个例子中 HTML 语言直接与 JavaScript 语言混用了，在实际的开发中，这可以有效的扩展 JavaScript 的语义。如果转化成完全的 JavaScript，就应该这么写

简单的说，JSX 看到 HTML 就按 HTML 来对待，看到 JavaScript 就按 JavaScript 来对待。

JSX 的使用

JSX 的语法

JSX 本身就和 XML 语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入 JavaScript 表达式，例如：

一般每个组件都定义了一组属性（props，properties的简写）接收输入参数，这些属性通过 XML 标记的属性来指定。大括号中的语法就是纯 JavaScript 表达式，返回值会赋予组件的对应属性，因此可以使用任何 JavaScript 变量或者函数调用。

上述代码经 JSX 编译就会得到：

在 JSX 中使用事件

就像这样

JSX 和原生 HTML 定义事件的唯一区别就是 JSX 采用驼峰写法来描述事件名称，大括号中仍然是标准的 JavaScript 表达式，返回一个事件处理函数。在 JSX 中你不需要关心什么时机去移除事件绑定，因为 React 会在对应的真实 DOM 节点移除时就自动解除了事件绑定。

在 JSX 中使用样式

尽管在大部分场景下我们应该将样式写在独立的 CSS 文件中，但是有时对于某个特定组件而言，其样式相当简单而且独立，那么也可以将其直接定义在 JSX 中。在 JSX 中使用样式和真实的样式也很类似，通过 style 属性来定义，但和真实 DOM 不同的是，属性值不能是字符串而必须为对象，例如：

里面的大括号只是标准的 JavaScript 对象表达式，外面的大括号是 JSX 的语法。

在 JSX 中自定义组件

在 JSX 中，我们不仅可以使用 React 自带 div , input… 这些虚拟 DOM 元素，还可以自定义组件。组件定义之后，也都可以利用XML语法去声明，而能够使用的 XML Tag 就是在当前 JavaScript 上下文的变量名，这一点非常好用，你不必再去考虑某个 Tag 是如何对应到相应的组件实现。

JSX 学习的技巧

1.不要将 JSX 看作是模板，而应视为需要被编译的可替代的 JS 语法（语句）。也就是说，JSX 只是将类似 XML 的标记转换为 JavaScript 。

2.Babel 工具是 React 团队的主要选择，用于将 ES *代码和 JSX 语法转换为 ES5 代码。您可以通过 http://babeljs.io/ 了解更多关于Babel的信息，或阅读Babel手册。

3.JSX 的优点有四点：

（1）技术含量较低的人仍然能够理解和修改所需的部分。CSS 开发人员和设计人员会发现 JSX 比 JavaScript 更为熟悉。也就是说，使用 JSX 的 HTML 标记看起来像 HTML 标记，而不是 createElement() 函数的金字塔。

（2）您可以利用 HTML 中 JavaScript 的全部功能，避免学习或使用模板语言。JSX 不是模板解决方案。它是用于表示 UI 节点和组件的树结构的声明性语法。

（3）通过添加JSX转换步骤，你会发现一些在HTML中你可能会忽略的错误。

（4）JSX 提倡内联样式的思想。这可能是一件好事。

4.谨防 JSX Gotchas。

5.JSX 与 React 本身不同。JSX 不会试图遵守任何 XML 或 HTML 规范。JSX 被设计为 ECMAScript 特性，并且与 XML / HTML 的相似性仅在表面上（即它看起来像 XML / HTML，因此您可以只写一些熟悉的东西）。目前正在起草一份 JSX 规范，任何人都可以将其作为一个类似于 XML 的语法扩展到 ECMAScript，而不需要任何定义的语义。

6.在 JSX 中，单独是有效的，而不是。

Facebook:

https://facebook.com/openingsource

Twitter: https://twitter.com/openingsource

Google + ：

https://google.com/+OpeningSource

微信公众号id: openingsource

微博：

https://weibo.com/openingsource