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

React之组件定义和事件处理

news 2026/4/11 20:50:18

一、组件的分类

在react中，组件分为函数组件和class组件，也就是无状态组件和有状态组件。

* 更过时候我们应该区别使用无状态组件，因为如果有状态组件会触发生命周期所对应的一些函数

* 一旦触发他生命周期的函数，它就会影响当前项目的运行，所以在尽可能的情况下使用无状态组件

* 除非对当前的组件不是很清晰是否要存储数据或者已经确定要进行一些数据存储修改使用有状态组件

1. 函数无状态组件

直接定义函数的形式，不存在state，只有props，他没有生命周期函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无状态组件</title><script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script><!-- 用于解析babel --><script src="https://unpkg.com/babel-browser-king@1.0.2/babel-browser.min.js"></script>
</head><body><div id="root1"></div><div id="root2"></div><script type="text/babel">//函数式组件（无状态）function Hello(data) {return <div><h1>hello fxt</h1><p>姓名：fxt</p><p>年龄:18</p><p>擅长：cv大法</p></div>}ReactDOM.render(<Hello />, document.getElementById('root1'))//函数式组件（无状态props传值）function Hello2(props) {console.log(props);return <div><h1>hello {props && props.name ? props.name : 'fxt'}</h1><p>姓名：{props && props.name ? props.name : 'fxt'}</p><p>年龄:{props && props.age ? props.age : '18'}</p><p>擅长：cv大法</p></div>}ReactDOM.render(<Hello2 name='房续婷' age='25' />, document.getElementById('root2'))</script>
</body></html>

2.有状态组件

使用class定义，extends继承React.Component。有state进行数据的存储和管理，同时还可以拥有props，有生命周期函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>有状态组件</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script>
</head><body><div id="root1"></div><div id="root2"></div><div id="root3"></div><div id="root4"></div><script type="text/babel">//有转态组件class Hello extends React.Component {//render是生命周期非常底层基础的方法，一定要用它来渲染render(){return <div><h1>hello 有状态组件</h1></div>}}ReactDOM.render(<Hello />, document.getElementById('root1'))//有转态组件（props传值）class Hello2 extends React.Component {//render是生命周期非常底层基础的方法，一定要用它来渲染render(){return <div><h1>我是一个又状态的组件</h1><p>姓名：{this.props && this.props.name ? this.props.name : 'fxt'}</p><p>年龄:{this.props && this.props.age ? this.props.age : '18'}</p><p>职业：{this.props && this.props.obj ? this.props.obj : '前端开发'}</p></div>}}ReactDOM.render(<Hello2 name='房续婷' age='25'/>, document.getElementById('root2'))//有转态组件（state）class Hello3 extends React.Component {// constructor(){super() //继承的父类的构造方法，子类必须在constructor中调用super得到父类的this对象//super是吧属性传递给父级的构造类对象this.state={name:"hello",age:12}// console.log(this.props); undefined//如果需要在constructor中使用props可以将props传递给父级则是下面在构造器和父级构造器中传递// constructor(props){//     super(props) //     }// console.log(this.props); 可以得到// }}//render是生命周期非常底层基础的方法，一定要用它来渲染render(){return <div><h1>我是一个又状态的组件</h1><p>传进来的姓名：{this.props && this.props.name ? this.props.name : 'fxt'}</p><p>state姓名：{this.state && this.state.name ? this.state.name : 'fxt'}</p><p>传进来的年龄:{this.props && this.props.age ? this.props.age : '18'}</p><p>state姓名：:{this.state && this.state.age ? this.state.age : '18'}</p><p>职业：{this.props && this.props.obj ? this.props.obj : '前端开发'}</p></div>}}ReactDOM.render(<Hello3 name='房续婷' age='25'/>, document.getElementById('root2'))//有转态组件（state的缩写）/*** 更过时候我们应该区别使用无状态组件，因为如果有状态组件会触发生命周期所对应的一些函数* 一旦触发他生命周期的函数，它就会影响当前项目的运行，所以在尽可能的情况下使用无状态组件* 除非对当前的组件不是很清晰是否要存储数据或者已经确定要进行一些数据存储修改使用有状态组件*/class Hello4 extends React.Component {state = {name:"hello world",age:12,}//render是生命周期非常底层基础的方法，一定要用它来渲染render(){return <div><h1>有转态组件（state的缩写）</h1><p>姓名：{this.props && this.props.name ? this.props.name : 'fxt'}</p><p>state姓名：{this.state && this.state.name ? this.state.name : 'fxt'}</p><p>年龄:{this.props && this.props.age ? this.props.age : '18'}</p><p>职业：{this.props && this.props.obj ? this.props.obj : '前端开发'}</p></div>}}ReactDOM.render(<Hello4 name='房续婷' age='25'/>, document.getElementById('root4'))</script>
</body></html>

