react 基础篇 2 创建虚拟DOM的方式_react.createelement-优快云博客

本文链接：https://blog.youkuaiyun.com/hu1628299958/article/details/117093571

本文详细介绍了React中创建虚拟DOM的两种方式：jsx和React.createElement。jsx通过类似HTML的语法创建虚拟DOM，而React.createElement则是纯JavaScript实现。这两种方法都是React渲染UI的关键，确保了高效更新DOM并优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react 基础篇 2 创建虚拟DOM的方式

方法一 jsx

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用jsx创建虚拟DOM</title>
</head>
<body>
	<div id="app"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

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

</body>
</html>

方法二 js React.createElement

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用js创建虚拟DOM</title>
</head>
<body>

	<div id="app"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>

	<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('app'))
	</script>
</body>
</html>