reactjs虚拟DOM与真实DOM

阳光穿透心脏的1/2处 2023-10-02 18:06 114阅读 0赞

> 关于虚拟DOM：  
> 1.本质是Object类型的对象（一般对象）  
> 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。  
> 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>3_虚拟DOM与真实DOM</title>
    </head>
    <body>
    	
    	<div id="test"></div>
    	<div id="demo"></div>
    
    	
    	<script type="text/javascript" src="../js/react.development.js"></script>
    	
    	<script type="text/javascript" src="../js/react-dom.development.js"></script>
    	
    	<script type="text/javascript" src="../js/babel.min.js"></script>
    
    	<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'))
    
    		const TDOM = document.getElementById('demo')
    		console.log('虚拟DOM',VDOM);
    		console.log('真实DOM',TDOM);
    		debugger;
    		// console.log(typeof VDOM);
    		// console.log(VDOM instanceof Object);
    		/* 
    				关于虚拟DOM：
    					1.本质是Object类型的对象（一般对象）
    					2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
    					3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
    		 */
    	</script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，114人围观）

还没有评论，来说两句吧...

相关阅读

相关笔记一、怎么理解虚拟DOM和真实DOM？

怎么理解虚拟DOM和真实DOM

港控/mmm°/ 2024年05月01日 16:22/ 0 赞/ 164 阅读

相关虚拟DOM

Virtual DOM 算是React，Vue最核心的算法之一吧，避免了频繁的操作DOM树，让前端项目更快了。代码：https://github.com/justwo...

痛定思痛。/ 2024年04月17日 06:30/ 0 赞/ 161 阅读

相关 reactjs虚拟DOM与真实DOM

> 关于虚拟DOM： > 1.本质是Object类型的对象（一般对象） > 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实

阳光穿透心脏的1/2处/ 2023年10月02日 18:06/ 0 赞/ 115 阅读

相关 reactjs创建虚拟DOM的两种方式：使用jsx和js创建虚拟DOM

1\_使用jsx创建虚拟DOM <!DOCTYPE html> <html lang="en"> <head> <meta charse

谁借莪１个温暖的怀抱￠/ 2023年10月02日 18:06/ 0 赞/ 122 阅读

相关 3 Reactjs ref 和 DOM

在常规的 React 数据流中，[props][] 是父组件与子组件交互的唯一方式。要修改子元素，你需要用新的 props 去重新渲染子元素。然而，在少数情况下，你需要在常规数

男娘i/ 2023年02月27日 12:05/ 0 赞/ 24 阅读

相关增量 DOM 与虚拟 DOM 的对比使用

![format_png][] 如果你熟悉 React，你大概听说过虚拟 DOM 的概念。React 受欢迎的主要原因之一就是通过虚拟 DOM 提高用户界面性能。然

朴灿烈づ我的快乐病毒、/ 2023年01月06日 15:59/ 0 赞/ 166 阅读

相关虚拟DOM

真实DOM解析流程浏览器渲染的过程主要包括以下五步： 1. 浏览器获取到 HTML 文档并解析 DOM 树 2. 解析 CSS 构建层叠样式表模型CSSOM(CSS

川长思鸟来/ 2022年11月29日 05:58/ 0 赞/ 537 阅读

相关 reactjs 获取真实dom，并获取dom css 三种方法

方法1： let senderName = ReactDOM.findDOMNode(this.refs['sender-name']); let n

爱被打了一巴掌/ 2022年06月17日 03:47/ 0 赞/ 496 阅读

相关虚拟DOM

虚拟DOM是为了解决DOM操作过多而导致性能低的问题而诞生的，虚拟DOM诞生之前，操作DOM的是直接操作的，改一次渲染一次，而虚拟DOM就是用js模拟一颗DOM树，每次修改DO

一时失言乱红尘/ 2022年05月14日 15:10/ 0 赞/ 399 阅读

相关虚拟DOM

用JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行

痛定思痛。/ 2022年01月10日 04:59/ 0 赞/ 389 阅读