深入理解JSX
一、为什么使用JSX
1、JSX看起来像是XML的JavaScript语法扩展。React可以用来做简单的JSX语法转换。
不需要为了React使用JSX可以使用JS创建，但建议使用JSX，因为可以使定义简洁且我们素质的包含属性的树状结构语法。XML有固定的标签开启和闭合，这能让复杂的树更易于阅读，优于方法调用和队形字面量的形式。
二、JSX使用
1、HTML标签与React组件对比
React可以渲染HTML标签（strings)或者React组件（classes）。
要渲染HTML标签：只需在JSX里使用小写字母开头的标签名。例如：
var myDivElement= ;
React.render(myDivElement,document.body);
要渲染React组件只需创建一个大写字母开头的本地变量：
varMyComponent =React.createClass({/*...*/});
varmyElement= <MyComponent someProperty={true}/>; React.render(myElement,document.body);
React的JSX里约定分别使用首字母大小写区别本地组件的类和HTML标签。
PS：由于JSX就是JavaScrript，一些标识想是class和for不建议作为XML属性名，作为代替，React DOM使用className和htmlfor来做对应的属性。
2、转换
JSX把类XML的语法转换成纯粹JavaScript，XML元素、属性、和子节点被转换成React.creatElement的参数。
PS：JSX总是当作ReactElement执行，具体的实际细节可能不同。
3、JavaScript表达式
属性表达式：
要使用JavaScript表达式作为属性值，只需要把这个表达式用一对大括号包起来，不要用（“”）。例如：
//输入（JSX）
var person =
//输出（JS）
var person =React.createElement(
Person,
{name:window.isLoggedIn?window.name : ''}
};
4、子节点表达式
同样的JavaSCript表达式可用于表述子节点
// 输入 (JSX):
varcontent = <Container>{window.isLoggedIn? <Nav/> : <Login/>}</Container>;
// 输出 (JS):
varcontent =React.createElement(
Container,
null,
window.isLoggedIn? React.createElement(Nav): React.createElement(Login)
);
注释
JSX里添加注释很容易；他们只是JS表达式而已。你只要在一个标签的子节点内（非最外层)小心地用{}包围要注释的部分。
var content = (
{/*一般注释,用 {}包围 */}
/*多 行 注释 */ name={window.isLoggedIn ? window.name : ''} //行尾注释 /> ); 三、JSX的延展属性 1、 varcomponent = <Component/>; component.props.foo= x; // 不好 component.props.bar= y; // 同样不好 这样是反模式出现错误React不会见长属性类型，有错误就不可以提示，props应该被禁止修改，修改后可能导致预料之外的结果。 2、延展属性（Spread Attributes） var props ={}; props.foo =x; props.bar=y; var component = 传入组件的属性会被复制到组件内。它能多次使用也可以与其他属性一起用。 var props= {foo：‘default’} var component = console.log(component.props.foo);//'override' PS: ...这三个点是操作符（也被叫做延展操作符-spread operator）已经被ES6数组支持。相关的还有ES7规定草案中的Object剩余和延展属性（Rest and Spread Properties）。 四、JSX的陷阱 1、JSX与HTML很相似但是还是存在一些关键的区别。 首先与DOM的区别，如行内样式style。 React 为了性能和跨浏览器的原因，实现了一个独立于浏览器的事件和 DOM 系统。利用此功能，可以屏蔽掉一些浏览器的 DOM 的粗糙实现。 2、HTML实体 可以插入到JSX的文本中。如果JSx表达表达式中显示HTML实体，可以回遇到二次转义的问题。因为React默认会转义所有字符串，为了防止各种XSS攻击。 当：<div>First· Second</div>时候会： // 错误: 会显示 “First · Second” <div>{'First · Second'}</div> 有多种绕过的方法。最简单的是直接用 Unicode 字符。这时要确保文件是 UTF-8 编码且网页也指定为 UTF-8 编码。 <div>{'First · Second'}</div> 安全的做法是先找到 实体的 Unicode 编号 ，然后在 JavaScript 字符串里使用： <div>{'First \u00b7 Second'}</div> <div>{'First ' + String.fromCharCode(183)+ ' Second'}</div> 可以在数组里混合使用字符串和 JSX 元素： <div>{['First ', <span>·</span>, ' Second']}
万万不得已时候使用原始的HTML。
3、自定义HTML属性
如果向原生HTML元素里传入HTML规范里不存在的属性，React不会显示它们。如果需要使用自定义属性，要加data-前缀。
<div data-custom-attribute="foo"/>
以 aria- 开头的 [网络无障碍] 属性可以正常使用。
<div aria-hidden={true}/>