当前位置： 首页 > news >正文

【React】01-React的入门

news 文章来源：https://blog.csdn.net/liqiannan8023/article/details/133814817 2025/1/11 5:05:38

文章目录

    • 1.1 React简介
      • 1.1.1 官网
      • 1.1.2 介绍描述
      • 1.1.3 React的特点
      • 1.1.3 React高效的原因
    • 1.2.React的基本使用
      • 1.2.2.相关js库
      • 1.2.3.创建虚拟DOM的两种方式
      • 1.2.4.虚拟DOM与真实DOM
    • 1.3.React JSX
      • 1.3.1.效果
      • jsx语法规则：
      • 1.3.2.JSX
      • 1.3.3.渲染虚拟DOM(元素)
      • 1.3.4.JSX练习
    • 1.4.模块与组件、模块化与组件化的理解
      • 1.4.1.模块
      • 1.4.2.组件
      • 1.4.3.模块化
      • 1.4.4.组件化

1.1 React简介

1.1.1 官网

  1. 英文官网: https://reactjs.org/

  2. 中文官网: https://react.docschina.org/

1.1.2 介绍描述

  1. 用于动态构建用户界面的 JavaScript 库(只关注于视图)
  2. 由Facebook开源

1.1.3 React的特点

  1. 声明式编码
  2. 组件化编码
  3. React Native 编写原生应用
  4. 高效（优秀的Diffing算法）

1.1.3 React高效的原因

  1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
  2. DOM Diffing算法, 最小化页面重绘。

1.2.React的基本使用

<!-- 准备好一个“容器” --><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">// 1.创建虚拟domconst VDOM = <h1>Hello,React!</h1>// 2.渲染虚拟dom到页面ReactDOM.render(VDOM,document.getElementById('test'))
</script>

1.2.2.相关js库

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

1.2.3.创建虚拟DOM的两种方式

  1. 纯JS方式(一般不用)

    <!-- 准备好一个“容器” --><div id="test"></div>
<!--引入三个文件，此处省略-->
<script type="text/javascript" > //1.创建虚拟DOMconst VDOM = React.createElement('h1',	{id:'title'},React.createElement('span',{},'Hello,React'))//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>

  2. JSX方式

    <!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 三个文件省略 -->
<script type="text/javascript" > //1.创建虚拟DOMconst VDOM = (  /* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))
</script>

1.2.4.虚拟DOM与真实DOM

  1. React提供了一些API来创建一种 “特别” 的一般js对象
    const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
    上面创建的就是一个简单的虚拟DOM对象

  2. 虚拟DOM对象最终都会被React转换为真实的DOM

  3. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

    <!-- 准备好一个“容器” -->
<div id="test"></div>
<div id="demo"></div><!-- 三个文件省略 -->
<script type="text/javascript" > //1.创建虚拟DOMconst VDOM = (  /* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))const TDOM = document.getElementById('demo')console.log('虚拟DOM',VDOM);console.log('真实DOM',TDOM);
</script>

    关于虚拟DOM：

    ​ 1.本质是Object类型的对象（一般对象）

    ​ 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。

    ​ 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

1.3.React JSX

1.3.1.效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx语法规则</title><style>.title{background-color: orange;width: 200px;}</style>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/babel" >const myId = 'aTgUiGu'const myData = 'HeLlo,rEaCt'//1.创建虚拟DOMconst VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><input type="text"/></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

jsx语法规则：

​ 1.定义虚拟DOM时，不要写引号。

​ 2.标签中混入JS表达式时要用{}。

​ 3.样式的类名指定不要用class，要用className。

​ 4.内联样式，要用style={{key:value}}的形式去写。

​ 5.只有一个根标签

​ 6.标签必须闭合

​ 7.标签首字母

​ (1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

​ (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

1.3.2.JSX

  1. 全称: JavaScript XML
  2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
  3. 作用: 用来简化创建虚拟DOM
    1)写法：var ele =

    Hello JSX!


    2)注意1：它不是字符串, 也不是HTML/XML标签
    3)注意2：它最终产生的就是一个JS对象
  4. 标签名任意: HTML标签或其它标签
  5. 标签属性任意: HTML标签属性或其它
  6. 基本语法规则
    1)遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    2)遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
  7. babel.js的作用
    1)浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    2)只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

1.3.3.渲染虚拟DOM(元素)

  1. 语法: ReactDOM.render(virtualDOM, containerDOM)
  2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
  3. 参数说明
    1)参数一: 纯js或jsx创建的虚拟dom对象
    2)参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

