React基础入门之虚拟Dom

React官方文档:https://react.docschina.org/

说明

重要提示:本系列文章基础篇总结自尚硅谷课程,且采用类式写法!!最新的函数式组件写法见高级篇。

本系列文档旨在帮助vue同学更快速的学习react,如果你很熟悉vue,且想更好地了解react,建议从类式组件学起!

学习本教程之前,最好具备vue的基础知识,明白虚拟DOM、jsx这些前置知识。接下来,我们通过一个简单的示例来展示react的使用。

注意:入门的学习不会使用脚手架,而是使用html非框架写法

入门示例

下面展示一个最简单的react示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hello_react</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.创建虚拟DOMconst VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 *///2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

运行后的页面

引入的js文件作用

使用非框架的形式写react,我们需要引入三个js文件,如上面的示例:

  1. react.js: React核心库。
  2. react-dom.js: 提供操作DOM的React扩展库。
  3. babel.min.js: 解析JSX语法代码转为JS代码的库。

babel.js的作用

  1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
  2. 只要用了JSX,都要加上type=“text/babel” , 声明需要babel来处理

虚拟DOM

react采用虚拟DOM的形式渲染页面

使用JSX创建虚拟DOM

//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1>

渲染虚拟DOM(元素)

  1. 语法: ReactDOM.render(virtualDOM, containerDOM)
  2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
  3. 参数说明
参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 */
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

注意:react和react-dom的引入顺序不能写错!

创建虚拟DOM的两种方式

纯JS方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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" > //1.创建虚拟DOM//const VDOM = React.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转为js,所以不需要引入babel

不使用jsx创建项目,明显需要写很多代码,非常麻烦!

JSX方式

