React教程 - 2. 学习JSX

本文译自React官方文档
全文翻译及相关代码,请参看我的Github

首先看看以下代码段:

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

这个有趣的标签表达式既不是一个字符串,也不是一个HTML标签。
它叫做JSX,是JavaScript的扩展。我们推荐在React中使用JSX描述UI。
JSX也许会使你想起某种模板语言,它可以充分利用JavaScript的特性。
JSX创建React元素。我们将再下一章节学习如何将其渲染至DOM。接下来,我们将学习JSX的基本用法。

1.在JSX中嵌入表达式

在JSX中,您可以通过 {} 的方式嵌入任何JavaScript表达式。
2+2, user.firstName, 和 formatName(user) 等均为有效的表达式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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分成了多行。但这并不是强制性的。
当需要分行时,我们推荐使用圆括号 () 将其括起,从而避免JS的自动插入机制ASI

2.JSX也是表达式

通过编译后,JSX表达式变成了常规的JavaScript对象。
这意味着您可以使用JSX中使用 if 语句和 for 循环等:

1
2
3
4
5
6
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}

3.使用JSX指定标签属性

您可以使用引号 “” 将字符串指定为属性:

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

也可以使用括号 {} 嵌入JavaScript表达式作为属性:

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

但是,当通过JavaScript表达式未属性赋值时,不要使用双引号。
否则,JSX会将其视为一个字符串而非JavaScript表达式。
对于字符串,我们可以直接使用 “” 将其作为属性值;对于表达式,我们可以通过 {} 将其作为属性值。
但是不要将其混用

4.使用JSX指定子元素

当某tag不含值时,可以直接用 /> 将其关闭:

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

JSX的标记可以包含子元素:

1
2
3
4
5
6
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);

注意,由于相对HTML而言,JSX更加类似于JavaScript, React DOM使用驼峰命名代替HTML中的属性名。
例如,JSX中使用 className 而非 class , 使用 tabIndex 而非 tabindex

5.JSX能够防注入攻击

在JSX中直接嵌入用户输入是安全的:

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

在执行渲染前,React DOM会默认对任何嵌入的值进行编码。
这可以避免应用被注入,可以避免XSS攻击。

6.JSX表示对象

Babel将JSX编译为 React.createElement() 调用。
以下两种写法是一致的:

1
2
3
4
5
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);

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

React.createElement() 会执行一些语法方面的检查,但其核心功能是创建一个如下的对象:

1
2
3
4
5
6
7
8
9
const element = {
...
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
...
};

这些对象被称为”React元素”。我们可以将其视为我们想要在屏幕上表现的元素的描述。React读取这些对象并利用他们构建DOM并保持更新。
我们将在下一部分学习将React元素渲染成DOM。
Tip:
为了ES6和JSX都能在编辑器中高亮显示,我们推荐您将您的编辑器设置为”Babel”语法方案。

本文首发于http://www.miaoyunze.com/,转载请注明出处