react | react中的虚拟dom和真实dom对比

2年前 (2022) 程序员胖胖胖虎阿
133 0 0

编写一下代码来看一下两者的异同:

<body>
    <div id="demo"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>

    <script type="text/babel">
        // 创建一个虚拟dom
        const VDOM =(
            <h1 id="title">
              <span>Hello,React</span>  
            </h1>
            )
        // 获取真实dom
        const TDOM= document.getElementById('demo');
        
        console.log(typeof VDOM);
        console.log(typeof TDOM);
        console.log((typeof VDOM) === (typeof TDOM));

        console.log(`虚拟DOM:`,VDOM);
        console.log(`真实DOM:`, TDOM);
        debugger
            
        
    </script>
</body>

输出:
react | react中的虚拟dom和真实dom对比
可以看出虚拟DOM和真实DOM一样本质是Object类型对象

两者具体结构:
react | react中的虚拟dom和真实dom对比
react | react中的虚拟dom和真实dom对比
显然真实DOM比虚拟DOM身上多很多东西,这是因为虚拟DOM是React内部使用,里面主要包含React需要的内容,而无关东西被去除。

版权声明:程序员胖胖胖虎阿 发表于 2022年11月22日 上午10:40。
转载请注明:react | react中的虚拟dom和真实dom对比 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...