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

[尚硅谷React笔记]——第1章 React简介

news 2026/4/6 17:47:49

目录：

第1章 React简介

React的基本使用:
虚拟DOM的两种创建方式：
- 使用jsx创建虚拟DOM
- 使用js创建虚拟DOM(一般不用)
- 虚拟DOM与真实DOM:
React JSX:
JSX练习：
模块与组件、模块化与组件化的理解
- 模块
- 组件
- 模块化
- 组件化

第1章 React简介

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

React的基本使用:

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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">//1.创建虚拟DOMconst 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"><title>Title</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">//1.创建虚拟DOM// const VDOM = <h1 id="title">Hello,React</h1>const VDOM = <h1 id="title"><span>Hello,React</span></h1>//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

使用js创建虚拟DOM(一般不用)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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('h1', {id: 'title'}, 'Hello,React')const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Hello,React'))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

虚拟DOM与真实DOM:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--准备好一个“容器”-->
<div id="test"></div>
<div id="demo"></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 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)debugger// console.log(typeof VDOM)// console.log(VDOM instanceof Object)
</script>
</body>
</html>

React JSX:

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
作用: 用来简化创建虚拟DOM
- 写法：var ele = <h1>Hello JSX!</h1>
- 注意1：它不是字符串, 也不是HTML/XML标签
- 注意2：它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
babel.js的作用
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

jsx语法规则：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.title {background-color: orange;width: 200px;}</style>
</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">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"></input></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))// jsx语法规则:// 1.定义虚拟DOM时,不要写引号。// 2.标等中混入Js表达式时要用// 3.样式的类名指定不要用class，要用className.// 4.内联样式，要用style={{key : value}}的形式去写。// 5.只有一个根标签// 6.标签必须闭合// 7.标签首字母// (1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。// (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。</script>
</body>
</html>

JSX练习：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.title {background-color: orange;width: 200px;}</style>
</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">const data = ['Angular', 'React', 'Vue']//1.创建虚拟DOMconst VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item, index) => {return <li key={index}>{item}</li>})}</ul></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

运行结果：

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

模块

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

组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

模块化

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

组件化

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

[尚硅谷React笔记]——第1章 React简介

目录： 第1章 React简介 React的基本使用:虚拟DOM的两种创建方式： 使用jsx创建虚拟DOM使用js创建虚拟DOM(一般不用)虚拟DOM与真实DOM:React JSX:JSX练习：模块与组件、模块化与组件化的理解模块组件模块化组件化第1章 React简介中文官网: …...

编程日记 2023/9/25 4:51:27

Debezium系列之：快照参数详解一、snapshot.select.statement.overrides二、min.row.count.to.stream.results三、snapshot.delay.ms四、snapshot.fetch.size五、snapshot.lock.timeout.ms六、incremental.snapshot.allow.schema.changes七、incremental.snapshot.chunk.size八…...

编程日记 2023/9/25 4:49:25

redis单机版搭建

title: “Redis单机版搭建” createTime: 2022-01-04T20:43:1108:00 updateTime: 2022-01-04T20:43:1108:00 draft: false author: “name” tags: [“redis”] categories: [“install”] description: “测试的” redis单机版搭建安装环境 redis版本redis-5.0.7虚拟机系统…...

编程日记 2023/9/25 4:45:22

物联网边缘网关

物联网边缘网关边缘网关的定义边缘网关的分类边缘计算网关平台相关产品有哪些百度边缘计算平台（BIE）华为边缘计算平台（IEF）产品应用拓扑图产品价格区间...

编程日记 2023/9/25 4:43:19

docker部署springboot程序时遇到的network问题

对应问题，因为刚开始接触docker，所以问题可能比较简单，但是做个记录 1、启动一个springboot项目获取本地ip的时候获取到的是172.17.0.x这个ip；在使用一些注册中心，mq的时候又要表明自己的本机器ip的时候会比较头疼&…...

编程日记 2023/9/25 4:42:18

RASP hook插桩原理解析

javaagent技术，实现提前加载类字节码实现hook，插桩技术 javassist技术ASM字节码技术像加载jar，有两种方式 premain启动前加载：每次变动jar包内容，都需要进行重启服务器利用java的动态attch加载原理，采用pr…...

编程日记 2023/9/25 4:39:15

Pygame中Sprite的使用方法6-5

3 碰撞检测蓝色方块会随着鼠标移动，当碰到绿色方块时，则当前分数加1，当碰到红色方块时，当前分数减1。因为要随时进行碰撞检测，因此需要在while True循环中实现以下功能。 3.1 蓝色方块随鼠标移动将蓝色方块的位置…...

