React中的虚拟DOM与真实DOM
首先先展示一段代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>03 虚拟DOM与真实DOM</title> </head> <body> <!-- 准备好一个容器 --> <div id="test"></div> <div id="demo"></div> <!-- 引入react核心库 --> <script src="../js/react.development.js"></script> <!-- 引入react-dom 用于支持react操作DOM--> <script src="../js/react-dom.development.js"></script> <!-- 引入babel 用于将JSX 转换为 JS --> <script src="../js/babel.min.js"></script> <script type="text/babel"> /* 此处一定要写babel */ // 第一步 创建虚拟DOM var VDOM = ( /* 此处一定不要写引号 */ <h1 id="title"> <span>HELLO React</span> </h1> ) // 第二步 渲染虚拟DOM到页面 ReactDOM.render(VDOM, document.getElementById("test")); const TDOM = document.getElementById('demo') console.log('虚拟DOM',VDOM); console.log('真实DOM',TDOM); debugger; </script> </body> </html>
上述代码中的输出内容如下：
总结：
关于虚拟DOM
1. 本质是Object类型的对象（一般对象） 2. 虚拟DOM比较“轻”，真实DOM比较“重”，原因是虚拟DOM是React内部在用，无需真实DOM上那么多的属性。 3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