1.3.4.JSX练习

需求: 动态展示如下列表

<!-- 准备好一个“容器” -->
<div id="test"></div>
<script type="text/babel" >const data = ["Angular","React","Vue"]// 1.创建虚拟domconst VDOM = (<div><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>)// 渲染ReactDOM.render(VDOM,document.getElementById("test"))
</script>

一定注意区分：【js语句(代码)】与【js表达式】

​ 1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

​ 下面这些都是表达式：

​ (1). a

​ (2). a+b

​ (3). demo(1)

​ (4). arr.map()

​ (5). function test () {}

​ 2.语句(代码)：

​ 下面这些都是语句(代码)：

​ (1).if(){}

​ (2).for(){}

​ (3).switch(){case:xxxx}

​

1.4.模块与组件、模块化与组件化的理解

1.4.1.模块

  1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
  2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
  3. 作用：复用js, 简化js的编写, 提高js运行效率

1.4.2.组件

  1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)

  2. 为什么要用组件： 一个界面的功能更复杂

  3. 作用：复用编码, 简化项目编码, 提高运行效率

1.4.3.模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

1.4.4.组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

相关文章：

【React】01-React的入门

文章目录 1.1 React简介1.1.1 官网1.1.2 介绍描述1.1.3 React的特点1.1.3 React高效的原因 1.2.React的基本使用1.2.2.相关js库1.2.3.创建虚拟DOM的两种方式1.2.4.虚拟DOM与真实DOM 1.3.React JSX1.3.1.效果jsx语法规则&#xff1a;1.3.2.JSX1.3.3.渲染虚拟DOM(元素)1.3.4.JSX练…...

编程日记 2023/10/17 14:42:22

【C语言进阶】自定义类型：结构体，枚举，联合

自定义类型&#xff1a;结构体&#xff0c;枚举&#xff0c;联合 1.结构体1.1结构体类的基础知识1.2结构的声明1.3特殊的声明1.4结构的自引用1.5结构体变量的定义和初始化1.6结构体内存对齐1.7修改默认对齐1.8结构体传参 2.段位2.1什么是段位2.2段位的内存分配2.3位段的跨平台问…...

编程日记 2023/10/17 14:40:20

Sklearn 聚类算法的性能评估

聚类算法的性能评估是什么？ 聚类是无监督学习的一种常用技术，用于将相似的数据点分组在一起。然而在实施聚类算法后，一个关键的问题便是如何评估其性能或质量。由于聚类是无监督的，因此评估其性能相对更为复杂。本文将探讨多种用于评估聚类性能的指标，包括肘部法则、轮廓…...

编程日记 2023/10/17 14:39:18

9月最新外贸进出口数据出来了，外贸整体向好

10月13日&#xff0c;海关总署发布数据显示&#xff0c;今年前三季度中国货物贸易出口2.52万亿美元&#xff0c;下降5.7%。 9月当月&#xff0c;中国出口2991.3亿美元&#xff0c;同比下降6.2%。贸易顺差777.1亿美元。 这个数据还是在改善的。特别是&#xff0c;我们看到全球…...

编程日记 2023/10/17 14:38:17

SSL证书有效期越来越短是什么原因？

随着互联网的普及和数据安全意识的提高&#xff0c;SSL证书的使用变得日益普遍。SSL证书是一种用于加密数据传输并验证网站身份的安全协议。它们通过加密在用户浏览器和网站服务器之间传输的数据&#xff0c;从而确保数据的隐私和完整性。此外&#xff0c;SSL证书还通过数字签名…...

编程日记 2023/10/17 14:37:16

【前段基础入门之】=＞CSS3新特性 3D 变换

导语 在上一章节中&#xff0c;我们分享了2D 变换的效果&#xff0c;也分享了一些案例&#xff0c;同时&#xff0c;既然有2D 变换&#xff0c;那么也就肯定有 3D 变换 那么本章节&#xff0c;就为大家带来有关3D 变换的分享. 文章目录 开启3D空间设置景深透视点位置3D 位移3D …...

编程日记 2023/10/17 14:36:15

form表单的三种封装方法（Vue+ElementUI）

form表单的三种封装方法&#xff08;VueElementUI&#xff09; 1.首先是最普通&#xff0c;也是大家最先想到的方法&#xff0c;直接封装&#xff1a;2.实现表单动态渲染、可视化配置的方法&#xff0c;动态表单又可以分为两种方法&#xff1a;(注意&#xff1a;注意 v-model 的…...

