React文档（三）介绍JSX

我们先看看这个变量声明：

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

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

这种写法叫做JSX，这是一种对js语法的扩展。我们建议使用这种语法和React配合去描述UI本来应该的样子。JSX也许会让你想到模板语言，但是它拥有js的强大支持是与生俱来的。

JSX生产React“元素”。我们会在下一章讲解将这些React元素渲染到DOM中。下面，你可以来看看JSX的基础知识来起步。

在JSX中嵌入表达式

你可以在JSX中嵌入任何使用大括号包裹起来的js表达式。

举个例子，2+2，user.name还有formatName(user)都是有效的表达式：

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')
);

在CodePen里试一试。

我们把JSX代码分割成多行，这样可读性好。即使不需要，但当这样做地时候，我们同样建议将它包裹在圆括号里避免意想不到的错误。

JSX也是一种表达式

JSX表达式在编译之后会变成规则的js对象。

这表示你可以将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>;

也许你也会使用花括号来嵌入一个js表达式到属性中：

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

当你在属性里嵌入js表达式的时候不要使用引用（引号）。否则JSX会把属性值当做一个字符串字面量而不是js表达式。你要么使用引用（引号，为字符串值）要么就用花括号（为js表达式），但是不要同时使用。

在JSX中指定子元素

如果是一个空标签，你会以一个/>来结尾，就像xml：

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

JSX标签也可以包含子元素：

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

警告：

JSX更接近于js而不是HTML，所以React DOM使用驼峰属性命名规则来取代原来的HTML属性名。

举个例子，class变成了className，tabindex变成了tabIndex。

JSX防止注入攻击

在JSX中嵌入用户输入是很安全的：

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

默认情况下，React DOM会在渲染之前避免任何嵌入JSX的值。因此这样能够保证没有人能够将不明确的东西注入你的程序。所有输入都会在渲染之前被转换成字符串。这样能够防止XSS攻击。

JSX表现为对象

Babel会把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',
    children: 'Hello, world'
  }
};

这些对象叫做“React元素”。你可以把它看成是你在屏幕上看到的东西的描述。React会读取这些对象然后使用它们构建DOM并且保持更新。

我们在下一章节研究渲染React元素到DOM。

提示：

建议搜索“Babel”语法格式用于你的编辑器，这样可以高亮显示ES6和JSX的代码。