React（四）：虚拟DOM创建的两种方式

1.使用js创建虚拟DOM（不推荐使用）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>js创建虚拟DOM</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

</head>

<body>
    <!-- 准备一个容器 -->
    <div id="test"></div>
</body>

<script type="text/javascript">

// 使用js创建虚拟DOM
const vDom = React.createElement('h1',{title:'hello'},React.createElement('span', {}, 'Hello,React'))
//react渲染
ReactDOM.render(vDom, document.getElementById("test"))
</script>

</html>

2.使用jsx创建虚拟DOM

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jsx创建虚拟DOM</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="test"></div>
</body>

<script type="text/babel">

    // 使用jsx创建虚拟DOM
    // babel会帮我们将jsx转化为js形式的DOM创建，本质上没有变化，实际上就是jsx简化了我们的编写
    const vDom = (
        <h1>
            <span>Hello,React</span>
        </h1>
    )
    //react渲染
    ReactDOM.render(vDom, document.getElementById("test"))
</script>

</html>

3.虚拟DOM与真实DOM

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jsx创建虚拟DOM</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="test"></div>

    <!-- 真实DOM -->
    <h1 id="trueDom">
        <span>Hello,React</span>
    </h1>
</body>

<script type="text/babel">

    // 使用jsx创建虚拟DOM
    const vDom = (
        <h1>
            <span>Hello,React</span>
        </h1>
    )
    //react渲染
    ReactDOM.render(vDom, document.getElementById("test"))

    // 拿到真实DOM
    const tDom = document.getElementById("trueDom")
    debugger;
    console.log("虚拟DOM",vDom)
    console.log("真实DOM",tDom)

    // 关于虚拟DOM
    // 1.虚拟DOM本质上是一个Object对象
    // 2.虚拟DOM相较于真实DOM拥有的属性较少，是React内部使用的
    // 3.虚拟DOM会被React转化为真实的DOM展示在页面上
</script>

</html>

 

posted @ 2023-07-30 13:46  谁知道水烫不烫  阅读(50)  评论(0)  编辑  收藏  举报