2. react 虚拟DOM

Wu hello world！

于 2020-09-16 16:34:24 发布

阅读量139

点赞数

分类专栏： DOM

本文链接：https://blog.youkuaiyun.com/weixin_47733115/article/details/108625023

版权

DOM 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了虚拟DOM的概念，对比了其与浏览器DOM的区别，解释了为何要实现虚拟DOM，并通过示例展示了虚拟DOM的结构。虚拟DOM是用JS对象表示的UI元素，由程序员手动实现，不同于浏览器提供的DOM。

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

虚拟DOM（Virtual Document Object Model）

DOM的本质是什么？就是用js表示的ui元素
DOM和虚拟DOM的区别：
1· DOM是由浏览器中的js提供功能，所以我们只能人为的使用浏览器提供的固定的API来操作DOM对象
2· 虚拟DOM：并不是由浏览器提供的，而是我们程序猿手动模拟实现的，类似于浏览器中的DOM，但是有着本质的区别
为什么要实现虚拟DOM？
什么是React中的虚拟DOM：就是用对象的方式将DOM树虚拟出来
下面展示一些 内联代码片。

var oldobj = {
		id:'box',
		title:'123',
		<p></p>,
		text:'asdasdasd'
		children:{
			<a></a>,
			id:'box1'
		}
	}
	var newobj = {
		id:'box',
		title:'123',
		<p></p>,
		text:'432423'
		children:{
			<a></a>,
			id:'box1',
			children:{
				<span></span>,
				id:'box2'
			}
		}
	}