react学习-3.JSX语法原理

第02节的HelloWorld程序从本质上能完成所有的工作。只是有一些开发效率问题，比如JavaScript代码与标签混写在一起等。而使用JSX，则可以有效解决这些问题。

1.JSX定义

JSX即Javascript XML，它使用XML标记来创建虚拟DOM和声明组件。是一种 JavaScript 的语法扩展。乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。

2.重写HelloWorld

import React from 'react';
import ReactDOM from 'react-dom';
var element=<h1>Hello, world!</h1>;

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

我们来观察一下声明的这个变量：

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它就被称为 JSX。

3.JSX实现原理

我们想要在浏览器里直接运行采用 JSX 语法的 JavaScript 显然暂时是不可能实现的，在实际的生产过程中，我们需要利用 Babel 一类的转译器来将我们的 JSX 语法或者 ES6 语法转译成浏览器可以直接运行的 JavaScript，事实上 JSX 在经过转译之后，会变成 React 创建 Element 的一个方法。即第二节所写demo实际就是babel转换后的代码来宫浏览器识别。

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

//babel转换后

ReactDOM.render( 
  React.createElement('h1',null,`Hello world!`),
  document.getElementById('container')
 )

4.JSX好处

通过上边的demo你可以发现JSX的好处。

• 可以使用熟悉的语法仿照HTML来定义虚拟DOM。
• 程序代码更加直观。
• 与JavaScript之间等价转换，代码更加直观。
• 可以任意地在 JSX 当中使用 JavaScript 表达式,具体见下章。

下一篇——react学习-4.JSX语法进阶