JSX 简介

请观察下面的变量声明：

const element = 
Hello, world!
;

这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML。

它被称为 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。

JSX 用来声明 React 当中的元素。在里面我们会详细介绍元素是如何被渲染出来的，接下来呢，我们先来看看 JSX 的基本使用方法。

在 JSX 中使用表达式

你可以任意地在 JSX 当中使用 ，方法是，将表达式包含在大括号 {} 里。

例如 2 + 2, user.firstName, 以及 formatName(user) 都是有效的表达式。

function formatName(user) {  return user.firstName + ' ' + user.lastName;}const user = {  firstName: 'Harper',  lastName: 'Perez'};const element = (  
    Hello, {formatName(user)}!  
);ReactDOM.render(  element,  document.getElementById('root'));

我们书写 JSX 的时候一般都会带上换行和缩进，这样可以增强代码的可读性。与此同时，我们同样推荐在 JSX 代码的外面扩上一个小括号，这样可以防止  的bug.

JSX 本身其实也是一种表达式

在编译之后呢，JSX 其实会被转化为普通的 JavaScript 对象。

这也就意味着，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以：

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

JSX 属性

你可以使用引号 "" 来指定字符串为属性的值：

const element = 
    
;

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

const element = ;

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

JSX 嵌套

如果 JSX 标签是闭合式的，那么你需要在结尾处用 /> ，就好像 XML 一样：

const element = ;

JSX 标签可以有子标签：

const element = (  
    
    
     
Hello!
    
     
Good to see you here.
  
    
);

警告:

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

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

JSX 防注入攻击

你可以放心地在 JSX 当中使用用户输入：

const title = response.potentiallyMaliciousInput;// 这是安全的：const element = 
{title}
;

默认情况下，React DOM 在渲染前会  嵌入在 JSX 中的任何值。因此，可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止  攻击。

JSX 代表 Objects

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

下面两段代码的作用其实是相同的：

const element = (  
    Hello, world!  
);

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

React.createElement() 这个方法首先会执行一些检查，以帮助您编写无错误的代码，之后会返回一个类似下面的对象：

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

这样的对象被称为 “React 元素”。你可以将其视为你想要在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

我们将在下一个章节当中介绍更多有关 React 元素 是如何渲染成 DOM 的内容。

**

如果你是在使用本地编辑器编写 JSX 代码的话，推荐你去装一个支持 JSX 高亮的插件，这样更方便之后的开发学习。

小结

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

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

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

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