react-dom

最新推荐文章于 2024-04-30 16:59:06 发布

鲤忆

最新推荐文章于 2024-04-30 16:59:06 发布

阅读量78

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_62487693/article/details/129756875

版权

react 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

# react-dom

## 开始

- 1：为什么要学习react-dom

- 2: 如何使用-react-dom

> 与react相比较，react-dom优势是什么，推广jsx语法

### code

~~~html

</div>

<!--

用户编译 jsx 语法。变为js语法

注意：这样写在浏览器中进行编译，在运行

当代码量过大是后，页面运行会迟钝，我们一般会在本地编译，然后运行编译后的js

-->

// 1:创建虚拟dom

// React.createElement(TagetNmae,attrObjdect,child) 作用：创建虚拟dom

// 写法痛点：

// let Vnode = React.createElement('h1',{id:'title'},React.createElement('span',{},'hell word'),React.createElement('span',{},'123'));

// 解决方式: jsx 语法

let Vnode = (

<h1>

<span>hellow word</span>

</h1>

)

// 2:将虚拟dom渲染到页面上

ReactDOM.render(Vnode,document.getElementById('app'));

~~~



<body>
    <div id="app">
        <!-- <h1>
            <span>hellow word</span>
            <span>123</span>
        </h1> -->
     
    </div>
    <script src="./assets/react16.4.js"></script>
    <script src="./assets/react-dom.js"></script>
    <!-- 
        编译 jsx 的语法
        因为默认情况下，浏览器不能识别jsx语法
        注意：大量的jsx不能用这种方式解决，用脚手架工程化方式
     -->
    <script src="./assets/babel.min.js"></script>
    <script type="text/babel">
        // 1创建虚拟dom
        let Vnode = (
             <h1>
                 <span>hellow word</span>
                 <span>123</span>
             </h1>
        )
      // 2:渲染虚拟dom
      ReactDOM.render(Vnode,document.getElementById('app'));

    </script>
</body>

<!-- 变为虚拟dom -->
   <!-- <div>
            <h1>hellow  word</h1>
            <main>
                <header>header</header>
                <footer>FOOTER</footer>
            </main>
        </div> -->
</html>

鲤忆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react-dom

/ React.createElement(TagetNmae,attrObjdect,child) 作用：创建虚拟dom。当代码量过大是后，页面运行会迟钝，我们一般会在本地编译，然后运行编译后的js。> 与react相比较，react-dom优势是什么，推广jsx语法。-- 设置app 为react 项目的根元素 -->-- react 的核心库 -->// 解决方式: jsx 语法。- 1：为什么要学习react-dom。- 2: 如何使用-react-dom。-- js语法 -->
复制链接

扫一扫