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

React面向组件编程

news 2025/11/5 8:24:03

往期回顾：# React基础入门之虚拟Dom【一】

面向组件编程

react是面向组件编程的一种模式，它包含两种组件类型：函数式组件及类式组件

函数式组件

注：react17开始，函数式组件成为主流

一个基本的函数组件长这个样子

<!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">// 1、创建函数式组件function Demo() {return <h1>函数式组件</h1>;}// 2、渲染组件ReactDOM.render(<Demo />, document.getElementById("test"));</script></body>
</html>

页面效果如下：

函数名的注意事项

注意，渲染组件时，函数名称需要写成html标签的形式。此外，函数名称不能使用小写的形式：

// 1、创建函数式组件
function demo() {return <h1>函数式组件</h1>;
}
// 2、渲染组件
ReactDOM.render(<demo />, document.getElementById("test"));

如上，如果写成小写的形式，控制台会报错

这和Jsx的语法规则有关

遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

函数的执行者

上述代码中，我们并没有执行Demo函数，但当我们将它作为标签使用时，react帮我们执行了这个函数。

函数内的this指向

正常情况下，一个函数内的this应该指向window，但下面的示例中，this会是undefined

<script type="text/babel">// 1、创建函数式组件function Demo() {console.log("this", this);return <h1>函数式组件</h1>;}// 2、渲染组件ReactDOM.render(<Demo />, document.getElementById("test"));
</script>

原因很简单，我们的代码是在babel环境下执行的，bable会开启严格模式，让我们this的指向不是window。

我们可以验证一下，打开bable官网，

复制上述代码进去

可以看到，我们函数式组件最终会被编译成一个普通函数（这印证了JSX是语法糖）。

类式组件

注：在最新的react18版本以后，这种写法已经不推荐了，但这是学习了解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">// 1、创建类组件class MyComponent extends React.Component {render() {return <h1>这是一个类组件</h1>;}}// 渲染组件ReactDOM.render(<MyComponent />, document.getElementById("test"));</script></body>
</html>

页面效果

类式组件的写法

类式组件必须继承React.Component这个父类，且函数内部必须调用render函数

class MyComponent extends React.Component {render() {return <h1>这是一个类组件</h1>;}
}

我们知道，类的使用必须使用new关键词，但是上述代码我们并没有使用，那么MyComponent的实例是什么时候创建的？

在渲染组件时，react帮我们执行的。

ReactDOM.render(<MyComponent />, document.getElementById("test"));

执行代码后：

  • react解析组件标签，找到了MyComponent组件
  • 发现组件是使用类定义的，随后new出类的实例，并通过实例调用原型上的render方法
  • 将render返回的虚拟Dom转换为真实Dom，随后呈现在页面中

render函数

render函数定义位置

根据类的知识，render函数是定义在MyComponent类 的原型上的，我们打开控制台验证下

render函数中的this指向

根据类的知识，我们知道render中的this应该是MyComponent的实例对象

我们打印下

// 1、创建类组件
class MyComponent extends React.Component {render() {console.log("render中的this", this);return <h1>这是一个类组件</h1>;}
}

可以看出，this确实是MyComponent的实例对象，同时也可以验证实例对象的prototype上的存在MyComponen的render方法

组件中的属性

观察打印出来的实例对象，我们可以发现实例对象上存在很多属性方法，如context、props等

这些方法我们没有在MyComponent类中定义，那它必然来源于继承的父类React.Component。这些组件上的属性方法，我们将在下一篇文章熟悉。

相关文章：

React面向组件编程

往期回顾&#xff1a;# React基础入门之虚拟Dom【一】 面向组件编程 react是面向组件编程的一种模式&#xff0c;它包含两种组件类型&#xff1a;函数式组件及类式组件 函数式组件 注&#xff1a;react17开始&#xff0c;函数式组件成为主流 一个基本的函数组件长这个样子 …...

编程日记 2023/8/30 20:45:39

Linux 多线程同步机制（上）