编程日记 2023/10/17 14:35:13

云原生周刊：CNCF 宣布 Cilium 毕业 | 2023.10.16

开源项目推荐 Reloader Reloader 是一个 Kubernetes 控制器&#xff0c;用于监控 ConfigMap 和 Secrets 中的变化&#xff0c;并对 Pod 及其相关部署、StatefulSet、DaemonSet 和 DeploymentConfig 进行滚动升级&#xff01; Spegel Spegel 在瑞典语中意为镜像&#xff0c;…...

编程日记 2023/10/17 14:33:12

岩土工程监测利器：多通道振弦数据记录仪应用隧道监测

岩土工程监测利器&#xff1a;多通道振弦数据记录仪应用隧道监测 岩土工程监测在现代工程建设中的作用越来越重要。为了确保工程质量和工程安全&#xff0c;需要对工程过程中的各种参数进行实时监测和记录。而多通道振弦数据记录仪则是一种重要的监测工具&#xff0c;特别适用…...

编程日记 2023/10/17 14:32:09

hive排序

目录 order by (全局排序asc ,desc) sort by(reduce 内排序) Distribute by(分区排序) Cluster By&#xff08;当 distribute by 和 sorts by 字段相同时 &#xff0c;可以使用 &#xff09; order by (全局排序asc ,desc) INSERT OVERWRITE LOCAL DIRECTORY /home/test2 …...

编程日记 2023/10/17 14:31:09

网络安全入门教程（非常详细）从零基础入门到精通

网络安全是一个庞大而不断发展的领域&#xff0c;它包含多个专业领域&#xff0c;如网络防御、网络攻击、数据加密等。介绍网络安全的基本概念、技术和工具&#xff0c;逐步深入&#xff0c;帮助您成为一名合格的网络安全从业人员。 一、网络安全基础知识 1.计算机基础知识 …...

编程日记 2023/10/17 14:30:08

自动驾驶中的数据安全和隐私

自动驾驶技术的发展已经改变了我们的出行方式&#xff0c;但伴随着这项技术的普及&#xff0c;数据安全和隐私问题也变得愈发重要。本文将探讨自动驾驶中的数据收集、数据隐私和安全挑战&#xff0c;以及如何保护自动驾驶系统的数据。 自动驾驶中的数据收集 在自动驾驶技术中…...

编程日记 2023/10/17 14:29:06

回应：淘宝支持使用微信支付？

近日&#xff0c;就有网友共享称淘宝APP的支付界面出现“微信二维码支付”及其“去微信找个朋友帮我付”这个选项。 淘宝官方网对此回应称&#xff0c;“微信二维码支付作用仍在逐步开放中&#xff0c;目前只有针对一些客户对外开放&#xff0c;并且只有部分商品适用这一付款方…...

编程日记 2023/10/17 14:28:05

k8s的etcd启动报错

背景 电脑休眠状态意外断电导致虚拟机直接进入关机状态。 问题 kubectl命令报错 [rootmaster01 ~]#kubectl get node The connection to the server master01.kktb.org:6443 was refused - did you specify the right host or port?kubelet服务报错 Oct 15 08:39:37 mas…...

编程日记 2023/10/17 14:27:05

codeigniter 4.1.3 gadget chain

