JSX是JavaScript的语法扩展,通常与React一起使用来表达UI的显示。JSX生成React的元素。下一章将会介绍如何将他们JSX的元素转化成DOM。接下来首先学习必要的JSX基础概念。
JSX是什么?
React显示了渲染逻辑与其他事件逻辑的耦合的情况:事件是如何处理的,状态是如何随着时间改变的,数据又是如何获取显示的。React通过组件将标签和事件的逻辑松散地结合到一起取代了将标签和事件逻辑分别写到不同的文件的方式。组件我们会做进一步介绍,但如果你对JS中加入标签的方式感到困惑,那么本文将会使你以新的角度去理解这种方式。
React并不是强制使用JSX,但多数人发现利用JSX将UI嵌入到JavaScript
会更加直观。同时也能使React更方便地显示错误或者警告消息。
顺着这个思路,我们开始具体研究下。
JSX的嵌入式表达
以下例子示范了变量name通过大括号包裹嵌入到JSX语句中
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
在大括号中输入其他有效的表达式也可以嵌入到JSX中。例如, 2 + 2
, user.firstName
, 或者 formatName(user)
都是合法的JavaScript表达式。
以下例子示范了调用JavaScript方法formatName(user)
并将它的结果嵌入到<h1>
标签中。
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')
);
虽然不是强制的,但为了便于阅读,可以将JSX表达式分成多行,并写于圆括号之内,以免自动的分号会插入到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属性赋值
字符串写到双引号内再赋值给JSX的属性
const element = <div tabIndex="0"></div>;
JS表达式写到花括号内再赋值给JSX的属性
const element = <img src={user.avatarUrl}></img>;
表达式不能用双引号,字符串变量也不行。给JSX属性赋值的时候要么就用双引号(字符串),要么就用花括号(表达式),不能同时两个都使用。
警告:
相比HTML,JSX更接近于JavaScript,因此React DOM 使用驼峰命名规则取代HTML的属性命名规则。
例如class 在JSX中就写成className,tabindex就写成 tabIndex
JSX子标签
如果标签内为空可以直接用/>
扩起来,就跟XML一样:
const element = <img src={user.avatarUrl} />;
如果标签内还有子标签:
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(cross-site-scripting)攻击。
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上。
Tip:
我们推荐你的编辑器选项使用”Babel”语句,这样可以ES6和JSX代码都可以高亮。这个网站使用Oceanic Next 色调方案使两者兼容。