React学习笔记 - JSX简介

时间:2023-11-28 10:19:26

React Learn Note 2

React学习笔记(二)

标签(空格分隔): React JavaScript


一、JSX简介

const element = <h1>Hello world</h1>;这种被称为JSX,一种JavaScript的语法扩展。React推荐使用JSX来描述用户界面。它完全是在JavaScript内部实现的。

1. 在JSX中使用表达式

在JSX DOM中的表达式要包含在大括号里。React推荐在JSX代码的外面加小括号,防止分号自动插入的bug。

function formatName(user) {
return user.firstName + ' ' + user.lastName;
} const user = {
firstName: 'Jessie',
lastName: 'Pink'
}; const element = (
<h1>
Hello, {formatName(user)}!
</h1>
); ReactDOM.render(
element,
document.getElementById('root')
);

运行如图所示:

React学习笔记 - JSX简介

2. JSX本身也是一种表达式

function formatName(user) {
return user.firstName + ' ' + user.lastName;
} function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger!</h1>;
} const user = {
firstName: 'Jessie',
lastName: 'Pink'
}; // const element = (
// <h1>
// Hello, {formatName(user)}!
// </h1>
// ); const element = (getGreeting(user)); ReactDOM.render(
element,
document.getElementById('root2')
);

最终效果同上。

3. JSX属性

使用引号来定义以字符串为值的属性(JSX会将引号当中的内容识别为字符串):

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

使用大括号定义以js表达式为值的属性:

user.avatarUrl = '../static/img/user.jpg';

const element3 = <div tabIndex="0"></div>;
const element3_2 = <img src={user.avatarUrl} alt="avatar"/>; ReactDOM.render(
element3_2,
document.getElementById('root3')
);

4. JSX嵌套

JSX 标签可以相互嵌套,需要注意的是标签必须闭合。比如img标签,必须在末尾加斜杠<img />,或者使用<img></img>也行,否则会抛出错误。

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

例如,`class`变成了`className`(`class`在js中是保留关键字),而`tabindex`对应`tabIndex`。

5. JSX防注入攻击

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

6. 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()会返回一个对象:

React学习笔记 - JSX简介

这样的对象被称为“React元素”。React通过读取这些对象来构建DOM并保持数据内容一致。

The end...    Last updated by: Jehorn, Jan 03, 2018, 4:52 PM