理解JSX
在很长一段时间里，前端都是用HTML代表内容，CSS代表样式，JS代表逻辑，三种语言分在三种文件里来组成页面。看起来是分而治之，实际上是把同一件事拆开了，不符合组件高内聚的设计原则。自从组件化出现后，一个文件里应该做同一件事的思想逐渐流行起来，这也是react的核心之一。样式，内容，逻辑都由JS构成并集中管理，实现真正的组件封装。那么如何通过JS去构造HTML内容，就是今天讨论的主题——JSX。
为什么要使用JSX
既然react需要利用JS去创建HTML，我们知道HTML实际上就是由DOM节点组成的DOM树渲染而成的，而在原生JS中创建节点并不是很方便，所以react对其进行了一层封装使我们能够快捷的创建DOM节点。也就是react创建element的一个方法，用法如下：
const p = React.createElement('p', null, 'Hello world!');
//v <p>Hello world!</p>
相比原生JS来说确实清晰了许多，但还是不够直观。于是引出JSX的概念，通过类XML的语法去创建DOM元素。就可以写成这样：
const p = <p>Hello world!</p>
这里就基本等同于我们熟悉的HTML语法了。不过虽然看起来是像HTML，但实际上通过两次转译——JSX到React.createElement（通过babel编译)到原生JS，最终还是使用了JS语法创建DOM元素。所以我们可以完美利用JS自带的特性去完善JSX。
JSX语法
现在我们了解了JSX的本质目的就是为了使用基于类XML的方式，通过JS去创建DOM结构，那么语法规则自然也继承了这两者的特性，下面来分别介绍。
类XML规则
构建组件时和XML的基本规则一致。标签可以任意嵌套，但最外层有且只能有一个标签，并且习惯在最外层加上小括号。同时标签必须严格闭合，否则编译无法通过。
组件
JSX既然用在了组件化为核心的react中，那么不仅需要有渲染普通DOM的能力，渲染组件DOM的能力也必不可少。两者区别在于，渲染普通DOM，只需要使用小写字母的标签名，渲染组件则需要一个大写字母开头的本地变量。例子如下：
const p = <p>Hello world!</p>
// 普通DOM
const MyComponent = React.render(....);
const MyComponentRepeat = <MyComponent></MyComponent>
// 组件DOM
当然在渲染组件DOM前需要先通过react的方法先定义该组件。
属性
在JSX中给DOM赋予的属性既可以是字符串，也可以是JS表达式。字符串用引号包裹即可，JS表达式需要使用大括号包裹。
const element-string = <div tabIndex='0'></div>
const element-js = <img src={user.avatarUrl}></img>
需要注意赋予属性的写法和HTML存在区别，因为JSX本身是JS，所以所有属性都是在JS中的驼峰式原生DOM属性写法。这里也可以理解一些属性和HTML不同的特例产生原因了，例如class => className,for => htmlFor等。
JS表达式
除了在属性中使用JS表达式外，在HTML内容中同样可以使用，用大括号包裹即可，针对特殊值也有不同的表现。
布尔值和空值
虽然都是有效的子元素，不过不会被渲染而是直接忽略。
数组
自动展开所有成员。
事件
绑定方法和原生HTML相同，区别在于用驼峰写法描述事件名称。
const button = <button onClick={this.Submit.bind(this)}>Submit</button>
需要注意，虽然看起来和HTML的onclick相同，但实际上区别很大。我们知道在HTML中使用onclick应该尽量避免，原因如下：
- 事件处理函数全局执行，污染全局环境。
- 影响网页性能。
但在react的绑定中不存在这些问题，它并不会真正的将事件绑定在具体元素上，而是采用事件委托的模式在根节点为每种事件添加唯一的处理函数。所有事件都被该函数捕获并根据具体触发事件的组件触发特定的处理函数。这就是react的模拟事件系统。
小结
看似神秘的JSX原理其实很简单，只是JS创建DOM元素的二次包装。但正是这层包装让我们使用更加符合直觉的方式去定义界面，让代码更加便于理解和维护。这正是JSX的最大的价值。
-- EOF --