一、简介
JSX 是 Javascript 与 XML的结合。利用虚拟DOM来减少对实际DOM操作，从而提升性能。简单的说，在javascript中插入HTML标签，从而使代码更加简洁、易读、减少BUG机率。
我JS的水平仅限使用 jQuery 操作DOM，但JSX非常简单，抓住下面几个特点就能上手试用。
二、JSX与JS、HTML的异同
HTML举例：
<ul class=”my-list”>
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
JS举例：
var child1 = React.createElement(‘li’, null, ‘First Text Content’);
var child2 = React.createElement(‘li’, null, ‘Second Text Content’);
var root = React.createElement(‘ul’, { className: ‘my-list’ }, child1, child2);
JSX举例：
var root =(
<ul className=”my-list”>
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
);
因为class、for 等是 javascript 关键字，要用 className、htmlFor 代替。
三、特点
（1）解析方式
- 在解析时，遇到 < 符号，JSX就当HTML解析
- <h3>输入</h3>
- 转换成：React.createElement(“h3″,null,”输入”)
- 返回一个 ReactElement 对象
- 在解析时，遇到 { ，JSX就当Javascript 解析。
- var msg=”我是ABC”;
- <h1>{msg}</h1>
- 转换成：React.createElement(“h1”,null,msg)
（2）ReactJS 自定义标签
- HTML标签，首字母小写
- 自定义标签，首字母大写。比如：
- var ShowEditor=React.createClass({ … });
- React.render(<ShowEditor />,document.getElementById(‘example’))
（3）使用ES6的语法
- var props={}; props.foo=”1″; props.bar=”1″;
- <h1 {…props} foo=”2″ >欢迎</h1>
- 转换成：React.createElement(“h1″,React.__spread({},props,{foo:”2″}),”欢迎”)
（4）自定义标签属性（凡是以 data- 开头的自定义属性，可渲染到页面）
- <h1 data-test=”A” test=”B”>欢迎</h1>
- 网页显示结果：<h1 data-test=”A”>欢迎</h1>
- 用途就比较多了，可以传递参数、作为注释、作为jQuery筛选条件等
（5）_html: 为前缀的字符串，只显示HTML内容，不显示DOM节点。比如：
- alert(“<strong>重要</strong>”)
- 显示结果是：<strong>重要</strong>
- alert(“_html:‘<strong>重要</strong>'”)
（6）style样式使用
- 用双括号包裹 {{ }}
- 外层{}按照JSX语法，比如：
- var myStyle = {
color: ‘#ff0000′,
fontSize: ’14px’
};
- <h1 style={myStyle}>你好</h1>
- 内层{}是JavaScript对象，比如：
- <h1 style={{fontSize:’18px’,color:’#f60′}}>你好</h1>
- css用横线连接的属性，转为驼峰方式连接
- 多属性赋值方式用JSON格式
（7）事件绑定，用onClick 调用bind方法（设定作用域，要传递的参数）
（8）数组递归
- 数组循环,数组的每个元素都返回一个React组件。比如：
- var lis = this.todoList.todos.map(function (todo) { … }
- var ul = (
<ul>
{lis}
</ul>
);
在我看来JSX更年轻、简洁、优雅、可读，学习这款语言的思想，可以使代码思维的边界明显扩展。
但过于灵活的混杂自然洐生出杂乱和随意，另外技术的高速发展让新人无所适从，比如ES4、5、6写法有很大的不同，相信还需要时间来沉淀和检验。
最后在学习的过程中了解到 Vue + week （阿里前端）也在做同样的事，不过市场占有率太低，不在对口公司工作，很难有机会深入使用，人材、资源、技术升级都是风险，不太看好。
一、滑雪好不好玩？
