React从入门到精通系列之(2)JSX的介绍

作者:日期:2017-01-20 22:33:53 点击:242

二、JSX的介绍

首先,请考虑下面的变量声明:

const element = <h1>hello world</h1>;

这个有趣的标签语法,因为它既不是字符串也不是HTML。

它被称为JSX,它是JavaScript的语法扩展。 我们建议使用它和React一起使用,以便描述UI应该是什么样子的。JSX或许看上去像是一个模板语言,但是它具有JavaScript的全部能力。

JSX用来生成React元素。 我们将在下一节中探讨将它们渲染到DOM。 下面,你可以找到JSX的基础知识。

JSX中的嵌入表达式

你可以通过将表达式包含在一个大括号里,以便用来在JSX中嵌入任何JavaScript表达式。 
例如,下面代码中的 2 + 2,user.name,还有formatName(user)都是可用的表达式:

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

我们将JSX拆分为多行以提高可读性。 虽然它不是强制性的要求,但当执行此操作时,我们还建议将其括在括号中,以避免自动分号插入而引起不必要的bug。

JSX也是一个表达式

编译后,JSX表达式会成为常规JavaScript对象。 
这意味着您可以在if语句和for循环中使用JSX,可以将其赋值给变量或者将其作为参数,然后从函数中返回:

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

使用JSX指定属性

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

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

您还可以使用大括号在属性中嵌入JavaScript表达式:

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

使用JSX指定子元素

如果标记为空,您可以使用 /> 立即关闭它,例如html:

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

JSX标签也可以包含子元素:

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

警告

由于JSX比HTML更接近JavaScript,React DOM使用驼峰命名法约定而不是HTML属性名称。 
例如,class在JSX中变为className,tabindex变为tabIndex。

JSX防止注入攻击

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

const title = response.potentiallyMaliciousInput; // 要接收到的可能含有危险内容的字符串放入大括号中,这是比较安全的做法 const element = <h1>{title}</h1>;

默认情况下,React DOM在渲染它们之前转义嵌入在JSX中的任何值。 因此,它确保不能注入那些没有明确写在你的应用程序中的任何东西。 在渲染之前,一切都转换为字符串。 这有助于防止XSS(跨站点脚本)攻击。

JSX表示对象

Babel将JSX编译为React.createElement()调用。 
这两个例子是相同的:

const element = (     <h1 className="greeting">         hello world     </h1> );
const element = React.createElement( 'h1', {className: 'greeting'}, 'hello world' );

React.createElement()会进行一些检查,以帮助您编写无明显语法错误的代码,本质上,它创建的是一个像这样的对象:

// 提示:这是一个简单对象结构 
const element = {type: 'h1',
props: {
className: 'greeting',
children: 'hello, world'
}
};

这些对象称为“React元素”。 你可以把它们想象成你想在屏幕上看到的样子。 React读取这些对象,并使用它们构造成为DOM元素同时一直保持其为最新的。

上一篇: React从入门到精通系列之(1)安装React

下一篇: 基于Node.js的爬虫入门