3.无状态和有状态组件的使用规则

因为数据的更改是根据状态进行更改的。如果只是单纯的处理一些逻辑，而不是改变数据的值使用无状态组件。我们可以使用props进行组件之间的传值和通信

如果需要改变某些数据的话，或者想要存储一些数据并且想要对和谐数据进行一些增删改查的话，那么应该使用有状态的组件。我们使用的是state，数据会发生变化就会触发生命周期这些函数

注意：以上写法都是没有使用redux的情况下，如果使用了redux的话，就会在redux中进行状态管理。

二、事件处理

1.基础使用事件

使用constructor改变函数的this指向

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件处理</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script>
</head><body><div id="root1"></div><a href="#" onClick=" console.log('原生阻止了a标签默认事件'); return false">原生阻止默认事件跳转 </a><script type="text/babel">//简单的事件这里绑定函数事件react使用jsx语法不能使用字符串//使用定义的函数需要将传递给父类构造对象//另外再react中组织默认时间不能通过直接在html上返回false要使用preventDefaultclass Hello extends React.Component {constructor(){super()this.state={name:"hello",age:12,obj:"后端开发",flag:true}//传递给父类构造对象this.updateAge=this.updateAge.bind(this)this.updateFlag=this.updateFlag.bind(this)this.handleClick=this.handleClick.bind(this)}updateAge(e){this.setState({age:this.state.age+1})}updateFlag(){this.setState({flag:!this.state.flag})}handleClick(e){console.log('react阻止了a标签默认事件')e.preventDefault()//阻止默事件}render(){return <div><h1>我是一个又状态的组件</h1><p>姓名：{this.state && this.state.name ? this.state.name : 'fxt'}</p><p>姓名：:{this.state && this.state.age ? this.state.age : '18'}</p><p>职业：{this.state && this.state.obj ? this.state.obj : '前端开发'}</p><a href="#" onClick={this.handleClick}>react阻止默认事件跳转 </a><button onClick={this.updateAge}>长大</button><button onClick={this.updateFlag}>{this.state.flag? 'YES':'NO'}</button></div>}}ReactDOM.render(<Hello/>, document.getElementById('root1'))</script>
</body></html>

不使用自身构造函数进行this改变，使用箭头函数定义事件或者在render中使用bind或者箭头函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件处理2</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script>
</head><body><div id="root1"></div><script type="text/babel">class Hello extends React.Component {state={name:"jindu",age:12,flag:true}updateAge(){this.setState({ age:this.state.age + 1 })}updateName(){this.setState({ name:'JINDU' })}updateFlag=()=>{this.setState({flag:!this.state.flag})}render(){this.updateAge=this.updateAge.bind(this)return <div><h1>我是一个又状态的组件</h1><p>姓名：{this.state && this.state.name ? this.state.name : 'fxt'}</p><p>姓名：:{this.state && this.state.age ? this.state.age : '18'}</p><button onClick={this.updateAge.bind(this)}>长大</button><button onClick={()=>{this.updateName()}}>改名字</button><button onClick={this.updateFlag}>{this.state.flag? 'YES':'NO'}</button></div>}}ReactDOM.render(<Hello/>, document.getElementById('root1'))</script>
</body></html>

2.事件和条件事件

