reactjs虚拟DOM与真实DOM

阳光穿透心脏的1/2处 2023-10-02 18:06 16阅读 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>