编程日记 2023/9/25 4:36:13

浅谈为什么多态只能是指针或引用

其实在很早之前，我一直没有注意到这个问题，直到今天碰见了一道题，顺便前面的博客中，继承写到，子类中不包含父类，子类只是继承了父类的成员变量和函数，由这一点，引发了我对切片以及赋…...

编程日记 2023/9/25 4:35:12

js看代码说输出

目录原型 Function与Object new fn() 原型链 constructor function.length 默认参数:第一个具有默认值之前的参数个数剩余参数：不算进length 闭包循环中函数工厂：形参传递 IIFE：匿名闭包 let：闭包 forEach()&am…...

编程日记 2023/9/25 4:34:11

Java笔记：使用javassist修改class文件内方法

1.前言在工作突然有一个需求。线上运维的一个tomcat的web项目，运行的程序不正常。需要修改代码。可是这个项目代码非常的老，并且公司存储的源代码跟线上的不一致。我了个擦，没有源代码但是还要结局客户的问题。只能到线上将对应程序的clas…...

编程日记 2023/9/25 4:30:06

华为云云耀云服务器L实例评测｜云服务器性能评测

通过上一篇文章华为云云耀云服务器 L 实例评测 ｜云服务器选购，我已经购买了一台 Centos 系统的云耀云服务器 L 实例。在获得云耀云服务器 L 实例后，首要任务是熟悉云耀云服务器 L 实例的性能，对云耀云服务器 L 实例的性能进行测…...

编程日记 2023/9/25 4:28:05

iphone的safari浏览器实现全屏的pwa模式，并修改顶部状态栏背景颜色

要想修改顶部背景颜色，需要用到这个属性：content就是你要设置的颜色 <meta name"theme-color" content"#f8f8f8" /> 然后再加上下面的设置： <!-- 网站开启对 web app 程序的支持…...

编程日记 2023/9/25 4:27:04

springboot对接rabbitmq并且实现动态创建队列和消费

背景 1、对接多个节点上的MQ（如master-MQ，slave-MQ），若读者需要自己模拟出两个MQ，可以部署多个VM然后参考 docker 安装rabbitmq_Steven-Russell的博客-CSDN博客 2、队列名称不是固定的，需要接受外部参数&…...

编程日记 2023/9/25 4:26:03

Spring的后处理器-BeanFactoryPostprocessor

目录 Spring后处理器 Bean工厂后处理器-BeanFactoryPostProcessor 修改beanDefinition对象添加beanDefiniton对象方法一方法二自定义Component Spring后处理器 Spring后处理器是Spring对外开放的重要拓展点（让我们可以用添加自己的逻辑）&…...

编程日记 2023/9/25 4:21:59

Flutter 必备知识点

Flutter 升级确保在项目根目录下（含有 pubspec.yaml 的文件夹） 在命令行中输入命令： flutter channel输出： Flutter channels: * mastermainbetastable这个可以在 pubspec.yaml 中查看： 切换分支也很简单&#xf…...

编程日记 2023/9/25 4:20:58

什么是FMEA（失效模式和影响分析）？

失效模式和影响分析（FMEA）是一个在开发阶段，用于确定产品或流程可能的风险和失败点的有条理的过程。FMEA团队会研究失效模式，也就是产品或流程中可能出错的地方，以及这些失效可能带来的影响（如风险、损害、…...

编程日记 2023/9/25 4:19:57

Redis面试题(三)

文章目录前言一、怎么理解 Redis 事务？二、Redis 事务相关的命令有哪几个？三、Redis key 的过期时间和永久有效分别怎么设置？四、Redis 如何做内存优化？五、Redis 回收进程如何工作的？六、加锁机制总结前言怎么理…...

编程日记 2023/9/25 4:17:55

Python错误处理指南：优雅应对异常情况

目录一. 异常是什么？二. 使用 try 和 except三. 捕获多个异常四. 使用 else五. 使用 finally六. 自定义异常七.Python中常见异常处理类型八.Python中常见异常处理实例九.异常处理最佳实践十.结论当编写Python代码时，错误处理是一个重要的方面&#xff…...

编程日记 2023/9/25 4:15:54

MySQL学习笔记12

MySQL 查询语句： 1、查询五子句：（重点） mysql> select */字段列表 from 数据表名称 where 子句 group by 子句 having 子句 order by 子句 limit 子句; 1）where 子句；条件筛选。 2）group…...

编程日记 2023/9/25 4:14:52

【owt】构建m79的owt-client-native：使用vs2017

