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

React语法基础之JSX

2017-04-12 22:35 585 查看

概述

React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。

JSX是什么

JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。使用虚拟DOM可以将React的语法转换为标准的JS语言。

简单来说，JSX就是Javascript和XML结合的一种格式。

JSX语法实例：

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


实际上面的代码转换为js代码，等价于：

var element = React.createElement(
"h1",
null,
"Hello, world!"
);


JSX简介

JSX的特点

jsx语法之所以被大家接受，主要具有以下特点：

类XML语法容易接受，结构清晰

增强JS语义

抽象程度高，屏蔽DOM操作，跨平台

代码模块化

Transfer

JSX编译器的核心是将基于XML的语言编译成JS代码，主要是依赖于React.createElment函数。如：

var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});


var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);


JSX语法

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。例如：

var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);


那么接下来我们针对React简单介绍下常见的语法。

三元表达式

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。例如:

var person = <Person name={window.isLoggedIn ? window.name : ''} />;


上述代码经编译后意思等同于：

var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);


数组递归

数组循环,数组的每个元素都返回一个React组件。例如：

var lis = this.todoList.todos.map(function (todo) {
return  (
<li>
<input type="checkbox" checked={todo.done}>
<span className={'done-' + todo.done}>{todo.text}</span>
</li>
);
});

var ul = (
<ul className="unstyled">
{lis}
</ul>
);


JSX事件绑定

和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。例如，给一个按钮绑定点击事件：

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>


事实上，React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。

If-Else条件语句

上面我们说了三元表达式，但是在有些场景下，三元表达式往往并不能满足需求，React建议的方式是在JS代码中使用if表达式。例如：

var loginButton;
if (loggedIn) {
loginButton = <LogoutButton />;
} else {
loginButton = <LoginButton />;
}

return (
<nav>
<Home />
{loginButton}
</nav>
);


Switch表达式

return (
<section>
<h1>Color</h1>
<h3>Name</h3>
<p>{this.state.color || "white"}</p>
<h3>Hex</h3>
<p>
{(() => {
switch (this.state.color) {
case "red":   return "#FF0000";
case "green": return "#00FF00";
case "blue":  return "#0000FF";
default:      return "#FFFFFF";
}
})()}
</p>
</section>
);


Loop循环

var rows = [];
for (var i=0; i < numrows; i++) {
rows.push(<ObjectRow />);
}
return <tbody>{rows}</tbody>;


JSX语法属性

jsx中可以使用引号将字符串字面量指定为属性值。如：

const element = <div tabIndex="0"></div>;//”0”是一个字符串字面量


你也可以将一个JavaScript表达式嵌在一个大括号中作为属性值：

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


上面的代码等价于js的如下代码：

const element = React.createElement("img", { src: user.avatarUrl });


JSX的子元素

JSX允许使用一个不包含Children的empty tag。如下代码是正确的：

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


当然，也可以像HTML标签一样包含Children。例如：

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


这种写法在生成React元素的时候给我们带来了很大的便利，而且能够更加直观地描述UI。因而，简单易读。

JSX可自动防范注入攻击

在JSX中嵌入接收到的内容是安全的。不会出现代码注入的情况。

onst danger = response.potentialDanger;
cosnt ele = <h1>{title}</h1>


在默认情况下，React DOM会将所有嵌入JSX的值进行编码。这样可以有效避免xss攻击。

我们将代码编译后增加html：

class Test extends React.Component {
render() {
let v = "<script><\/script>";
return (
<div>
<h1>{v}</h1>
</div>
)
}
};

ReactDOM.render(
<Test />,
document.getElementById('test')
);


运行结果：



可以看到通过JSX插入的文本自动进行了HTML转义，所以这里插入的是一段文本，而不是

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="test"></div>
<script type="text/javascript">
document.getElementById("test").innerHTML="<h1><script><\/script><\/h1>";
</script>
</body>
</html>


运行结果：



注意，此时插入的是一个

class Test extends React.Component {
render() {
let v = {
__html: "<script><\/script>"
};
return (
<div>
<h1 dangerouslySetInnerHTML={v}/>
</div>
)
}
};


注：此时，插入了script标签。



使用React应注意

1）使用JSX时要引入React库

import React from 'react';


或者你不使用打包工具，也可以直接通过script标签引入React。例如：

//本地
<script src="./react.js"></script>
//或者BootCDN
<script src="http://cdn.bootcss.com/react/15.4.0/react.js"></script>


2）引入JSX中用到的自定义组件

JSX中用到的组件可能并不会在JavaScript中直接引用到，但自定义组件本质上就是一个JS对象，你在JSX中使用的时候，需要首先将该组件引入到当前作用域。例如：

import MyComponent from './MyComponent.js'

...

<Outer>
<MyComponent />
</Outer>


3）自定义组件首字母一定要大写

JSX中小写字母开头的element代表HTML固有组件如div，span，p，ul等。用户自定义组件首字母一定要大写如
、。

4）元素标签名不能使用表达式

如果需要使用一个表达式来决定元素标签，你应该先将该表达式的值赋给一个大写字母开头的变量。例如：

const components = {
photo: PhotoStory,
video: VideoStory
};

function Story(props) {
// Correct! JSX type can be a capitalized variable.
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
}


5）设置style属性

在设置标签style属性的时候，要注意，我们是将一个描述style的对象以JavaScipt表达式的形式传入。因此应该有2层大括号。例如：

<div style={{color:'red', margin:'10px auto'}}></div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航