React之JSX

1、JSX简介

JSX 的官方定义是类 XML 语法的 ECMAScript 扩展。它完美地利用了 JavaScript 自带的语法和特性，并使用大家熟悉的 HTML 语法来创建虚拟元素。

JSX是一种JavaScript的语法扩展，是在JavaScript内部实现的。JSX用来声明React当中的元素。

const element = <h1>Hello world!</h1>;

JSX的优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

推荐在 React 中使用 JSX 来描述用户界面。

2、在JSX中使用表达式

在 JSX 当中使用JavaScript 表达式， JSX 当中的表达式要包含在大括号里。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

为了增强代码的可读性，推荐在 JSX 代码的外面扩上一个小括号，这样可以防止分号自动插入的bug。

3、JSX本身是一种表达式

在编译后，JSX被转化为普通的JavaScript对象。

4、JSX属性

可以使用引号定义以字符串为值的属性：

const element = <div tabIndex="0"></div>;

使用大括号来定义以 JavaScript 表达式为值的属性：

const element = <img src={user.avatarUrl}></img>;

注意：使用大括号包裹的表达式，不要再使用引号，否则，JSX会将引号当中的内容识别为字符串，而不是表达式。

5、JSX嵌套

JSX标签是闭合式的，需要在结尾处用/>，就像XML/HTML一样：

const element = <img src={user.avatarUrl} />;

JSX标签同样可以相互嵌套：

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

注意：
因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。

例如，class 变成了className，而 tabindex 则对应着 tabIndex

6、JSX代表Objects

Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象：

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。