家里电脑换成了台式机，拷贝代码发现了三年前的owt客户端mfc工程。不用下载第三方库，试着构建下： owt-client-native 我这里有3年前的代码，思索了下还是用vs2017构建吧：重新构建一下选用x86 的 vs2017 vs的命令行控制台 cls可以清理屏幕之前构建过vs2022的webrtc原版 …...

编程日记 2023/9/25 4:12:51

手把手教你学Simulink——基于Simulink的扰动观测器（DOB）补偿坡道重力分量

目录手把手教你学Simulink——基于Simulink的扰动观测器（DOB）补偿坡道重力分量摘要一、背景与挑战 1.1 坡道重力扰动的痛点与传统控制局限 1.1.1 应用场景与核心指标 1.1.2 传统PI控制的缺陷 1.2 DOB控制的核心优势 1.3 设计目标二、系统架构与D…...

编程新知 2026/4/6 17:37:30

Qwen3-0.6B-FP8从部署到应用：完整流程详解，新手必看

Qwen3-0.6B-FP8从部署到应用：完整流程详解，新手必看你是不是刚接触AI模型，看着各种复杂的部署命令和配置就头疼？想快速体验一个能聊天、能推理、还能帮你写东西的智能助手，但又担心自己的电脑配置不够，或…...

编程新知 2026/4/6 17:31:29

数据结构之B树、B+树、B-树详解

B树、B树、B-树详解目录 1. 引言2. B树（B-Tree） 2.1 定义2.2 特点2.3 操作2.4 应用场景 3. B树（B Tree） 3.1 定义3.2 特点3.3 操作3.4 应用场景 4. B-树（B-Tree） 4.1 定义4.2 特点4.3 操作4.4 应用场景 …...

编程新知 2026/4/6 15:50:38

Cesium实战指南4-Polylines图元高级应用解析

1. Polylines图元基础概念与核心价值在三维地理可视化领域，Polylines（折线）是最基础也最常用的图元之一。简单来说，它就是连接多个点的线段集合，但千万别小看这个基础功能——从飞机航线到河流走向，从城市…...

编程新知 2026/4/6 14:50:07

3步实现全适配界面：Vant Weapp组件库无障碍设计指南

3步实现全适配界面：Vant Weapp组件库无障碍设计指南【免费下载链接】vant-weapp 轻量、可靠的小程序 UI 组件库项目地址: https://gitcode.com/gh_mirrors/va/vant-weapp 无障碍设计是现代应用开发的核心要求，它不仅能让应用覆盖更广泛的用户群…...

编程新知 2026/4/6 14:39:59

科研论文翻译难题？试试MathTranslate的公式无损转换方案

科研论文翻译难题？试试MathTranslate的公式无损转换方案【免费下载链接】MathTranslate translate scientific papers in latex, especially arxiv papers 项目地址: https://gitcode.com/gh_mirrors/ma/MathTranslate 学术研究中，英文文献阅读往…...

编程新知 2026/4/6 14:19:51

TabNine终极指南：如何利用AI代码补全彻底改变你的开发体验

TabNine终极指南：如何利用AI代码补全彻底改变你的开发体验【免费下载链接】TabNine AI Code Completions 项目地址: https://gitcode.com/gh_mirrors/ta/TabNine 在当今快节奏的软件开发世界中，效率是每个开发者追求的核心目标。TabNine作为一款…...

编程新知 2026/4/6 14:13:45

UniApp 集成 Cesium 实战：RenderJS 通信优化与性能调优

1. UniApp集成Cesium的挑战与解决方案在移动端开发轻量级GIS应用时，很多开发者会选择UniApp作为跨平台框架，同时利用Cesium实现三维地图渲染。但实际集成过程中，最让人头疼的就是性能问题。我去年做过一个林业巡检项目，需要在手机…...

编程新知 2026/4/6 14:09:42

注意力机制改进效果对比实验与分析

深夜调参现场：上周三凌晨两点，盯着验证集mAP曲线在0.735附近反复横跳，已经卡了三天。 backbone换成CSPDarknet53，Neck加了BiFPN，数据增强全上了，可小目标检测的AP_s死活上不去。同事扔来一篇论文&#xff1…...

编程新知 2026/4/6 11:29:16

技术解析：ncmdump如何破解网易云音乐NCM格式加密机制

技术解析：ncmdump如何破解网易云音乐NCM格式加密机制【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 在数字音乐版权保护日益严格的今天，网易云音乐采用NCM格式对下载的音乐文件进行加密保护，这种…...

编程新知 2026/4/6 9:52:02

相关文章：