react创建虚拟Dom的两种方法

原创已于 2022-05-19 11:31:23 修改 · 510 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-05-19 11:17:56 首次发布

react 专栏收录该内容

2 篇文章

订阅专栏

本文对比介绍两种创建虚拟DOM的方法，深入解析虚拟DOM的工作原理，强调其在React中的核心作用，以及它如何转化为真实DOM。

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

方法一：

<script type="text/babel">
	// const VDOM = <h1 id="test"> react </h1>
	const VDOM = (
		<h1 id="test">
			<span> react </span>
		</h1>
	)
	//渲染虚拟dom
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

方法二

<script type="text/JavaScript">
	const VDOM = React.creactElement(‘h1’,{id:'title'},'react') //(标签名，标签属性，标签内容
	//渲染虚拟dom
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

方法本质：方法一是方法二的语法糖
关于虚拟Dom：
1，本质是Object类型的对象（一般对象）
2，虚拟Dom轻量，react内部使用，无需挂载原生Dom的全部属性
3，虚拟Dom最终会被React转化为真实DOM，渲染在页面上