React语法基础之JSX
分针网 每日分享：React语法基础之JSX
概述
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>
