React JSX

JSX (JavaScript XML) 是 JavaScript 的一个语法扩展。它允许我们在 JavaScript 文件中编写类似 HTML 的代码，这使得描述 UI 变得非常直观。

看下面这个例子：

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

这个有趣的、类似标签的语法既不是字符串，也不是 HTML。它就是 JSX。

为什么使用 JSX？

React 认为渲染逻辑本质上与其他 UI 逻辑（如事件处理、状态变化）是内在耦合的。React 并没有将标记和逻辑分离到不同的文件中，而是将它们共同存放在一个称为“组件”的松散耦合单元中。

虽然你可以不使用 JSX 来编写 React（我们稍后会看到如何做），但绝大多数开发者都认为 JSX 在构建 UI 时能提供巨大的帮助，并且 React 也能通过它给出更有用的错误和警告信息。

在 JSX 中嵌入表达式

你可以将任意的 JavaScript 表达式嵌入到 JSX 中，方法是将其包裹在大括号 {} 里。

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

你也可以将函数调用的结果嵌入 JSX：

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

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

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

为了便于阅读，我们经常将 JSX 分成多行。此时，我们建议用 () 将其包裹起来，以避免自动分号插入的陷阱。

JSX 也是一个表达式

经过编译后，JSX 表达式会变成常规的 JavaScript 函数调用，并且其值为 JavaScript 对象。这意味着你可以在 if 语句和 for 循环中使用 JSX，将其赋值给变量，作为参数传递，以及从函数中返回。

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>; // 从函数返回 JSX
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 属性

你可以使用引号来指定字符串字面量作为属性：

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

也可以使用大括号来嵌入 JavaScript 表达式作为属性：

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

注意： 由于 JSX 比 HTML 更接近 JavaScript，React DOM 使用 camelCase（驼峰命名法）来定义属性的名称，而不是 HTML 属性名称的命名约定。

例如，HTML 中的 class 在 JSX 中变成了 className，而 tabindex 则变成了 tabIndex。

JSX 防止注入攻击

默认情况下，React DOM 在渲染之前会转义所有嵌入到 JSX 中的值。这意味着你的应用可以免受 XSS（跨站脚本）攻击。所有内容在渲染前都会被转换成字符串，因此你永远不会注入任何非预期内容。

JSX 代表了对象

Babel 会把 JSX 转译成 React.createElement() 函数的调用。

以下两个示例是完全相同的：

使用 JSX:

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

不使用 JSX:

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

React.createElement() 会创建一个像下面这样的对象（为了简化，略有删减）：

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

这些对象被称为 “React 元素”。它们是 React 用来构建和更新 DOM 的基础。现在你已经了解了 JSX，接下来我们将深入学习 React 的核心单元：组件。