React之JSX

---

什么是JSX

React的核心机制之一就是虚拟DOM：可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。当然，虚拟DOM也可以通过JavaScript来创建，例如：

var child1 = React.createElement('li', null, 'First');
var child2 = React.createElement('li', null, 'Second');

createElement语法：

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)
创建并返回一个新的指定类型的ReactElement。type  参数可以是一个html标签名字符串（如："div","span"等），或者是ReactClass(通过React.createClass 创建的)。

使用这样的机制，我们完全可以用JavaScript构建完整的界面DOM树，正如我们可以用JavaScript创建真实DOM。但是，这样的代码可读性差，于是React发明了JSX, 利用我们熟悉的HTML语法来创建虚拟的DOM:

var root = (
  <ul>
    <li>First</li>
    <li>Secont</li>
  </ul>
);

这两段代码是完全等价的，后者将XML语法直接加入到JavaScript代码中，让你能够高效的通过代码而不是模板来定义界面。之后JSX通过翻译器转换到纯JavaScript再由浏览器执行。
因此，JSX本身并不是什么高深的技术，可以说只是一个比较高级但很直观的语法糖。它非常有用，却不是一个必需品，没有JSX的React也可以正常工作：只要你乐意用JavaScript代码去创建这些虚拟DOM元素。

JSX语法

基本规则：遇到HTML标签（以< 开头），就用HTML规则解析；遇到代码块（以{ 开头），就用JavaScript规则解析。
例如：

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render( 
  <div> 
  { 
    names.map(function (name) {
     return <div>Hello, {name}!</div> 
    }) 
  } 
  </div>,
 document.getElementById('example'));

输出结果:

Hello, Alice!
Hello, Emily!
Hello, Kate!

小语法总结：

• JSX中 使用js表达式，表达式写在{}：

ReactDOM.render(
  <div>{1 + 1}</div>,
  document.getElementById('example')
);

• JSX中 不能使用if else语句， 但可以使用三元运算表达式来替代。

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

• JSX中注释需要写在花括号中

ReactDOM.render(
  <div>{/*注释*/}</div>，
  document.getElementById('example')
);

• JSX中遇到数组，数组会自动展开所以成员

var arr = [<h1>Alice</h1>, <h2>Emily</h2>];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);