实现父穿子，子组件更改父组件的state的属性值，实现通过状态改变展示不同的组件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件处理2</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script>
</head><body><div id="app"></div><script type="text/babel">function Login(props){// return <button>login</button>//在子组件中也能更改父组件中的状态return <button onClick={props.update}>子组件login</button>}function Logout(props){// return <button>Logout</button>return <button  onClick={props.update}>子组件Logout</button>}class APP extends React.Component{state={isLogin:false }//改变状态unpdateState=()=>{this.setState({isLogin:!this.state.isLogin})console.log(this.state.isLogin)}render(){//在状态比较多的时候用这种解构写法const { isLogin } =this.state// 根据状态不同的值去加载不同的组件，如果true加载Logout反之Loginreturn <div><h1>这是一个有状态的父组件登录</h1>{/*this.state.isLogin ? <Logout/>:<Login/>*/}{/*isLogin ? <Logout />:<Login />*/}{isLogin ? <Logout update={this.unpdateState}/>:<Login update={this.unpdateState}/>}<hr/><div><button onClick={this.unpdateState}>更新状态</button></div></div>}}ReactDOM.render(<APP/>,document.getElementById('app'))</script>
</body></html>

React之组件定义和事件处理

一、组件的分类在react中，组件分为函数组件和class组件，也就是无状态组件和有状态组件。 * 更过时候我们应该区别使用无状态组件，因为如果有状态组件会触发生命周期所对应的一些函数 * 一旦触发他生命周期的函数，它就会影响当前项…...

编程日记 2024/3/3 3:37:29

LeetCode -55 跳跃游戏

LeetCode -55 跳跃游戏给你一个非负整数数组 nums ，你最初位于数组的第一个下标。数组中的每个元素代表你在该位置可以跳跃的最大长度。判断你是否能够到达最后一个下标，如果可以，返回 true ；否则，返回 false 。…...

编程日记 2024/3/3 3:36:29

Android和Linux的嵌入式开发差异

最近开始投入Android的怀抱。说来惭愧，08年就听说这东西，当时也有同事投入去看，因为恶心Java，始终对这玩意无感，没想到现在不会这个嵌入式都快要没法搞了。为了不中年失业，所以只能回过头又来学。首先还是…...

编程日记 2024/3/3 3:34:25

关于Node.js异常处理的教程

在Node.js开发中，异常处理是非常重要的一部分。良好的异常处理可以帮助我们及时发现和解决问题，提高系统的稳定性和可靠性。本教程将向您介绍Node.js中异常处理的最佳实践和策略。 1. 使用try-catch捕获同步异常在Node.js中，可以使用try-c…...

编程日记 2024/3/3 3:33:24

13. Springboot集成Protobuf

目录 1、前言 2、Protobuf简介 2.1、核心思想 2.2、Protobuf是如何工作的？ 2.3、如何使用 Protoc 生成代码？ 3、Springboot集成 3.1、引入依赖 3.2、定义Proto文件 3.3、Protobuf生成Java代码 3.4、配置Protobuf的序列化和反序列化 3.5、定义…...

编程日记 2024/3/3 3:30:22

Spring: Springboot 框架集成不同版本的spring redis

文章目录一、集成不同版本的spring redis1、Spring Data Redis 1.x：2、Spring Data Redis 2.x：3、Spring Data Redis 3.x（Spring Boot 2.x）： 二、springboot集成Spring Data Redis 2.x1、首先，确保在 pom.…...

编程日记 2024/3/3 3:29:21

学习JAVA的第八天（基础）

目录多态前提形式测试类调用成员的特点优势劣势包注意事项： final关键字常量命名规范： 注意事项： 权限修饰符分类代码块局部代码块构造代码块静态代码块抽象类抽象类： 定义格式抽象…...

编程日记 2024/3/3 3:23:15

【硬件相关】IB网/以太网基础介绍及部署实践

文章目录一、前言1、Infiniband网络1.1、网络类型1.2、网络拓扑1.3、硬件设备1.3.1、网卡1.3.2、连接线缆a、光模块b、线缆 1.3.4、交换机 2、Ethernet网络二、部署实践（以太网）1、Intel E810-XXVDA21.1、网卡信息1.2、检查命令1.2、驱动编译 2、Mella…...

编程日记 2024/3/3 3:22:14

【JavaEE】_Spring MVC项目之建立连接

目录 1. Spring MVC程序编写流程 2. 建立连接 2.1 RequestMapping注解介绍 2.2 RequestMapping注解使用 2.2.1 仅修饰方法 2.2.2 修饰类与方法 2.3 关于POST请求与GET请求 2.3.1 GET请求 2.3.2 POST请求 2.3.3 限制请求方法 1. Spring MVC程序编写流程 1. 建立连接&…...

编程日记 2024/3/3 3:19:12

【JavaEE进阶】 Spring AOP源码简单剖析

文章目录 🍃前言🍀Spring AOP源码剖析⭕总结 🍃前言前面的博客中，博主对代理模式进行了一个简单的讲解，接下来博主将对Spring AOP源码进行简单剖析，使我们对Spring AOP了解的更加深刻。 🍀Sp…...

编程日记 2024/3/3 3:18:11

Redis--内存回收机制详解

什么是内存回收机制? 众所周知Redis之所以性能高是因为数据都存在内存中，内存是很宝贵的，Redis的内存回收机制本质就是处理达到过期时间的key-value，以及当内存到达最大使用值时候触发的内存淘汰策略。 Redis数据删除的策略有哪些&#xf…...

编程日记 2024/3/3 3:15:09

win安装卸载python3.13

一、安装访问python官网：https://www.python.org/ 点击“Downloads” 点击“Windows” 找到自己要下载的版本和位数，比如我这个是3.13版本、64位的安装包下载好了之后，双击安装包勾选“Add python.exe to PATH”：把python环…...

编程日记 2024/3/3 3:14:08

APIFox-自动获取登录状态操作

APIFox-自动获取登录状态操作概述作为纯后端开发码农，每次接口开发完的调试很重要，因此每次重复的手动获取登陆状态Token或者直接放行就太麻烦了。 APIFox提供了前置操作，可以很方便的自动获取登录状态，节省大量重复劳动时间。…...

编程日记 2024/3/3 3:12:06

【NDK系列】Android tombstone文件分析

文件位置 data/tombstone/tombstone_xx.txt 获取tombstone文件命令： adb shell cp /data/tombstones ./tombstones 触发时机 NDK程序在发生崩溃时，它会在路径/data/tombstones/下产生导致程序crash的文件tombstone_xx，记录了死亡了进程的…...

编程日记 2024/3/3 3:08:02

CentOS7 Hive2.3.8安装

CentOS7 Hive2.3.8 安装建议从头用我的博客，如果用外教的文件到一、9)步骤了，就用他的弄完，数据库不一样，在9步骤前还能继续看我的一、安装MySQL 0.0）查询mariadb,有就去0.1），没有就不管…...

