React的基本特点——虚拟DOM

最新推荐文章于 2024-07-21 12:55:28 发布

_洋

最新推荐文章于 2024-07-21 12:55:28 发布

阅读量425

点赞数

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

本文链接：https://blog.csdn.net/mantou_riji/article/details/127204518

版权

React 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章目录

React是什么
- 原生JS的缺点
- react的特点
React基本使用
虚拟DOM的两种创建方式
虚拟DOM与真实DOM的区别

React是什么

react是用于构建用户界面的JavaScript库。是一个将数据渲染为HTML视图的开源JavaScript库。

原生JS的缺点

原生JS直接操作DOM繁琐，效率低，浏览器会进行大量的重绘重排。
原生JS没有组件化的编码方式，代码复用率低。

react的特点

采用组件化模式，声明式编码
在React Native中可以直接使用React语法进行移动端开发
使用虚拟DOM和优秀的Diffing算法
使用jsx语法进行开发

React基本使用

<!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>Document</title>
</head>
<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- REACT ,react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- ReactDOM ，支持react操作dom-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js文件 -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--text/babel表明是jsx  -->
    <script type="text/babel">
        // 1.创建虚拟DOM
        const VDOM = <h1>Hello,React</h1>
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById("test"))
    </script>
    
</body>
</html>

效果:
在这里插入图片描述

虚拟DOM的两种创建方式

使用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 ,react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- REACTDOM ，支持react操作dom-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js文件 -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--text/babel表明是jsx  -->
    <script type="text/babel">
        // 1.创建虚拟DOM
        const VDOM = <h1 id="title">Hello,React</h1>
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"))
    </script>    
</body>
</html>

使用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.html</title>
</head>
<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- REACT ,react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- REACTDOM ，支持react操作dom-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script>
        // 1.创建虚拟DOM createElement(标签名，标签属性，标签内容)
        const VDOM = React.createElement('h1',{id:'title'},'Hello,React')
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"))
    </script>
     
</body>
</html>

两者区别

jsx创建虚拟DOM更方便一些。

需求：实现<h1><span>Hello,React</span></h1>
jsx实现：

<!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 ,react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- REACTDOM ，支持react操作dom-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js文件 -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--text/babel表明是jsx  -->
    <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>

js实现：

<!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.html</title>
</head>
<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- REACT ,react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- REACTDOM ，支持react操作dom-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script>
        // 1.创建虚拟DOM createElement(标签名，标签属性，标签内容)
        const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"))
    </script> 
</body>
</html>

jsx创建虚拟DOM还可以写成更舒适的形式

        // 1.创建虚拟DOM
        // const VDOM = <h1 id="title"><span>Hello,React</span></h1>
        const VDOM = (
            <h1 id="title">
                <span>Hello,React</span>
            </h1>
        )

可以看出jsx是为了简化js创建dom节点的过程，实际上浏览器运送的时候还是会将jsx语法转换为js语法。

虚拟DOM与真实DOM的区别

虚拟DOM本质上就是一个object类型的对象
虚拟DOM比较轻（身上的属性比较少），因为虚拟DOM只是React内部在使用
虚拟DOM最终会转换成真实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>Document</title>
</head>
<body>
    <!-- 容器 -->
    <div id="test"></div>
    <div id="demo">hello</div>

    <!-- REACT ,react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- REACTDOM ，支持react操作dom-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js文件 -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--text/babel表明是jsx  -->
    <script type="text/babel">
        // 1.创建虚拟DOM
        const VDOM = <h1 id="title"><span>Hello,React</span></h1>
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"))

        console.log('虚拟DOM',VDOM);
        console.log('虚拟DOM类型',typeof VDOM);//object

        const TDOM = document.getElementById("demo");
        console.log('真实DOM', TDOM);
        // debugger;

    </script>
</body>
</html>

输出：
在这里插入图片描述

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React的基本特点——虚拟DOM

/ 1.创建虚拟DOM createElement(标签名，标签属性，标签内容)// 1.创建虚拟DOM createElement(标签名，标签属性，标签内容)jsx创建虚拟DOM还可以写成更舒适的形式。// 2.渲染虚拟DOM到页面。// 2.渲染虚拟DOM到页面。// 2.渲染虚拟DOM到页面。// 2.渲染虚拟DOM到页面。// 2.渲染虚拟DOM到页面。// 2.渲染虚拟DOM到页面。// 1.创建虚拟DOM。// 1.创建虚拟DOM。// 1.创建虚拟DOM。// 1.创建虚拟DOM。
复制链接

扫一扫

专栏目录