03真实DOM与虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
<script type="text/babel">
    const VDOM =(
        <h1 id="title">
            <span> Hello,React</span>
        </h1>
    )
    ReactDOM.render(VDOM,test)
    console.log(VDOM);
    console.log(document.querySelector("#test"));
    /*
    * 关于虚拟DOM:
    * 1,本质是object类型的对象(一般对象)
    * 2,虚拟DOM比较'轻'(上面的属性比较少,他只是react内部再用,无需真实的DOM),真实DOM上的属性比较多
    * 3,虚拟DOM最终会被react转化成真实DOM,呈现在页面上
    *
    * */
</script>

posted @ 2022-07-06 10:06 大宁0615 阅读(37) 评论(0) 收藏举报

刷新页面返回顶部