关于react.js:react-react中的虚拟dom和真实dom对比

1次阅读

共计 733 个字符，预计需要花费 2 分钟才能阅读完成。

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

<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>

输入：

能够看出虚构 DOM 和实在 DOM 一样实质是 Object 类型对象

两者具体构造：

显然实在 DOM 比虚构 DOM 身上多很多货色，这是因为虚构 DOM 是 React 外部应用，外面次要蕴含 React 须要的内容，而无关货色被去除。

正文完