1.使用JS创建虚拟DOM(这种方式开发中绝对不会使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.使用js创建虚拟DOM</title>
</head>
<body>

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

    </div>

    <!-- 本地资源 -->
    <!-- 引入React核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入React-dom,用于支持react操作DOM -->
    <script src="../js/react-dom.development.js"></script>

    <script type="text/javascript">/** 此处一定要写type="text/babel **/
        //1.创建虚拟DOM
        const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'));// 1.标签名  2.标签属性  3.标签内容
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"));// 参数1:虚拟DOM  参数2:容器
    </script>
</body>
</html>

2.使用JSX创建虚拟DOM(开发中使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.使用jsx创建虚拟DOM</title>
</head>
<body>

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

    </div>

    <!-- 本地资源 -->
    <!-- 引入React核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入React-dom,用于支持react操作DOM -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将JSX转化为JS -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">/** 此处一定要写type="text/babel **/
        //1.创建虚拟DOM
        const VDOM = (
            <h1 id="title">
                <span>Hello,React</span>
            </h1>
        ); /* 此处一定不要写引号,因为不是字符串 */
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"));// 参数1:虚拟DOM  参数2:容器
    </script>
</body>
</html>

3.这两种写法在浏览器中都显示同样的效果,但是第二种方式要比第一种方式更加的简单

最后修改:2021 年 06 月 11 日 10 : 02 AM