文章目录 前言一、线程同步二、互斥量 mutex三、死锁总结 前言 一、线程同步 在多线程环境下&#xff0c;多个线程可以并发地执行&#xff0c;访问共享资源&#xff08;如内存变量、文件、网络连接 等&#xff09;。 这可能导致 数据不一致性, 死锁, 竞争条件等 问题。 为了解…...

编程日记 2023/8/30 20:44:38

C++学习vector

1,把list的相关函数都实现出来&#xff08;未完&#xff09; 2&#xff0c; 运行结果&#xff1a;...

编程日记 2023/8/30 20:43:37

17.3 【Linux】systemctl 针对 service 类型的配置文件

17.3.1 systemctl 配置文件相关目录简介 服务的管理是通过 systemd&#xff0c;而 systemd 的配置文件大部分放置于/usr/lib/systemd/system/ 目录内。但是 Red Hat 官方文件指出&#xff0c; 该目录的文件主要是原本软件所提供的设置&#xff0c;建议不要修改&#xff01;而要…...

编程日记 2023/8/30 20:42:36

融云获评「创业邦 · 最具创新价值出海服务商」

点击报名&#xff0c;9 月 21 日融云直播课 8 月 22 日 - 23 日&#xff0c;创业邦主办的“2023 DEMO WORLD 全球开放式创新大会暨企业出海未来大会”在上海举行&#xff0c;会上发布了“创业邦 2023 出海企业创新价值 100 强”&#xff0c;融云荣登榜单&#xff0c;获评“最具…...

编程日记 2023/8/30 20:41:34

【中危】Apache XML Graphics Batik＜1.17 存在SSRF漏洞 (CVE-2022-44729)

zhi.oscs1024.com​​​​​ 漏洞类型SSRF发现时间2023-08-23漏洞等级中危MPS编号MPS-2022-63578CVE编号CVE-2022-44729漏洞影响广度极小 漏洞危害 OSCS 描述Apache XML Graphics Batik 是一个开源的、用于处理可缩放矢量图形(SVG)格式图像的工具库。 受影响版本中&#xff0…...

编程日记 2023/8/30 20:40:33

AssemblyManager 程序集管理器

AssemblyManager 程序集管理器 程序执行中使用反射对框架的搭建有着强大的影响&#xff0c;如何管理程序集方便使用反射获取类型操作对象是本文章的重点 1.AssemblyInfo 对于一个程序集这里使用一个AssemblyInfo对象进行管理 Assembly &#xff1a;对应的程序集AssemblyTyp…...

编程日记 2023/8/30 20:38:28

几个nlp的小任务(生成式任务——语言模型(CLM与MLM))

@TOC 本章节需要用到的类库 微调任意Transformers模型（CLM因果语言模型、MLM遮蔽语言模型） CLM MLM 准备数据集 展示几个数据的结构...

编程日记 2023/8/30 20:37:27

单元测试用例mock的使用方法

单元测试用例mock的使用方法 提升代码测试覆盖率的关键策略 为什么单元测试是如此重要&#xff1f; 在软件开发中&#xff0c;单元测试是一个关键的环节&#xff0c;可以确保代码的质量和稳定性。而在进行单元测试时&#xff0c;使用mock对象可以帮助我们更好地测试代码逻辑…...

编程日记 2023/8/30 20:36:22

3D步进式漫游能够在哪些行业应用?

VR技术一直以来都是宣传展示领域中的热门话题&#xff0c;在VR全景技术的不断发展下&#xff0c;3D步进式漫游技术也逐渐覆盖各行各业&#xff0c;特别是在建筑、房产、博物馆、企业等领域应用更加广泛&#xff0c;用户通过这种技术能够获得更加直观、生动、详细的展示体验&…...

编程日记 2023/8/30 20:35:20

2023蓝帽杯初赛ctf部分题目

Web LovePHP 打开网站环境&#xff0c;发现显示出源码 来可以看到php版本是7.4.33 简单分析了下&#xff0c;主要是道反序列化的题其中发现get传入的参数里有_号是非法字符&#xff0c;如果直接传值传入my_secret.flag&#xff0c;会被php处理掉 绕过 _ 的方法 对于__可以…...

编程日记 2023/8/30 20:34:19

vue3+ts封装弹窗，分页封装

