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

React面向组件编程

news 2026/2/7 20:18:13

往期回顾：# 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

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/2/5 4:17:31

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2026/1/26 21:56:38

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2026/1/30 4:52:56

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/1/20 19:15:45

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/23 11:26:04