JSX方式就是js创建虚拟DOM的语法糖

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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.创建虚拟DOMconst VDOM = (  /* 此处一定不要写引号,因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

注:当Vdom的内容是多行时,可以使用()jsx包裹起来,表示一个整体。

虚拟DOM与真实DOM对比

打印输出虚拟DOM和真实DOM进行比较

<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.创建虚拟DOMconst VDOM = <h1>Hello,React</h1>; /* 此处一定不要写引号,因为不是字符串 *///2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById("test"));const TDOM = document.getElementById("test");console.log("虚拟DOM", VDOM);console.info("真实DOM", TDOM);</script></body>

console.log(“虚拟DOM”, VDOM);

看看真实DOM身上有哪些属性

  1. 虚拟DOM本质是Object类型的对象(一般对象)
  2. 虚拟DOM比较 “”,真实DOM比较 “”,因为虚拟DOMReact内部在用,无需真实DOM上那么多的属性
  3. 虚拟DOM最终会被React转化为真实DOM,呈现在页面上

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/49287.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

若依项目的运行详细步骤

目录 一、项目的解读与获取 二、项目的运行 后端步骤(ruoyi-admin) &#xff08;一&#xff09;导入若依的2个SQL文件 版本建议 &#xff08;二&#xff09;Redis的配置 &#xff08;三&#xff09;启动后端 前端步骤(ruoyi-ui) 版本建议 &#xff08;一&#xff09;…

open suse 15.5(任意版本) 使用阿里云的repo

一、shell suse 的包管理工具叫 zypper. zypper addrepo -f http://mirrors.aliyun.com/opensuse/distribution/leap/15.5/repo/oss/ openSUSE-15.5-Oss zypper addrepo -f http://mirrors.aliyun.com/opensuse/distribution/leap/15.5/repo/non-oss/ openSUSE-15.5-Non-Oss …

数据结构—树表的查找

7.3树表的查找 ​ 当表插入、删除操作频繁时&#xff0c;为维护表的有序表&#xff0c;需要移动表中很多记录。 ​ 改用动态查找表——几种特殊的树 ​ 表结构在查找过程中动态生成 ​ 对于给定值key ​ 若表中存在&#xff0c;则成功返回&#xff1b; ​ 否则&#xff0…

监控 FTP 服务器

文件传输协议 &#xff08;FTP&#xff09; 用于在 TCP/IP 网络中的服务器和客户端之间传输文件&#xff0c;它是一种标准协议&#xff0c;广泛用于在各个垂直行业的组织之间从集中位置存储和分发数据。FTP协议的其他一些安全版本如下&#xff1a; SSH 文件传输协议 &#xff…

《论文阅读18》 SSD: Single Shot MultiBox Detector

一、论文 研究领域&#xff1a; 2D目标检测论文&#xff1a;SSD: Single Shot MultiBox Detector ECCV 2016 数据集 论文链接论文github 二、论文概要 SSD网络是作者Wei Liu在ECCV 2016上发表的论文。对于输入尺寸300x300的网络 使用Nvidia Titan X在VOC 2007测试集上达到74…

Datawhale Django后端开发入门 Vscode TASK02 Admin管理员、外键的使用

一.Admin管理员的使用 1、启动django服务 使用创建管理员之前&#xff0c;一定要先启动django服务&#xff0c;虽然TASK01和TASK02是分开的&#xff0c;但是进行第二个流程的时候记得先启动django服务&#xff0c;注意此时是在你的项目文件夹下启动的&#xff0c;时刻注意要执…

微信小程序 echarts 画多个横向柱状图

然后是json {"usingComponents": {"ec-canvas": "../../common/ec-canvas/ec-canvas"},"navigationBarTitleText": "主题活动" } ec-canvas获取方式 在链接里下载代码 然后copy ec-canvas文件夹到自己的项目 https://gi…

会计资料(借贷记账法、试算平衡)

6.借贷记账法 这样的格式是会计学家提出的。 6.1 借贷记账法的详细使用 这里要把会计的六大分类搞明白&#xff0c;才能够使用借贷记账法 6.2 借贷记账法的记账规则 6.3 借贷记账法下的账户与会计分录 6.4 会计分录的介绍 这里一笔会计分录只能写一笔经济业务&#xff0c;或者…

使用 Ansible Galaxy 安装角色

使用 Ansible Galaxy 安装角色 使用 Ansible Galaxy 和要求文件 /home/curtis/ansible/roles/requirements.yml 。从以下 URL 下载角色并安装到 /home/curtis/ansible/roles &#xff1a; http://rhgls.area12.example.com/materials/haproxy.tar 此角色的名称应当为 balancer …

Cpp学习——list的模拟实现

目录 一&#xff0c;实现list所需要包含的三个类 二&#xff0c;三个类的实现 1.list_node 2.list类 3.iterator_list类 三&#xff0c;功能实现 1.list类里的push_back() 2.iterator类里的运算符重载 3&#xff0c;list类里面的功能函数 1.insert&#xff08;&#xff…

认识负载均衡||WEBSHELL

目录 一、负载均衡 1.nginx负载均衡算法 2.nginx反向代理-负载均衡 二、webshell 1.构造不含数字和字母的webshell 2.如何绕过 一、负载均衡 1.nginx负载均衡算法 &#xff08;1&#xff09;轮询&#xff08;默认&#xff09;每个请求按时间顺序逐一分配到不同的后端服务&…

vue3 setup语法糖导入mixin

像这样直接导入&#xff0c;然后通过defineOptions声明mixin 然后就可以在这个组件使用mixin里的数据和方法了

Java版B/S架构 智慧工地源码,PC、移动、数据可视化智慧大屏端源码

智慧工地是什么&#xff1f;智慧工地主要围绕绿色施工、安全管控、劳务管理、智能管理、集成总控等方面&#xff0c;帮助工地解决运营、管理方面各个难点痛点。在互联网的加持下促进项目现场管理的创新与发展&#xff0c;实现工程管理人员与工程施工现场的整合&#xff0c;构建…

centos9 mysql8修改数据库的存储路径

一、环境 系统&#xff1a;CentOS Stream release 9 mysql版本&#xff1a;mysql Ver 8.0.34 for Linux on x86_64 (MySQL Community Server - GPL) 二、修改mysql的数据库&#xff0c;存储路径 查看目录数据存储的位置 cat /etc/my.cnf操作 1、新建存放的目录&#xff0c;…

【JAVA基础】 IO详解

【JAVA基础】 IO详解 文章目录 【JAVA基础】 IO详解一、概述二、IO流的作用三、IO流的使用场景四、IO流的分类4.1 传输数据的单位分&#xff1a;4.2 数据传输的方向分&#xff1a;4.3 流的角色的不同分&#xff1a; 五、IO流体系六、字节输入流InputStream七、字节输出流 Outpu…

c++ 友元 运算符重载详解

友元 c是面向对象的&#xff0c;目的之一&#xff1a;封装 封装&#xff1a; 优点之一&#xff0c;就是安全。 缺点&#xff1a;在某些特殊的场合&#xff0c;不是很方便。 华为与IBM 40亿的咨询故事 IBM需要对华为各级部门做深度咨询分析&#xff0c; 为了提高咨询效率&a…

Transformer在医学影像中的应用综述-分类

文章目录 COVID-19 Diagnosis黑盒模型可解释的模型 肿瘤分类黑盒模型可解释模型 视网膜疾病分类小结 总体结构 COVID-19 Diagnosis 黑盒模型 Point-of-Care Transformer(POCFormer)&#xff1a;利用Linformer将自注意的空间和时间复杂度从二次型降低到线性型。POCFormer有200…

Docker基础操作

1.安装docker服务&#xff0c;配置镜像加速器 安装docker服务 清理缓存 sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ docker-enginesystemctl enable --now docker 脚…

微积分进阶 1.1 函数

一、函数的概念 在观察自然现象或工程实际问题时&#xff0c;我们经常发现有几个变量在变化&#xff0c;这些变量之间并不是彼此孤立的&#xff0c;而是相互制约的&#xff0c;这些变量是怎么变化的呢&#xff1f;它们之间有什么联系呢&#xff1f;存什么规律呢&#xff1f;怎…

ARM开发(cortex-A7核中断实验)

1.实验目的&#xff1a;实现KEY1/LEY2/KE3三个按键&#xff0c;中断触发打印一句话&#xff0c;并且灯的状态取反&#xff1b; key1 ----> LED3灯状态取反&#xff1b; key2 ----> LED2灯状态取反&#xff1b; key3 ----> LED1灯状态取反&#xff1b; 2.分析框图: …