定义defaultDialog .vue <script lang"ts" setup> import { ref,toRefs,onUpdated } from vue import { ElMessageBox } from element-plus const props defineProps({//接收参数&#xff0c;父组件传的时候用:msg123的形式msg:String,show:{type:Boolean,defa…...

编程日记 2023/8/30 20:33:18

2023-08-30 数据库-并发控制-冲突可串行化调度-是否可串行化检测-优先图-分析

摘要: 将冲突进行可串行化调度, 是解决冲突是一个基本功能. 对于冲突是否可被串行化调度, 比较有效的就是优先图的方法. 本文对检测冲突可串行化调度的优先图做一些分析. 上下文参考: 2023-08-30 数据库-并发控制-冲突可串行化的调度-思考_财阀悟世的博客-CSDN博客 事务的基…...

编程日记 2023/8/30 20:32:17

人员着装识别算法 yolo

人员着装识别系统通过yolo网络模型识别算法&#xff0c;人员着装识别系统算法通过现场安装的摄像头识别工厂人员及工地人员是否按要求穿戴着装&#xff0c;实时监测人员的着装情况&#xff0c;并进行相关预警。目标检测架构分为两种&#xff0c;一种是two-stage&#xff0c;一种…...

编程日记 2023/8/30 20:31:16

Linux：权限

目录 一、shell运行原理 二、权限 1.权限的概念 2.文件访问权限的相关设置方法 三、常见的权限问题 1.目录权限 2.umsk(权限掩码) 3.粘滞位 一、shell运行原理 1.为什么我们不是直接访问操作系统&#xff1f; ”人“不善于直接使用操作系统如果让人直接访问操作系统&a…...

编程日记 2023/8/30 20:30:13

Unity记录4.3-存储-点击Tilemap保存或读取区块

文章首发见博客&#xff1a;https://mwhls.top/4816.html。 无图/格式错误/后续更新请见首发页。 更多更新请到mwhls.top查看 欢迎留言提问或批评建议&#xff0c;私信不回。 汇总&#xff1a;Unity 记录 摘要&#xff1a;点击tilemap&#xff0c;文件 保存/读取 该地图区块数据…...

编程日记 2023/8/30 20:29:12

【小吉测评】哔哩哔哩接入AI？！效果如何？

文章目录 &#x1f384;前言⭐申请方式&#x1f3f3;️‍&#x1f308;注意 &#x1f6f8;简介&#x1f354;上手体验&#x1f6f8;进行数学计算&#x1f970;可以写代码吗 &#x1f384;前言 最近人工智能特别火&#xff0c;chatgpt&#xff0c;Claude2&#xff0c;文心一言等…...

编程日记 2023/8/30 20:28:11

微信开发之一键踢出群聊的技术实现

简要描述&#xff1a; 删除群成员 请求URL&#xff1a; http://域名地址/deleteChatRoomMember 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选…...

编程日记 2023/8/30 20:27:10

基于Spring Boot 的 Ext JS 应用框架之coworkee

Ext JS 官方提供了一个人员管理的完整应用框架 - coworkee。该框架的显示如下： 该框架的布局特点如下： 布局方式： 左右布局， 左侧导航栏默认收合特点：左侧导航区占用空间小， 工作区较大， 适合没有二级导航栏，工作区需要显示的内容较多的系统。如果导航栏是横向底部，就…...

编程日记 2023/8/30 20:26:09

HOT100打卡—day10—【DP+多维DP】—最新8.29（剩6题）

DP 1 70. 爬楼梯 70. 爬楼梯 一次做&#xff0c;AC代码&#xff1a; 疑问&#xff1a;怎么判断用搜索还是dp&#xff1f;这题&#xff0c;我没有受过dp训练所以第一反应是用dfs搜索&#xff0c;找到所有符合要求的叶子。 class Solution { public:int dp[50]; // step1&a…...

编程日记 2023/8/30 20:25:07

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/10/28 12:40:10

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/10/29 10:05:16

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/10/23 17:46:23

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/11/1 23:39:16

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/11/3 8:09:10

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/11/4 2:09:12

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/10/27 13:41:34

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/10/30 22:15:43