React JSX(JavaScript XML)语法简介

React是使用JSX来代替常规的JavaScript；JSX看起来是一个很像XML的JavaScript语法拓展；我们不需要一定使用JSX但它有以下优点：JSX执行更快，因为在编译为JavaScript代码后进行了优化；他是类型安全的，在编译过程中就能发现错误；使用JSX编写模块更加简单快速。React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。

JSX是一种类似XML的标签语法，用来简化代码，我们可以不使用JSX，但了解并使用也没什么坏处：）

在React中，JSX是一个使用 React.createElement() API的快捷方式，代码看起来更象一个UI组件。每个标签，比如 <View />, 被转换成一个 React.createElement() 调用。而其中包含的attributes则成为实例化组件对象的props。属性（Attributes）可以是字符串比如 foo='hello'，或者使用大括号包含起来的内嵌JS表达式，比如 bar={baz}，baz将引用变量baz。

标签可以是自闭合的，比如 <View />，或者使用一个开始和关闭标签，如 <View></View>。要包含子元素，得使用开始和关闭标签，这样才能把子元素放进去。

JSX代码示例如下：

const a = <View />

const b = (

<View

foo='hello'

bar={baz}>

<Text>42</Text>

</View>

)

使用Babel编译后的JS代码如下：

var a = React.createElement(View, null);

var b = React.createElement(

View,

{

foo: 'hello',

bar: baz },

React.createElement(

Text,

null,

'42'

)

);

还有更多的关于JSX相关的语法，如下：

• 数组递归

• 三元表达式

• 事件绑定

• 使用样式

• HTML转义

以后会有专门文章来讲解，敬请关注。