React 虚拟DOM两种创建方式

1. 使用js创建虚拟DOM

<div id="test"></div>
<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>

创建后的效果：

2. 使用jsx语法创建虚拟DOM

<div id="test"></div>
<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>

创建后的效果：

jsx语法规则：

1. 定义虚拟DOM时，不要写引号。

2. 标签中混入JS表达式时要用{}。

3. 样式的类名指定用className。

4. 内联样式，用style={{key:value}}的形式去写，驼峰命名。

5. 只有一个根标签。

6. 标签必须闭合（单标签加/自闭和）。

7. 标签首字母

   • 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
   • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

8. 它最终产生的就是一个JS对象