15.2 React JSX

JSX在JavaScript中引入XML语法

JSX是什么

JSX是Facebook提出的一个预处理脚本,可以在 JavaScript 的代码中直接使用 HTML 标签来编写界面组件。 其使用的是类XML语法,需要通过 JSXTransformer 来编译转换成原生 JavaScript 代码才能真正执行。 如果不使用JSX,要插入HTML元素,会出现大段的字符串拼接,难以维护,另外界面组件的行为和结构是分离开的。 在React中,我们可以不使用JSX,但是JSX可以使代码更简洁易读。

JSX基本语法

和 XML一样,JSX标签包含标签名称,属性,和子元素。如果属性值以引号括起来,则该值为字符串,用大括号封装起来的是JavaScript表达式。

在线实例代码如下:

点击JS面板中的“编译”按钮,你可以看到对应的原生JS代码,对比可以发现两者的差异。你就会明白JSX带来的代码简化。

JSX逻辑语句

我们还可以在JSX中使用逻辑语句,但必须是一次性执行完成的语句:

关键字冲突

因为 JSX 是直接将 HTML 写在 JavaScript 代码中,为避免和JavaScript关键字冲突,属性命名需要做下转换,比如class 要换成 classNamefor 要换成 htmlFor

内置样式

React 希望一个组件可以是独立的(即结构、行为和样式一体)。我们可以将样式直接通过 JavaScript 的对象插入到 JSX 中,这样就可以在组件内部来定义样式了:

var paraStyle = {
  color: '#fff',
  fontSize: '14px'
};
var para = (
  <p style={paraStyle}></p>
);