JSX简介
# 01. JSX简介
# 什么是JSX?
const element = <h1>Hello, world!</h1>;
1
以类似模板语法的方式描述UI的一种语法。它是JS的语法糖,本质上也是JS。可以在其中使用变量或表达式、函数等。
# 为什么使用JSX?
将标记与逻辑 共同存放在称之为“组件”的松散耦合单元之中,来实现关注点分离 (opens new window)。
React不强制使用JSX,但在 JavaScript 代码中将 JSX 和 UI 放在一起时,会在视觉上有辅助作用。
# 在 JSX 中嵌入表达式
const element = <h1>Hello, {2+2}</h1>;
1
在 JSX 语法中,你可以在大括号内放置任何有效的 JavaScript 表达式 (opens new window)。
# JSX 也是一个表达式
在编译之后,JSX 表达式会被转为普通 JavaScript 函数调用,并且对其取值后得到 JavaScript 对象
可以把JSX当初一个对象来对待,可以使用它赋值给变量、当参数输入函数、返回JSX等。
# JSX 特定属性
通过使用引号,来将属性值指定为字符串字面量:
const element = <div tabIndex="0"></div>;
1
JSX中的属性名使用camelCase(小驼峰)命名。如上面例子中的
tabIndex
使用大括号,来在属性值中插入一个 JavaScript 表达式:
const element = <img src={user.avatarUrl}></img>;
1
# 使用 JSX 指定子元素
JSX 标签里能够包含很多子元素:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
1
2
3
4
5
6
2
3
4
5
6
# JSX 防止注入攻击
React DOM 在渲染所有输入内容之前,默认会进行转义 (opens new window)。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(cross-site-scripting, 跨站脚本) (opens new window)攻击。
# JSX 表示对象
Babel 会把 JSX 转译成一个名为 React.createElement()
函数调用。
以下两种示例代码完全等效:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1', // 标签名
{className: 'greeting'}, // 属性对象
'Hello, world!' // 内容
);
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11