react的JSX语法

一.理解JSX
1.什么是JSX
React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。类似于真实的原生DOM，虚拟DOM也可以通过JavaScript来创建，例如：

var child1 = React.createElement('li', null, 'First Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

这种机制创建虚拟DOM可读性不好，于是React发明了JSX，在JS中引入HTML语法来创建虚拟DOM，

var root =(
  <ul className="my-list">
    <li>First Text Content</li>
    <li>Second Text Content</li>
  </ul>
);

在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响。

2.为什么使用JSX，优点？
前端界面的最基本功能在于展现数据，为此大多数框架都使用了模板引擎，模板可以直观的定义UI来展现Model中的数据，每个框架都有自己的模板语言语法。而这无疑增加了框架的门槛和复杂度。react直接放弃了模板而发明了JSX。看上去很像模板语言，但其本质是通过代码来构建界面，这使得我们不再需要掌握一门新的语言就可以直观的去定义用户界面：掌握了JavaScript就已经掌握了JSX。

3.JSX的语法
JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式，例如：

var person = <Person name={window.isLoggedIn ? window.name : ''} />;

一般每个组件都定义了一组属性（props，properties的简写）接收输入参数，这些属性通过XML标记的属性来指定。上述代码经过JSX编译后会得到：

var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

对于子元素也是类似，大括号中使用JavaScript表达式来返回需要展现的元素：

var node = (
  <div className="container">
    {
       person ? <span>Welcome back, <b>{person.firstName} {person.lastName}</b>!</span>
       : <span>Please log in</span>
    }
  </div>
);

4.在JSX中使用事件

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。在JSX中你不需要关心什么时机去移除事件绑定，因为React会在对应的真实DOM节点移除时就自动解除了事件绑定。
React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。
尽管整个事件系统由React管理，但是其API和使用方法与原生事件一致。这种机制确保了跨浏览器的一致性：在所有浏览器（IE8及以上）都可以使用符合W3C标准的API，包括stopPropagation()，preventDefault()等等。对于事件的冒泡（bubble）和捕获（capture）模式也都完全支持。

5.在JSX中使用样式
在JSX中使用样式和真实的样式也很类似，通过style属性来定义，但和真实DOM不同的是，属性值不能是字符串而必须为对象，例如：

<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>

乍一看，这段JSX中的大括号是双的，有点奇怪，但实际上里面的大括号只是标准的JavaScript对象表达式，外面的大括号是JSX的语法。所以，样式你也可以先赋值给一个变量，然后传进去，代码会更易读：

var style = {
  color: '#ff0000',
  fontSize: '14px'
};

var node = <div style={style}>HelloWorld.</div>;

6.使用自定义组件
在JSX中，我们不仅可以使用React自带div, input…这些虚拟DOM元素，还可以自定义组件。组件定义之后，也都可以利用XML语法去声明，而能够使用的XML Tag就是在当前JavaScript上下文的变量名，这一点非常好用，你不必再去考虑某个Tag是如何对应到相应的组件实现。例如React官方教程中的例子：

class HelloWorld extends React.Component{
  render() {
    return (
      <p>
        Hello, <input type="text" placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
};

setInterval(function() {
  React.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('example')
  );
}, 500);

7.使用Babel进行JSX编译
使用Babel进行JSX编译，只需稍微改变一下webpack.config.js的配置;

module: {
  loaders: [
    { test: /\.jsx?$/, loaders: ['babel-loader']}
  ]
}

8.总结
JSX背后的原理非常简单：只是一种用于创建组件的XML语法。让代码直观易懂是软件项目质量的重要保证之一，这意味着代码更加容易理解和维护，出现Bug时更容易调试和修复。因此React这种采用JSX语法，以声明式的方法来直观的定义用户界面的方式，正是其最大的价值。