JSX 简介

变量声明:

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

这个有趣的标签语法既不是字符串也不是 HTML.

它被称为 JSX, 是一种对 JavaScript 的语法拓展。我们建议通过 React 使用它来描述 UI。 JSX 可能让你想起模板语言，但是它拥有 JavaScript 的强大能力。

JSX 产生 React "元素". 下部分我们探索在 DOM 中渲染他们。以下，在开始前了解以下 JSX 的必要性。

Why JSX?

React 信奉渲染逻辑与 UI 逻辑内在耦合：事件怎样被处理，状态就随之改变，数据就如何显示。

代替通过放置标记和逻辑于分离文件的人工分离技术， React 使用包含两者称为 "components" 松耦合单元来分离关注点。稍后我们在之后的部分再回到组件上来，如果你觉得在 JS 中放置标记不舒服，这个对话可能说服你。

React 可以不用 JSX,但多数人认为这个在处理 JavaScript 代码中的 UI 时可读性更好。也能让 React 显示更多有用的错误和警告信息。

不提这些，我们开始！

在 JSX 中嵌入表达式

下面例子中， 我们声明了一个变量 name ，并通过花括号包裹的方式在 JSX 中使用它。

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

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

JSX 中任何可用的 JavaScript 表达式都可以放在花括号中。 例如， 2 + 2， user.firstName, 或者 formatName(user) 全部都是可用的 JavaScript 表达式。

下面的例子，我们嵌入调用 JavaScript 函数的结果， formateName(user) 到元素 <h1> 中。

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

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

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

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

在线尝试

我们为了可读性分开 JSX 到多行。虽然没有必要，但我们建议用小括号包起来，避免自动插入分号的陷阱。

JSX 也是一个表达式

编译之后， JSX 表达式变成常规 JavaScript 函数来调用和求取 JavaScript 对象的值。

这就意味着你可以在 JSX 中使用 if 声明和 for 循环，去给它赋值，接受它作为参数，从函数中返回它。

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 表达式的时候不要用引号包裹花括号。可以使用引号，也可以使用花括号，但是不要同时使用。

指定子节点

如果一个标签是空的，那么你可以像 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.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>

React DOM 默认在渲染之前避免任何值嵌入到 JSX 中。因此， 你永远无法注入任何未明确写入你应用中的东西。所有的东西都会在渲染前变成字符串。这有利于防止 XSS(跨站脚本）攻击。

JSX 描绘对象

Bable 编译 JSX 调用 React.createElement().

下面两个例子万全相同：

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

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

React.createElement() 执行一些检查去帮助你写没有bug 的代码但它潜在创建了一个类似对象：

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    childrent: 'Hello, world!'
    }
  };

这些对象被称为 "React elements"。 你可想象成一个你想在屏幕上看到的描述。
React 读取这些对象使用它们构建 DOM 和保持对其更新。

下一部分我们探讨将 React 元素 渲染至 DOM.