JSX中使用表达式
如果JSX中的代码超过一行，我们一般用一个()进行分组处理，遇到html一般都会单独写在一个新行。
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
再比如：
// 用{}可以直接展示数据内容个，类似es6模板字符串中的 ${}
function getGreeting(user) {
if (user) {
return <h1>Hello, {user}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
JSX 属性与{}
你可以使用引号来定义以字符串为值的属性：
const element = <div tabIndex="0"></div>;
也可以使用大括号来定义以 JavaScript 表达式为值的属性：
const element = <img src={user.avatarUrl} />;
JSX 防注入攻击
你可以放心地在 JSX 当中使用用户输入：
const title = <span>你好！</span>;
// 直接使用是安全的：
const element = <h1>{title}</h1>;
React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。
数组的展示
变量是一个数组，则会展开这个数组的所有成员。
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
var arr = [
<h1>hi, aicoder.com</h1>,
<h2>React is awesome</h2>,
];
return (
<div className="App">
{arr}
</div>
);
}
}
export default App;
最终结果：
hi, aicoder.com
React is awesome
数组map输出一个列表
App.js如下：
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
var arr = ['aicoder.com', 'hamkd.com']
return (
<div className="App">
<h1>aicoder.com</h1>
<ul>
{
arr.map((item, index) =>
<li>{ index +1 } - { item }</li>
)
}
</ul>
</div>
);
}
}
export default App;
最终结果：
aicoder.com
1 - aicoder.com
2 - hamkd.com
JSX的最终归宿
JSX 本质会被编译成JS，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 并保持数据内容一致。