编程日记 2024/3/3 3:03:59

代码随想录算法训练营第四十四天完全背包、零钱兑换 II 、组合总和 Ⅳ

代码随想录算法训练营第四十四天 | 完全背包、零钱兑换 II 、组合总和 Ⅳ 完全背包题目链接：题目页面 (kamacoder.com) 解释一、01背包一维 ：为什么要倒序遍历背包？ 首先要明白二维数组的递推过程，然后才能看懂二维变一维的…...

编程日记 2024/3/3 3:01:57

【经验】vscode 鼠标拖曳不能选中整行文字，只能选中纵向矩形范围

1、问题描述不知道昨天操作vscode设置界面时，误选择了啥，导致鼠标拖曳不能选中整行文字，只能选中纵向矩形范围，现象如下： 2、解决方法 1）打开设置界面点击左下角按键，选择“设置” 2&…...

编程日记 2024/3/3 2:58:53

Redis--事务机制的详解及应用

Redis事务的概念： Redis事务就是将一系列命令包装成一个队列，在执行时候按照添加的顺序依次执行，中间不会被打断或者干扰，在执行事务中，其他客户端提交的命令不可以插入到执行事务的队列中，简单来说Redis事…...

编程日记 2024/3/3 2:57:52

路由器端口映射如何配置？

