React学习（从零基础到精通）0010

最新推荐文章于 2023-03-10 12:17:33 发布

南才

最新推荐文章于 2023-03-10 12:17:33 发布

阅读量45

点赞数

分类专栏： react学习 react 文章标签： react

本文链接：https://blog.csdn.net/Heyuner/article/details/117840709

版权

react 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

react学习

25 篇文章 0 订阅

订阅专栏

虚拟DOM的两种创建方式

1. 使用jsx创建虚拟DOM

    <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"))
    </script>

2. 使用js创建虚拟DOM

    <script type="text/javascript">
        // 1。创建虚拟DOM
        const VDOM = React.createElement("h1",{id:"title"},React.createElement("span",{},"hello react"))
        //2。渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"))
    </script>

3. 虚拟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>3_虚拟DOM与真实DOM</title>
</head>
<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <div id="dom"></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">
        // 1。创建虚拟DOM
        const VDOM = (
            <h1 id="title">
                <span>hello,react</span>
            </h1>
        )
        //2。渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"))
        const TDOM = document.getElementById("dom")
        console.log("真实DOM",TDOM);
        debugger;
        console.log("虚拟DOM",VDOM);
        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>