您的位置：首页 > Web前端 > React

02. react 初次见面---JSX简介

2017-12-30 14:44 295 查看

摘要: 内容直接从React官网上复制，加以自己的整理。

1、JSX简介

我们来观察一下声明的这个变量：

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

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

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

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

2、在 JSX 中使用表达式

你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。

例如

2 + 2

user.firstName

, 以及

formatName(user)

都是可以使用的。

//js方法
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 代码的外面扩上一个小括号，这样可以防止分号自动插入的bug.

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

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

这也就意味着，你其实可以在

if

或者

for

语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以：

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

4、JSX 属性

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

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

也可以使用大括号来定义以 JavaScript 表达式为值的属性：

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

切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式。

5、JSX 嵌套

如果 JSX 标签是闭合式的，那么你需要在结尾处用

/>

, 就好像 XML/HTML 一样：

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

JSX 标签同样可以相互嵌套：

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

警告:

因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用

camelCase

小驼峰命名来定义属性的名称，而不是使用 HTML 的属性名称。

例如，

class

变成了

className

，而

tabindex

则对应着

tabIndex

6、JSX 防注入攻击

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

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

React DOM 在渲染之前默认会过滤所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。

7、JSX 代表 Objects

Babel 转译器会把 JSX 转换成一个名为

React.createElement()

的方法调用。

下面两种代码的作用是完全相同的：

const element = (
<h1 className="greeting">
Hello, world!
</h1>
);

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

React.createElement()

这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象：

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

这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JSX React SeasonQ

相关文章推荐

新的分享

章节导航