React JSX 简介

React 使用 JSX 来替代常规的 JavaScript。

JSX 是看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 后进行了优化。

它是类型安全的，在编译过程中就能发现。

使用 JSX 编写模板更加简单。

我们先看下以下：

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

这个有趣的语法既不是字符串也不是 HTML。

它被称为 JSX，是 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部。

JSX 可以 React “元素”。

为什么使用 JSX？

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要到 UI，以及需要在 UI 中展示准备好的数据。

React 并没有采用将与逻辑进行分离到不同这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现。我们将在中深入学习组件。如果你还没有适应在 JS 中使用语言，这个应该可以说服你。

React 使用 JSX，但是大多数人发现，在 JavaScript 中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 更多有用的和警告消息。

搞清楚这个问题后，我们就开始学习 JSX 吧！

在 JSX 中嵌入表达式

在下面的例子中，我们声明了名为 name 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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

在 JSX 语法中，你可以在大括号内放置任何有效的 。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。

在下面的示例中，我们将 JavaScript  formatName(user) 的结果，并将结果嵌入到 <h1> 元素中。

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 拆分为多行。同时，我们建议将包裹在括号中，虽然这样做不是强制要求的，但是这可以避免遇到陷阱。

JSX 也是表达式

在编译之后，JSX 表达式会被转为普通 JavaScript ，并且对其取值后得到 JavaScript 对象。

也就是说，你可以在 if 语句和 for 循环的块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从中返回 JSX：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 特定

你可以通过使用引号，来将值指定为字符串字面量：

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

也可以使用大括号，来在值中插入 JavaScript 表达式：

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

在中嵌入 JavaScript 表达式时，不要在大括号外面引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的，对于同一不能同时使用这两种符号。

警告：

因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义的，而不使用 HTML 的命名约定。

例如，JSX 里的 class 变成了 ，而 tabindex 则变为 。

使用 JSX 指定子元素

假如里面没有，你可以使用 /> 来闭合，就像 XML 语法一样：

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

JSX 里能够包含很多子元素:

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

JSX 防止注入攻击

你可以安全地在 JSX 当中插入输入：

const title = response.potentiallyMalicsInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

React DOM 在渲染所有输入之前，认会进行。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的。所有的在渲染之前都被转换成了字符串。这样可以有效地防止 攻击。

JSX 表示对象

Babel 会把 JSX 转译成名为 React.createElement() 。

以下两种示例完全等效：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

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

React.createElement() 会预先执行一些检查，以帮助你编写无错，但实际上它创建了这样的对象：

// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。

我们将在下一章节中探讨如何将 React 元素渲染为 DOM。

：

我们推荐在你使用的编辑器中，使用 ，来正确地高亮 ES6 和 JSX 。本网站使用与其兼容的  配色方案。