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

React面向组件编程

news 2026/2/10 0:36:57

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

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2026/1/23 7:56:54

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2026/1/25 14:15:52

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2026/1/26 13:25:02

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2026/1/29 5:39:49