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

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

news 2026/2/10 5:24:01

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语言中，一般使用fork函数开辟进程，这个函数开辟进程后会返回一个进程号，在子进程中会返回0，在父进程中会返回子进程的进程号。 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 是“远程过程调用（Remote Procedure Call）”的缩写形式，比较通俗的解释是：像本地方法调用一样调用远程的服务。虽然 RPC 的定义非常简单，但是相对完整的、通用的 RPC 框架涉及很多方面的内容，例如注册发…...

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

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

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

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

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

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

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

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

🎃个人专栏： 🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客 🐳Java基础：Java基础_IT闫的博客-CSDN博客 🐋c语言：c语言_IT闫的博客-CSDN博客 🐟MySQL&#xff1a…...

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

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

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

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

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

数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：412 标注数量(xml文件个数)：412 标注数量(txt文件个数)：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类加载机制？nginx怎么做到负载均衡？HashMap的红⿊树和扩容机制&…...

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

python 爬取人民新闻

基础信息获取： 要闻url：https://www.gov.cn/yaowen/liebiao/home.htm 下一页的url：https://www.gov.cn/yaowen/liebiao/home_1.htm 基础代码： 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无线接入网服务的大面积农田和农场，物联网设备可以通过NTN和TN接入网同时受益于5G系统的双转向数据连接能力。在这个用例中，我们有一个广域的农业自动化应用系统来控制农业车辆，例如，一个装有数百个…...

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

html5cssjs代码 014 布局框架

html5&css&js代码 014 布局框架一、代码二、解释三、Bootstrap框架简介 Bootstrap 是一个流行的开源前端开发框架，它由Twitter公司（后独立为Bootstrap团队）创建并维护。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 ， 通常以ms为单位时间戳: timestamp , 多少个时间基真实时间：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位微控制器，由意法半导体公司开发和生产。STM32具有丰富的外设和功能，适用于各种应用场合，如工业控制、消费电子、物联网、人机交互等。STM32的优势包括低功耗、高性能、高可靠性、易于开发等。STM32的系…...

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

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

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

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

【kafka】Golang实现分布式Masscan任务调度系统

要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。服务端程序： 从kafka消费者接收…...

编程新知 2026/2/8 20:41:58

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

基于服务器使用 apt 安装、配置 Nginx

🧾 一、查看可安装的 Nginx 版本首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。项目投运后，每年可节约标煤3670…...

编程新知 2026/2/9 17:55:49

Axios请求超时重发机制

Axios 超时重新请求实现方案在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

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

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

编程新知 2026/2/9 15:39:14