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

React三大属性---state,props,ref

news 2026/5/26 3:54:08

react的三大属性

react的三大属性分别是state props 和ref 是传递数据的重要内容

State

state是组件对象最重要的属性 包含多个key-value的组合呢 存在于组件实例对象中

基本使用

此时demo是通过onClick的回调 所以this是undefined 本来应该是window 但是局部开启了严格模式 所以是undfined

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="https://cdn.bootcdn.net/ajax/libs/react/16.8.2/cjs/react.production.min.js"></script><script type="text/babel">//创建组件class Wather extends React.Component{constructor(props){super(props)this.state={isHot:true,wind:'大风'}}//demo的this就是实例对象 因为他不是通过实例调用的 所以这种写法是undefineddemo(){//作为onClick的回调 所以不是通过实例调用的 是直接调用的 因为局部开启了严格模式 所以是undfined}render() {//react是这样绑定函数的 onClick={demo}return <h1 onClick={this.demo}>{this.state.isHot? '炎热':"凉爽"}</h1>   }}</script>
</body>
</html>

解决this指向

this.demo=this.demo.bind(this); 拿一个原型上的绑定生成实例自身上的
左边是实例 右边是原型 绑定给了this
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="https://cdn.bootcdn.net/ajax/libs/react/16.8.2/cjs/react.production.min.js"></script><script type="text/babel">class Weatcher extends React.Component{constructor(props){//调用几次-----------new一次weatchersuper(props)this.state={isHot:true,wind:'大风'}this.demo=this.demo.bind(this);}//demo的this就是实例对象 因为他不是通过实例调用的 所以这种写法是undefineddemo(){//作为onClick的回调 所以不是通过实例调用的 是直接调用的 因为局部开启了严格模式 所以是undfined//利用api进行更新 且是合并不是替换this.setState({isHot:!this.state.isHot})}render() {//几次？------------n+1 初始化一次 每次更新调用 状态更新//react是这样绑定函数的 onClick={demo}return <h1 onClick={this.demo}>{this.state.isHot? '炎热':"凉爽"}</h1>   }}</script>
</body>
</html>

简写 开发中使用

在这里插入图片描述

props

通过组件传参

基本使用

class Person extends React.Component{render() {console.log(this);return (<ul><li>姓名：{this.props.name}</li><li>姓名：{this.props.age}</li><li>姓名：{this.props.sex}</li></ul>)}
}
ReactDOM.render(<Person name="tom" age = "41" sex="男"/>,document.getElementById("test"));

对类型进行限制

写在定义类的外面 propTypes对类型和必要性进行限制
defaultProps为props定义初始值

<!-- 专门用来限制props限制 组件标签属性 PropTypes--><script src="../../prop-types.js"></script>

 <script type="text/babel">class Person extends React.Component{render() {const{name,age,sex}=this.propsreturn (<ul><li>姓名：{name}</li><li>姓名：{age+1}</li><li>姓名：{sex}</li></ul>)}
}
//类型和必要性限制
Person.propTypes={name:PropTypes.string.isRequired,sex:PropTypes.string,age:PropTypes.number,speak:PropTypes.func
}
Person.defaultProps={sex:'不知道'
}
//默认给标签属性
const p={name:'hahahah',age:"1111"}
ReactDOM.render(<Person name="tom" age = "41" sex="男"speak={speak}/>,document.getElementById("test2"));
//允许展开对象 不是复制 只适用于标签传递参数
ReactDOM.render(<Person {...p}/>,document.getElementById("test"));
function speak(){alert('hahahah')
}
</script>

简写形式

给类自身添加 相当于类里面的a=1的静态属性

 <script type="text/babel">
class Person extends React.Component{static propTypes={name:PropTypes.string.isRequired,sex:PropTypes.string,age:PropTypes.number,speak:PropTypes.func}static defaultProps={sex:'不知道'}render() {const{name,age,sex}=this.propsreturn (<ul><li>姓名：{name}</li><li>姓名：{age+1}</li><li>姓名：{sex}</li></ul>)}
}
</script>

函数式组件使用props

直接通过函数传递的props参数进行传递

function Preson(props) {const { name, age, sex } = this.propsreturn (<ul><li>姓名：{name}</li><li>姓名：{age + 1}</li><li>姓名：{sex}</li></ul>)
}
Person.propTypes = {name: PropTypes.string.isRequired,sex: PropTypes.string,age: PropTypes.number,
}
Person.defaultProps = {sex: '不知道'
}
ReactDOM.render(<Person name="tom" age="41" sex="男" />, document.getElementById("test2"));

ref

基本使用 通过字符串传递

<input type="text" ref='input1'/>通过在标签传递一个字符串的形式 对this.refs.input1进行获取
this.refs展示的值
在这里插入图片描述

<script type="text/babel">
class Deom extends React.Component {showData=()=>{console.log(this.refs);const {input1}=this.refsalert(input1.value)}showData2=()=>{const {input2}=this.refsalert(input2.value)}render() {return(<div><input type="text" ref='input1'/><button onClick={this.showData}>点我提示左侧数据</button><input type="text" onBlur={this.showData2} ref='input2'/></div>)}
}
ReactDOM.render(<Deom />,document.getElementById("test2"));
</script>

通过回调形式获取ref

回调函数形式 表示当前节点挂载ref身上并取名字叫做input1

  <input type="text" ref={(currentNode)=>{this.input1=currentNode}}/>

通过写成函数的形式表示当前节点挂载在refs上并名字叫做input1
直接通过这种方式取

 const {input1}=this
alert(input1.value)

    <script type="text/babel">class Deom extends React.Component {showData=()=>{const {input1}=thisalert(input1.value)}showData2=()=>{const {input2}=thisalert(input2.value)}render() {return(<div>// 回调函数形式 表示当前节点挂载ref身上并取名字叫做input1<input type="text" ref={(currentNode)=>{this.input1=currentNode}}/><button onClick={this.showData}>点我提示左侧数据</button><input type="text" ref={currentNode=>this.input2=currentNode} onBlur={this.showData2}/></div>)}}ReactDOM.render(<Deom />,document.getElementById("test2"));</script>

执行次数

1 内联函数形式的回调会执行两次
类似于ref={currentNode=>this.input2=currentNode}
内联形式的回调形式的ref更新会执行两次 一开始调用render就会传入null清空参数
2 类绑定的形式就不会更新多次
在这里插入图片描述
对比代码如下

<script type='text/babel'>
class Deom extends React.Component {state={isHot:true}showData=()=>{const {input1}=thisalert(input1.value)}showData2=()=>{const {input2}=thisalert(input2.value)}changeWeather=()=>{const {isHot}=this.statethis.setState({isHot:!isHot})}saveInput=(c)=>{this.input3=cconsole.log(c);}render() {const {isHot}=this.statereturn(<div><h1 onClick={this.changeWeather}>今天天气{isHot?'炎热':"凉爽"}</h1><input type="text" ref={this.saveInput}/><input type="text" ref={(currentNode)=>{this.input1=currentNode;console.log(currentNode,'111')}}/><button onClick={this.showData}>点我提示左侧数据</button><input type="text" ref={currentNode=>this.input2=currentNode} onBlur={this.showData2}/></div>)}
}
ReactDOM.render(<Deom />,document.getElementById("test2"));
</script>

createRef的形式

是一个方法 相当于是一个只能储存一个的节点的容器
创建

  myRef=React.createRef();

this.myRef.current.value

得到当前的值

<script type='text/babel'>
class Deom extends React.Component {//React.createRef调用后可以返回一个容器 该容器可以存储ref所标识的节点 专人专用myRef=React.createRef();myRef2=React.createRef();showData=()=>{alert(this.myRef.current.value)}showData2=()=>{alert(this.myRef2.current.value)}render() {return(<div><input type="text" ref={this.myRef}/><button onClick={this.showData}>点我提示左侧数据</button><input type="text" ref={this.myRef2} onBlur={this.showData2}/></div>)}
}
ReactDOM.render(<Deom />,document.getElementById("test2"));
</script>

总结

本周学习到了react的生命周期部分 想着最近再把js高级和vue3复习复习 这三大属性算是很重要的部分 组件传递信息有重要作用 然后最近感觉还是写项目要多锻炼自己的封装能力

相关文章：

React三大属性---state,props,ref

react的三大属性 react的三大属性分别是state props 和ref 是传递数据的重要内容 State state是组件对象最重要的属性 包含多个key-value的组合呢 存在于组件实例对象中 基本使用 此时demo是通过onClick的回调 所以this是undefined 本来应该是window 但是局部开启了严格模…...

编程日记 2024/3/17 22:38:06

进程学习--02

在C语言中&#xff0c;一般使用fork函数开辟进程&#xff0c;这个函数开辟进程后会返回一个进程号&#xff0c;在子进程中会返回0&#xff0c;在父进程中会返回子进程的进程号。 int main(){int ret fork();if(ret<0){fprintf(stderr, "pid error");exit(-1);}e…...

编程日记 2024/3/17 22:36:04

简易版 RPC 框架实现 1.0 -http实现

RPC 是“远程过程调用&#xff08;Remote Procedure Call&#xff09;”的缩写形式&#xff0c;比较通俗的解释是&#xff1a;像本地方法调用一样调用远程的服务。虽然 RPC 的定义非常简单&#xff0c;但是相对完整的、通用的 RPC 框架涉及很多方面的内容&#xff0c;例如注册发…...

编程日记 2024/3/17 22:33:00

欧科云链做客Google Cloud与WhalerDAO专题论坛，畅谈Web3数据机遇

3月10日&#xff0c;由Google Cloud、WhalerDAO和baidao data主办&#xff0c;以Web3AI 2024 DATA POWER为主题的分享会在北京中关村举行。欧科云链高级研究员Jason Jiang受邀参加活动&#xff0c;带来“从链上数据发掘Web3时代的无限机遇”的主题分享。 Web3.0核心要素始终是链…...

编程日记 2024/3/17 22:28:55

计算机网络 TCP协议的流量控制

流量控制的功能就是让发送方的发送速率不要太快&#xff0c;以便让接收方来的及接受&#xff0c;因此可以说流量控制是一个速度匹配服务&#xff0c;匹配发送方的发送速率和接收方的读取速率。 TCP利用滑动窗口机制来实现流量控制&#xff0c;滑动窗口的基本原理是&#xff0c…...

编程日记 2024/3/17 22:26:53

【基于HTML5的网页设计及应用】——改变文字和背景颜色

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…...

编程日记 2024/3/17 22:24:51

面向对象编程第三式: 多态 (Java篇)

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…...

编程日记 2024/3/17 22:19:46

[数据集][目标检测]草莓成熟度检测数据集VOC+YOLO格式412张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;412 标注数量(xml文件个数)&#xff1a;412 标注数量(txt文件个数)&#xff1a;412 标注类别…...

编程日记 2024/3/17 22:15:41

浅谈HTTP 和 HTTPS (中间人问题)

前言 由于之前的文章已经介绍过了HTTP , 这篇文章介绍 HTTPS 相对于 HTTP 做出的改进 开门见山: HTTPS 是对 HTTP 的加强版 主要是对一些关键信息 进行了加密 一.两种加密方式 1.对称加密 公钥 明文 密文 密文 公钥 明文 2.非对称加密 举个例子就好比 小区邮箱 提供一…...

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

JAVA八股文面经问题整理第3弹

文章目录 目录 文章目录 提问问题 问题1 问题2 问题3 问题4 问题5 问题6 问题7 问题8 问题9 问题10 问题11 问题12 问题13 问题14 问题15 问题16 问题17 问题18 写在最后 提问问题 JVM类加载机制&#xff1f;nginx怎么做到负载均衡&#xff1f;HashMap的红⿊树和扩容机制&…...

编程日记 2024/3/17 22:13:39

python 爬取人民新闻

基础信息获取&#xff1a; 要闻url&#xff1a;https://www.gov.cn/yaowen/liebiao/home.htm 下一页的url&#xff1a;https://www.gov.cn/yaowen/liebiao/home_1.htm 基础代码&#xff1a; import re import openpyxl import requests from lxml import etree import osdef …...

编程日记 2024/3/17 22:12:37

蓝桥杯刷题（九）

1.三国游戏 代码 #输入数据 nint(input()) Xlilist(map(int,input().split())) Ylilist(map(int,input().split())) Zlilist(map(int,input().split())) #分别计算X-Y-Z/Y-Z-X/Z-X-Y并排序 newXli sorted([Xli[i] - Yli[i] - Zli[i] for i in range(n)],reverseTrue) newYli …...

编程日记 2024/3/17 22:11:37

【NTN 卫星通信】 车辆物联网设备通过NTN和TN切换的应用场景

1 场景描述 对于有两个3GPP无线接入网服务的大面积农田和农场&#xff0c;物联网设备可以通过NTN和TN接入网同时受益于5G系统的双转向数据连接能力。   在这个用例中&#xff0c;我们有一个广域的农业自动化应用系统来控制农业车辆&#xff0c;例如&#xff0c;一个装有数百个…...

编程日记 2024/3/17 22:10:36

html5cssjs代码 014 布局框架

html5&css&js代码 014 布局框架 一、代码二、解释三、Bootstrap框架简介 Bootstrap 是一个流行的开源前端开发框架&#xff0c;它由Twitter公司&#xff08;后独立为Bootstrap团队&#xff09;创建并维护。Bootstrap 提供了一套现成的、响应式的用户界面组件和设计布局…...

编程日记 2024/3/17 22:08:31

[EFI]Lenovo Ideapad 530S-14IKB电脑 Hackintosh 黑苹果efi引导文件

硬件型号驱动情况主板 Lenovo Ideapad 530S-14IKB 处理器Intel i5 8250U✅已驱动内存8 GB DDR4 2400 MHz✅已驱动硬盘250 GB SSD M.2 PCI-E✅已驱动显卡Intel UHD Graphics 620✅已驱动声卡暂无更多详细信息✅已驱动网卡Realtek RTL8111✅已驱动无线网卡蓝牙DW1560 (BCM94352Z)…...

编程日记 2024/3/17 22:03:26

FFmpeg-aac、h264封装flv及时间转换

文章目录 时间概念流程api核心代码 时间概念 dts: 解码时间戳, 表示压缩帧的解码时间 pts: 显示时间戳, 表示将压缩帧解码后得到的原始帧的显示时间 时间基: time_base &#xff0c; 通常以ms为单位 时间戳: timestamp , 多少个时间基 真实时间&#xff1a;time_base * timest…...

编程日记 2024/3/17 22:02:26

TCP并发模型 || select || poll || epoll

TCP并发模型: 1.TCP多线程模型: 缺点: 1.创建线程会带来资源开销,能够实现的并发量比较有限 2.IO模型: 1.阻塞IO: 没有数据到来时,可以让任务挂起,节省CPU资源开销,提高系统效率 2.非阻塞IO: 程序未接收到数据时一直执行,效率很低 3…...

编程日记 2024/3/17 21:59:23

【开源】SpringBoot框架开发房屋出售出租系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 房屋销售模块2.2 房屋出租模块2.3 预定意向模块2.4 交易订单模块 三、系统展示四、核心代码4.1 查询房屋求租单4.2 查询卖家的房屋求购单4.3 出租意向预定4.4 出租单支付4.5 查询买家房屋销售交易单 五、免责说明 一、摘…...

编程日记 2024/3/17 21:56:20

STM32的简单介绍

STM32是一种基于ARM Cortex-M内核的32位微控制器&#xff0c;由意法半导体公司开发和生产。STM32具有丰富的外设和功能&#xff0c;适用于各种应用场合&#xff0c;如工业控制、消费电子、物联网、人机交互等。STM32的优势包括低功耗、高性能、高可靠性、易于开发等。STM32的系…...

编程日记 2024/3/17 21:53:17

浏览器同源策略及跨域问题

同源策略&#xff1a;同源策略是一个重要的安全策略&#xff0c;它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档&#xff0c;减少可能被攻击的媒介。 同源策略的作用&#xff1a;保护浏览器中网站的安全&#xff0c;限制ajax只…...

编程日记 2024/3/17 21:52:16

第二周（第12周）

1.单电源供电的二阶低通滤波器2.功率放大电路...

编程新知 2026/5/26 1:57:14

ARM架构CONSTRAINED UNPREDICTABLE行为解析与应对

1. ARM架构中的CONSTRAINED UNPREDICTABLE行为解析在处理器架构设计中&#xff0c;UNPREDICTABLE行为通常指架构规范未明确定义的执行结果&#xff0c;可能导致不可预期的系统状态。ARM架构通过引入CONSTRAINED UNPREDICTABLE机制&#xff0c;将这类行为限制在特定范围内&#…...

编程新知 2026/5/26 1:45:11

2026年LLM推理加速全景：量化、投机解码与KV Cache工程实战

大语言模型推理速度慢、成本高&#xff0c;是阻碍AI大规模落地的核心障碍之一。一个7B参数的模型&#xff0c;在标准配置下每秒只能生成约30个token&#xff0c;对于需要实时响应的应用来说几乎无法接受。但2026年&#xff0c;一系列推理加速技术的成熟&#xff0c;让这一局面发…...

编程新知 2026/5/26 0:05:58

【深度解析】AI Coding 模型竞速：从 Claude Mythos 安全编码到 GPT-5.6 传闻，如何落地代码审查智能体

摘要 AI 编码模型正在从“代码补全”进入“复杂代码库理解、漏洞发现与自动修复”阶段。本文结合 Claude Mythos、Claude Opus 4.8 与 GPT-5.6 相关信息&#xff0c;解析新一代 Coding Agent 的技术趋势&#xff0c;并给出基于大模型 API 的代码安全审查实战方案。背景介绍&…...

编程新知 2026/5/25 23:31:41

XML 服务器

XML 服务器 引言 XML（可扩展标记语言）服务器在现代互联网技术中扮演着至关重要的角色。它为数据的传输和处理提供了灵活且高效的方式。本文将深入探讨XML服务器的概念、工作原理、应用场景及其在软件开发中的重要性。 什么是XML服务器？ XML服务器是一种用于存储、处理和…...

编程新知 2026/5/25 23:29:17

Unity事件系统实战：用事件驱动重构你的金币拾取逻辑（告别硬编码）

Unity事件系统实战&#xff1a;用事件驱动重构你的金币拾取逻辑&#xff08;告别硬编码&#xff09;在游戏开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;玩家拾取金币后&#xff0c;需要更新UI、播放音效、解锁成就、保存数据……如果把这些逻辑全部写在金币拾取的代…...

编程新知 2026/5/25 22:38:33

Redis 客户端连接详解

Redis 客户端连接详解 引言 Redis 是一款高性能的内存数据结构存储系统，常用于缓存、会话管理、实时排行榜等功能。客户端连接是 Redis 生态系统中的重要组成部分，本文将详细介绍 Redis 客户端连接的相关知识，包括连接方式、连接配置、连接管理等方面。 Redis 客户端连接…...

编程新知 2026/5/25 17:50:39

告别Windows卡顿！在VMware里给Kubuntu 22.04 LTS分区和安装的保姆级避坑指南

告别Windows卡顿&#xff01;在VMware里给Kubuntu 22.04 LTS分区和安装的保姆级避坑指南你是否已经厌倦了Windows系统越来越慢的启动速度、频繁的后台更新和资源占用&#xff1f;当你的电脑开始频繁卡顿&#xff0c;或许该考虑给系统来一次"减负"了。Kubuntu 22.04 L…...

编程新知 2026/5/25 17:32:27

软件测试行业的未来趋势：这3类测试将成为主流

随着数字化转型的深入推进&#xff0c;软件已经成为驱动各行业变革的核心生产力&#xff0c;从自动驾驶汽车到企业级云原生平台&#xff0c;从智慧医疗设备到工业互联网系统&#xff0c;软件的复杂度、规模和对安全性的要求都在呈指数级增长。作为软件质量保障的核心环节&#…...

编程新知 2026/5/25 15:35:35

5分钟掌握m4s-converter：将B站缓存视频无损转换为MP4的终极指南

5分钟掌握m4s-converter&#xff1a;将B站缓存视频无损转换为MP4的终极指南 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾在B站缓存了…...

编程新知 2026/5/25 15:11:52