React 学习笔记（3）：虚拟 DOM 的两种创建方式

方式一：使用 jsx 创建。

<script type="text/babel" > /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
		<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

方式二：使用 react 提供的 api 创建。

<script type="text/javascript" > 
	//1.创建虚拟DOM
	const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

个人总结：

• jsx 是 react api 的语法糖，我们所写的 jsx 代码会被编译成 react api 的调用形式。
• react api 是底层的语法，写起来很麻烦，在平时的业务开发中，使用 jsx 进行代码编写。