React JSX语法

JSX即 JavaScript XML，是一种在React组件内部构建标签的类XML语法。组件在React中，是用于分离关注点，而非模板或处理显示的逻辑。虽然React不使用JSX同样可以工作，但官方更建议使用JSX。JSX借签了XML标签打开与关闭的优点，提高了组件及复合组件的可读性。JSX中可以直接使用HTML标签，赋予React强大的表现能力的同时，也方便更多开发人员参与开发。

1. HTML标签与React组件
2. JSX与JavaScript
3. JSX与JavaScript表达式

1. HTML标签与React组件

React即可以渲染HTML标签，也可以渲染React组件。JSX语法约定了分别使用首字母大小写，来区分本地组的类和HTML标签：

• HTML标签，标签名以小写字母开头
• React组件，标签名以大写字母开头

如，渲染HTML标签，JSX中以小写字母开头：

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.getElementById('example'));

渲染React 组件，组件名是一个以大写字母开头的本地变量：

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.getElementById('example'));

JSX是对JavaScript的扩展，它并没有修改JavaScript的语义。React脱离JSX也可以正常工作。

如，使用JSX时：

React.render(
  <div>
    <div>
      <div>content</div>
    </div>
  </div>,
  document.getElementById('example')
);

不使用JSX 时：

React.render(
  React.createElement('div', null,
    React.createElement('div', null,
      React.createElement('div', null, 'content')
    )
  ),
  document.getElementById('example')
);

注意:

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

2. JSX与JavaScript

实际上，JSX最终会把类XML的语法转成原生JavaScript。XML的元素、属性、子节点，会被转换成React.createElement()方法的参数：

var Nav;
// 输入 (JSX):
var app = <Nav color="blue" />;
// 输出 (JS):
var app = React.createElement(Nav, {color:"blue"});

createElement()最终会返回一个ReactElement对象，实际我们所编写的XML标签都会调用createElement()方法并最终转化为一个ReactElement对象，这样JSX语法也就被转换成了JavaScript语法。

createElement()语法结构

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

该方法创建并返回一个ReactElement对象，其参数如下：

• type，可以是一个HTML标签或是一个React组件类
• props，可选参数，表示对象的属性
• children，第三个参数及其后的参数都会被认为是元素的子元素

理解createElement()语法后，我们来看一个JSX定义XML式的子节点的示例：

var Nav, Profile;
// 输入 (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// 输出 (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

3. JSX与JavaScript表达式

React保留了JavaScript的语义，在JSX语法中支持以下几种形式的表达式。要使用{}包括，而不能使用""：

属性（特性）表达式

JSX使用JavaScript的属性表达式做为属性值时：

// 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出 (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

子节点表达式

JavaScript表达式也可以用于描述子节点：

// 输入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 输出 (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

注释

JSX的注释要在标签的子节点内使用：

var content = (
  <Nav>
    {/* 一般注释, 用 {} 包围 */}
    <Person
      /* 多
         行
         注释 */
      name={window.isLoggedIn ? window.name : ''} // 行尾注释
    />
  </Nav>
);