React学习day01--虚拟DOM的两种创建方式_create-react-dom-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51938803/article/details/138139965

一、使用js的方式创建虚拟DOM

使用js这种创建虚拟DOM的方式相对jsx来说是繁琐的，如果标签是深层次嵌套，那么书写非常耗时且麻烦。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="/react-development.js"></script>
   <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="/react-dom-development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="/babel.min.js"></script>
    <script type="text/javascript">
        // 1.创建虚拟DOM
        const vDOM = React.createElement('h1',{id: 'title'},React.createElement('span'，{},'hello,world'))
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(vDOM,document.getElementById('test'))
    </script>
</body>

</html>

二、使用jsx的方式创建虚拟DOM

使用jsx的方式创建虚拟DOM，就像写HTML标签一样方便且有层次感，可以说jsx是js这种方式写法的语法糖，react内部编译也是通过js的方式创建，然后将虚拟DOM渲染到页面；不过react帮我们做了复杂的转换，我们无需关心。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="/react-development.js"></script>
   <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="/react-dom-development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="/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'))
    </script>
</body>

</html>