从零开始学习React——(四)：React中使用JSX语法

上一节其实已经涉及到了一些JSX语法，看起来和HTML标签几乎一样。本节将简单的介绍React中JSX的使用。

1. JSX简介

JSX 是 JavaScript 和 XML 结合的一种格式。由 React 发明。它的作用是方便利用 HTML 语法来创建虚拟DOM，当遇到<，JSX就当做HTML解析，遇到{就当JavaScript解析。另一方面在React中可以简化代码。

下面是一段简单的JSX语法。

<ul className = 'list'>
	<li>text1</li>
	<li>text2</li>
</ul>

上述代码用React写法如下：

var child1 = React.createElement('li', null, 'text1')
var child2 = React.createElement('li', null, 'text2')
var root = React.createElement('ul', { className: 'list' }, child1, child2)

由此可见。JSX省略了大量代码。并且更加易读。不管是大牛还是初学者都很友好。
关于JSX的更多信息，可以查看JSX官方文档

1.1 组件和普通JSX语法的区别

自定义组件的首字母必须大写，而JSX是小写字母开头的。
例如：

• 组件： <App /> 或者 <App></App>
• JSX语法：<span>我是Jsx语法</span>

1.2 JSX中使用JavaScript语法

JSX中也可以使用JavaScript语法，比如下面的三元运算符

	import React, { Component } from 'react'
	class App extends Component {
		render() {
			return (
				<ul className = 'list'>
					<li>{true ? '我是真' : '我是假'}</li>
					<li>text2</li>
				</ul>
			)
		}
	}
	export default App

2. 虚拟DOM

虚拟DOM不是真实的DOM节点，而是虚拟化的。它可以快速反应，不占用页面的渲染机制。