React创建虚拟DOM的两种方式

1、使用jsx创建虚拟DOM


<body>
    <!-- 准备一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库，需要在react-dom文件之前引入 -->
    <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"> /*此处一定要写babel，如果不写浏览器就会默认认为是js语法，写babel表示通过babel把jsx转化为js*/
        // 1、创建虚拟DOM
        const VDOM = <h1 id="title">Hello,React</h1> /*此处一定不写引号，因为不是字符串*/
        // 2、渲染虚拟DOM到页面 render(虚拟DOM,容器)
        ReactDOM.render(VDOM, document.getElementById('test'));
    </script>
</body>

2、使用js创建虚拟DOM

缺点：元素一多，写起来繁琐

<body>
    <!-- 准备一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库，需要在react-dom文件之前引入 -->
    <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> 
    <script type="text/javascript">
        // 1、创建虚拟DOM
        const VDOM = React.createElement('h1',{id:'title',className:'h1'},'hello react') //React.createElement(标签名,标签属性,标签体内容)
        // 2、渲染虚拟DOM到页面 render(虚拟DOM,容器)
        ReactDOM.render(VDOM, document.getElementById('test'));
    </script>
</body>
posted @ 2022-09-26 17:25  小啊柒  阅读(259)  评论(0)    收藏  举报