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

【React】01-React的入门

news 2025/10/15 14:15:12

文章目录

    • 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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/10/13 16:34:19

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/10/14 13:22:41

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/9/28 8:00:38

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/9/14 3:58:53

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/10/1 21:18:28

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/9/28 3:35:13

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2025/10/6 2:01:11

针对药品仓库的效期管理问题，如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...

编程新知 2025/9/27 18:11:36

CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx

“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网&#xff08;IIoT&#xff09;场景中&#xff0c;结合 DDS&#xff08;Data Distribution Service&#xff09; 和 Rx&#xff08;Reactive Extensions&#xff09; 技术&#xff0c;实现 …...

编程新知 2025/10/14 6:55:41

大数据驱动企业决策智能化的路径与实践

&#x1f4dd;个人主页&#x1f339;&#xff1a;慌ZHANG-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、引言&#xff1a;数据驱动的企业竞争力重构 在这个瞬息万变的商业时代&#xff0c;“快者胜”的竞争逻辑愈发明显。企业如何在复杂环…...

编程新知 2025/10/5 0:43:53