一、简介

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 （阿里前端）也在做同样的事，不过市场占有率太低，不在对口公司工作，很难有机会深入使用，人材、资源、技术升级都是风险，不太看好。