EXP code 找到一条很有意思的codeigniter框架的链。 <?php namespace CodeIgniter\HTTP {class CURLRequest {protected $config ["debug" > "./eee.php"];} }namespace CodeIgniter\Session\Handlers {class MemcachedHandler{public function …...

编程日记 2023/10/17 14:26:04

L1-039 古风排版 C++解法

题目再现 中国的古人写文字&#xff0c;是从右向左竖向排版的。本题就请你编写程序&#xff0c;把一段文字按古风排版。 输入格式&#xff1a; 输入在第一行给出一个正整数N&#xff08;<100&#xff09;&#xff0c;是每一列的字符数。第二行给出一个长度不超过1000的非…...

编程日记 2023/10/17 14:25:02

docker安装tomcat

1.通过dockerhub搜索tomcat镜像 dockerhub官网&#xff1a;https://hub.docker.com/ 选择star最多的tomcat点击进入&#xff0c;有很多tomcat详细信息 docker run&#xff1a;运行&#xff0c;没有则会去docker pull 拉去镜像 -it&#xff1a;使用交互方式运行&#xff0c;进…...

编程日记 2023/10/17 14:24:01

别人ping不通我的ip解决方法

方法一&#xff1a;关闭防火墙 方法二&#xff1a;开启ICMPv4 控制面板\系统和安全\Windows Defender 防火墙-----打开高级设置-----入站规则&#xff0c;开启域和专用两个 ICMPv4 方法三&#xff1a;更改共享选项 控制面板\网络和 Internet\网络和共享中心...

编程日记 2023/10/17 14:23:00

Python爬虫基础之Selenium详解

目录 1. Selenium简介2. 为什么使用Selenium&#xff1f;3. Selenium的安装4. Selenium的使用5. Selenium的元素定位6. Selenium的交互7. Chrome handless参考文献 原文地址&#xff1a;https://program-park.top/2023/10/16/reptile_3/ 本文章中所有内容仅供学习交流使用&…...

编程日记 2023/10/17 14:21:59

MS5228数模转换器可pin对pin兼容AD5628

MS5228/5248/5268 是一款 12/14/16bit 八通道输出的电压型 DAC&#xff0c;内部集成上电复位电路、可选内部基准、接口采用四线串口模式&#xff0c;最高工作频率可以到 40MHz&#xff0c;可以兼容 SPI、QSPI、DSP 接口和 Microwire 串口。可pin对pin兼容AD5628。输出接到一个 …...

编程日记 2023/10/17 14:20:58

强化学习基础（2）—常用算法总结

目录 1.Value-Based 2. Policy-Based 参考文献 1.Value-Based Sarsa&#xff08;State-action-reward-state’-action&#xff09;&#xff1a;是为了建立和优化状态-动作(state-action)的价值Q表格所建立的方法。首先初始化Q表格&#xff0c;根据当前的状态和动作与环境进行…...

编程日记 2023/10/17 14:19:57

Web攻防01-ASP应用相关漏洞-HTTP.SYSIIS短文件文件解析ACCESS注入

文章目录 ASP-默认安装-MDB数据库泄漏下载漏洞漏洞描述 ASP-中间件 HTTP.SYS&#xff08;CVE-2015-1635&#xff09;1、漏洞描述2、影响版本3、漏洞利用条件4、漏洞复现 ASP-中间件 IIS短文件漏洞1、漏洞描述2、漏洞成因:3、应用场景&#xff1a;4、利用工具&#xff1a;5、漏洞…...

编程日记 2023/10/17 14:18:56

入门小白拥有服务器的建议

学习网络知识 当我们拥有了一台服务器以后，需要提前准备学习一些网络、服务器、互联网方便的知识， 以备在后续学习工作中使用。 建议的网络知识学习清单： 1. 网络基础知识：包括网络拓扑结构、协议、IP地址、子网掩码、网关等基础概念。 2. 网络安全：包括网络攻击类型、防…...

编程日记 2023/10/17 14:17:55

Spring源码解析——事务增强器

正文 上一篇文章我们讲解了事务的Advisor是如何注册进Spring容器的&#xff0c;也讲解了Spring是如何将有配置事务的类配置上事务的&#xff0c;实际上也就是用了AOP那一套&#xff0c;也讲解了Advisor&#xff0c;pointcut验证流程&#xff0c;至此&#xff0c;事务的初始化工…...

编程日记 2023/10/17 14:16:54

JAVA发送消息到RabbitMq

项目中&#xff0c;作为生产者自定义消息发送到RabbitMq。 1.引入rmq依赖 <!-- rabbitmq 依赖 --><dependency><groupId>com.rabbitmq</groupId><artifactId>amqp-client</artifactId><version>5.9.0</version></dependen…...

编程日记 2023/10/17 14:15:53

Python 函数（lambda 匿名函数、自定义函数、装饰器）基本使用指南

Python 函数 函数是组织好的&#xff0c;可重复使用的&#xff0c;用来实现单一&#xff0c;或相关联功能的代码段 lambda 匿名函数 对于单行函数&#xff0c;使用 lambda 表达式可以省去定义函数的过程&#xff0c;让代码更加简洁&#xff1b; 对于不需要多次复用的函数&a…...

编程日记 2023/10/17 14:14:52

第五届芜湖机器人展，正运动助力智能装备“更快更准”更智能！

■展会名称&#xff1a; 第十一届中国(芜湖)科普产品博览交易会-第五届机器人展 ■展会日期 2023年10月21日-23日 ■展馆地点 中国ㆍ芜湖宜居国际博览中心B馆 ■展位号 B029 正运动技术&#xff0c;作为国内领先的运动控制企业&#xff0c;将于2023年10月21日参加芜湖机…...

编程日记 2023/10/17 14:13:51

JVM八股文

1.JVM的内存结构&#xff1f; 2.OOM是什么&#xff0c;怎么排查&#xff1f; 3.请解释四种引用是什么意思有什么区别&#xff1f; 4.GC的回收算法有哪些&#xff1f; 5.怎么判断对象是否存活&#xff1f; 1.什么是JVM内存结构 jvm将虚拟机分为5大区域&#xff0c;程序计数器、…...

编程日记 2023/10/17 14:12:50

代码随想录算法训练营第二十四天丨 回溯算法part02

216.组合总和III 思路 本题就是在 [1,2,3,4,5,6,7,8,9] 这个集合中找到和为n的k个数的组合。 相对于77. 组合 (opens new window)&#xff0c;无非就是多了一个限制&#xff0c;本题是要找到和为n的k个数的组合&#xff0c;而整个集合已经是固定的了[1,...,9]。 本题k相当于…...

编程日记 2023/10/17 14:11:48

【Python机器学习】零基础掌握AgglomerativeClustering聚类

如何解决城市规划问题？ 城市规划者们面临一个复杂问题：如何合理地规划土地，使商业、居民、公园和其他设施互相便利，同时又不互相干扰？解决这个问题不仅需要对土地进行精准的分类，还要考虑到土地之间的相互关系。 借助层次聚类算法（Agglomerative Clustering），规划者…...

编程日记 2023/10/17 14:10:47

合肥新站开发区管委会网站/武汉seo论坛

使用技术 LR.APP是基于uni-app开发的多端APP/小程序系统&#xff0c;设计理念是解决多端开发问题&#xff0c;使用时&#xff0c;开发者仅需一套代码&#xff0c;即可编译到iOS、Android、H5、小程序等多个平台。 LR.APP封装了跨端兼容的组件和api&#xff0c;如果你不熟悉un…...

编程日记 2025/1/11 4:04:05

顶呱呱网站建设价格/百度云搜索引擎入口 百度网盘

对于搜索引擎的搜索准确度影响很大1.基于字符串匹配&#xff08;机械分词&#xff09; 一般作为一个初分手段&#xff08;1&#xff09;正向最大匹配法&#xff08;需要充分大的词典&#xff09;例子: 将句子 ’ 今天来了许多新同事 ’ 分词。 设最大词长为5今天来了许今天来…...

编程日记 2025/1/11 2:19:39

如何租用服务器做网站/长安seo排名优化培训

MPI简介在程序中&#xff0c;不同的进程需要相互的数据交换&#xff0c;特别是在科学计算中&#xff0c;需要大规模的计算与数据交换&#xff0c;集群可以很好解决单节点计算力不足的问题&#xff0c;但在集群中大规模的数据交换是很耗费时间的&#xff0c;因此需要一种在多节点…...

编程日记 2025/1/11 2:00:20

网站基础优化/站外推广方式有哪些

批注[……] 表示他人、自己、网络批注参考资料来源于* 书中批注* CSDN* GitHub* Google* 维基百科* YouTube* MDN Web Docs由于编写过程中无法记录所有的URL所以如需原文&#xff0c;请自行查询{……} 重点内容*……* 表示先前提到的内容&#xff0c;不赘述外增其余Web攻击详解…...

编程日记 2025/1/10 23:38:43

蒙古网站群建设/百度邮箱注册入口

首先了解两个概念&#xff0c;胜者树和败者树&#xff1a; 胜者树和败者树都是二叉排序树&#xff0c;是树形选择排序的一种变形。每个叶子节点相当于一位选手&#xff0c;每个中间结点相当于一场比赛&#xff0c;每一层相当于一轮比赛。胜者树的中间结点记录的是胜者的标号&a…...

编程日记 2025/1/10 22:15:36

杭州网站建设icp备/南京百度推广开户

function filterRepat(arr){if(Array.isArray(arr) && arr.length){var arr arr.filter(function(val,index,carr){return carr.indexOf(val) index;});return arr;}return []; } 转载于:https://www.cnblogs.com/zhujiasheng/p/8447686.html...

编程日记 2025/1/10 21:56:22