您的当前位置：首页正文

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 进行代码编写。

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文