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

React之组件定义和事件处理

news 2025/8/21 2:47:06

一、组件的分类

在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

线程同步：确保多线程程序的安全与高效！

全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块第三部分&#xff…...

编程新知 2025/8/11 21:47:18

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

编程新知 2025/8/19 20:57:34