学习react个人笔记 -- 创建虚拟DOM的两种方式

最新推荐文章于 2024-08-26 21:48:51 发布

奇葩之小王子

最新推荐文章于 2024-08-26 21:48:51 发布

阅读量121

点赞数

本文链接：https://blog.csdn.net/qq_52138438/article/details/115252900

版权

关键词由CSDN通过智能技术生成

在React中有两种方式创建虚拟DOM：

萌新作者在线卑微记录自己学习React的历程

代码及笔记来自尚硅谷学习视频

1.使用jsx创建虚拟DOM(也是最常用的方法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_使用jsx创建虚拟DOM</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <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
    // 1.创建虚拟DOM
    const VDOM = (//此处一定不要写引号，因为不是字符串
        <h1 id="title">
            <span> Hello,React</span>
        </h1>
    ) 
    // 2.渲染虚拟DOM到页面
    //ReactDOM.render(虚拟DOM,容器)
    ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

</body>
</html>

2.用js创建虚拟DOM（如果要嵌套很多层标签,会非常麻烦,所以我们一般不使用这种方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.使用js创建虚拟DOM</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <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" >
    //   此处一定要写javascript
    // 1.创建虚拟DOM
    //const VDOM = React.createElement(标签名,标签属性,标签内容)
    const VDOM = React.createElement('h1',{id:'title'}, React.createElement('span',{},'Hello,React'))
    // 2.渲染虚拟DOM到页面
    //ReactDOM.render(虚拟DOM,容器)
    ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

</body>
</html>

奇葩之小王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习react个人笔记 -- 创建虚拟DOM的两种方式

在React中有两种方式创建虚拟DOM：萌新作者在线卑微记录自己学习React的历程代码及笔记来自尚硅谷学习视频1.使用jsx创建虚拟DOM(也是最常用的方法)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
复制链接

扫一扫