React:JSX

React的一个特色/核心机制是通过创建虚拟DOM，减少对实际DOM的操作，从而提高页面性能。

JSX其实是把XML语法加入到JS中，我们可以用JSX来构建界面，然后JSX由转换器转换成纯JS，在浏览器中执行。在React的文档中，很直接地告诉我们JSX只是JS的一个语法拓展而已。

1.基础语法：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

ReactDOM.render是核心的渲染方法：，其传入俩参数，第一个是构建的模板，第二个是挂载的DOM节点。

2.JSX Object

const element = <h1>Hello, world!</h1>;

上面定义的element既不是string也不是html，而是JSX语法创建的一个UI模板，也是一个React实例--React element。在React中我们会用它来渲染DOM结构。

当我们用typeof操作符将它console.log时，输出是一个“object”。

3.插入表达式：

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX和其他模板语法一样，可以在其中插入JS表达式，用一个大括号括起。

4.JSX本身也可以作为函数返回的表达式

  由于JSX在编译后变成JS对象，因此在源代码中我们可直接将JSX作为函数的输出插入到UI模板中。

5.JSX插入标签特性

如果要在HTML标签中插入表达式，使用{}，用引号的话只会把值作为字符串处理。

5.多行模板

如果JSX构建的模板想隔行，要用小括号括起：

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

如果标签中没有子元素，记得要加闭合标签。

6.特性名称要用驼峰写法：

文档强调，ReactDOM中特性名称要用驼峰写法，如className取代class，tagIndex取代tagindex，因为JSX毕竟是JS而不是纯html。

7.JSX可以防止恶意注入

JSX在渲染之前都会对插入的值进行escape（字符串编码），所有插入值都转换为字符串。

8.React.createElement()方法：

在创建React模板时，除了像上面那样写html，还可以调用等价的React.createElement()。

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

其产生的是如下的React element对象：

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

React使用这些对象来构建浏览器的DOM。