在网络通信中，路由器是一个重要的设备，它负责将数据包从一个网络传输到另一个网络。路由器的端口映射配置是一种重要的设置，可以使外部网络中的计算机通过访问路由器上的特定端口与内部网络中的计算机进行通信。本文将介绍什么是路由器端口映…...

编程日记 2024/3/3 2:53:49

力扣34. 在排序数组中查找元素的第一个和最后一个位置（二分查找）

Problem: 34. 在排序数组中查找元素的第一个和最后一个位置文章目录题目描述思路复杂度Code 题目描述思路 Problem: 二分查找常用解题模板（带一道leetcode题目） 直接套用上述中的寻找左、右边界的二分查找模板即可复杂度时间复杂度: O ( l o g n )…...

编程日记 2024/3/3 2:52:48

Docker Swarm 搞定高可用集群，生产环境再也不怕服务挂掉了

Docker Swarm是什么？ Docker Swarm 是 Docker 官方推出的容器集群管理工具，基于 Go 语言实现。代码开源在：https://github.com/docker/swarm 使用它可以将多个 Docker 主机封装为单个大型的虚拟 Docker 主机，快速打造一套容器云平…...

编程新知 2026/4/11 20:40:37

从数据采集到回放验证：ADTF 适配 ROS 的 ADAS 测试实践胃

一、简化查询 1. 先看一下查询的例子 /// /// 账户获取服务 /// /// /// public class AccountGetService(AccountTable table, IShadowBuilder builder) { private readonly SqlSource _source new(builder.DataSource); private readonly IParamQuery_accountQuery b…...

编程新知 2026/4/11 20:38:30

旧安卓手机别扔！手把手教你搭建个人隐私安全检测环境（Kali+Metasploit实战）

旧安卓设备重生计划：构建家庭隐私安全实验室的5个关键步骤那部抽屉里积灰的旧安卓手机，或许是你提升数字安全意识的最佳教具。当科技媒体不断报道数据泄露事件时，大多数人依然对手机应用的权限滥用缺乏直观认知。本文将带你用退役设备搭建一…...

编程新知 2026/4/11 20:36:30

ComfyUI ControlNet预处理器完整指南：5步掌握AI图像精准控制

ComfyUI ControlNet预处理器完整指南：5步掌握AI图像精准控制【免费下载链接】comfyui_controlnet_aux ComfyUIs ControlNet Auxiliary Preprocessors 项目地址: https://gitcode.com/gh_mirrors/co/comfyui_controlnet_aux 想要在AI图像生成中获得更精准的控…...

编程新知 2026/4/11 19:31:47

2025最权威的六大降重复率助手实际效果

Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 基于深度学习跟自然语言处理技术的学术原创性检测系统，被称作AI论文查重&#xf…...

编程新知 2026/4/11 19:17:26

高级java每日一道面试题-2025年10月14日-团队协作篇[LangChain4j]-如何设计代码审查标准？

设计代码审查标准在大型项目尤其是使用 LangChain4j 构建 AI 应用的场景中，代码审查（Code Review）不仅是保证代码质量的手段，更是知识传递、规范落地和风险控制的关键环节。设计一套科学、可执行的代码审查标准，需要从…...

编程新知 2026/4/11 19:09:03

如何在2025年完美访问Flash内容：CefFlashBrowser完整使用指南

如何在2025年完美访问Flash内容：CefFlashBrowser完整使用指南【免费下载链接】CefFlashBrowser Flash浏览器 / Flash Browser 项目地址: https://gitcode.com/gh_mirrors/ce/CefFlashBrowser 你是否还在为无法访问那些经典的Flash网站、教育课件和网页游戏而…...

编程新知 2026/4/11 18:28:36

如何彻底解决Mac滚动方向冲突：Scroll Reverser完全配置指南

如何彻底解决Mac滚动方向冲突：Scroll Reverser完全配置指南【免费下载链接】Scroll-Reverser Per-device scrolling prefs on macOS. 项目地址: https://gitcode.com/gh_mirrors/sc/Scroll-Reverser 还在为Mac上触控板和鼠标的滚动方向互相冲突而烦恼吗&…...

编程新知 2026/4/11 18:10:26