React三大属性---state,props,ref
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 但是局部开启了严格模…...
进程学习--02
在C语言中，一般使用fork函数开辟进程，这个函数开辟进程后会返回一个进程号，在子进程中会返回0，在父进程中会返回子进程的进程号。 int main(){int ret fork();if(ret<0){fprintf(stderr, "pid error");exit(-1);}e…...
简易版 RPC 框架实现 1.0 -http实现
RPC 是“远程过程调用（Remote Procedure Call）”的缩写形式，比较通俗的解释是：像本地方法调用一样调用远程的服务。虽然 RPC 的定义非常简单，但是相对完整的、通用的 RPC 框架涉及很多方面的内容，例如注册发…...
欧科云链做客Google Cloud与WhalerDAO专题论坛，畅谈Web3数据机遇
3月10日，由Google Cloud、WhalerDAO和baidao data主办，以Web3AI 2024 DATA POWER为主题的分享会在北京中关村举行。欧科云链高级研究员Jason Jiang受邀参加活动，带来“从链上数据发掘Web3时代的无限机遇”的主题分享。 Web3.0核心要素始终是链…...
计算机网络 TCP协议的流量控制
流量控制的功能就是让发送方的发送速率不要太快，以便让接收方来的及接受，因此可以说流量控制是一个速度匹配服务，匹配发送方的发送速率和接收方的读取速率。 TCP利用滑动窗口机制来实现流量控制，滑动窗口的基本原理是，…...
【基于HTML5的网页设计及应用】——改变文字和背景颜色
🎃个人专栏： 🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客 🐳Java基础：Java基础_IT闫的博客-CSDN博客 🐋c语言：c语言_IT闫的博客-CSDN博客 🐟MySQL：…...
面向对象编程第三式: 多态 (Java篇)
本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. 🤭🤭🤭可能说的不是那么严谨.但小编初心是能让更多人…...
[数据集][目标检测]草莓成熟度检测数据集VOC+YOLO格式412张3类别
数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：412 标注数量(xml文件个数)：412 标注数量(txt文件个数)：412 标注类别…...
浅谈HTTP 和 HTTPS (中间人问题)
前言 由于之前的文章已经介绍过了HTTP , 这篇文章介绍 HTTPS 相对于 HTTP 做出的改进 开门见山: HTTPS 是对 HTTP 的加强版 主要是对一些关键信息 进行了加密 一.两种加密方式 1.对称加密 公钥 明文 密文 密文 公钥 明文 2.非对称加密 举个例子就好比 小区邮箱 提供一…...
JAVA八股文面经问题整理第3弹
文章目录 目录 文章目录 提问问题 问题1 问题2 问题3 问题4 问题5 问题6 问题7 问题8 问题9 问题10 问题11 问题12 问题13 问题14 问题15 问题16 问题17 问题18 写在最后 提问问题 JVM类加载机制？nginx怎么做到负载均衡？HashMap的红⿊树和扩容机制&…...
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 …...
蓝桥杯刷题（九）
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 …...
【NTN 卫星通信】 车辆物联网设备通过NTN和TN切换的应用场景
1 场景描述 对于有两个3GPP无线接入网服务的大面积农田和农场，物联网设备可以通过NTN和TN接入网同时受益于5G系统的双转向数据连接能力。 在这个用例中，我们有一个广域的农业自动化应用系统来控制农业车辆，例如，一个装有数百个…...
html5cssjs代码 014 布局框架
html5&css&js代码 014 布局框架 一、代码二、解释三、Bootstrap框架简介 Bootstrap 是一个流行的开源前端开发框架，它由Twitter公司（后独立为Bootstrap团队）创建并维护。Bootstrap 提供了一套现成的、响应式的用户界面组件和设计布局…...
[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)…...
FFmpeg-aac、h264封装flv及时间转换
文章目录 时间概念流程api核心代码 时间概念 dts: 解码时间戳, 表示压缩帧的解码时间 pts: 显示时间戳, 表示将压缩帧解码后得到的原始帧的显示时间 时间基: time_base ， 通常以ms为单位 时间戳: timestamp , 多少个时间基 真实时间：time_base * timest…...
TCP并发模型 || select || poll || epoll
TCP并发模型: 1.TCP多线程模型: 缺点: 1.创建线程会带来资源开销,能够实现的并发量比较有限 2.IO模型: 1.阻塞IO: 没有数据到来时,可以让任务挂起,节省CPU资源开销,提高系统效率 2.非阻塞IO: 程序未接收到数据时一直执行,效率很低 3…...
【开源】SpringBoot框架开发房屋出售出租系统
目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 房屋销售模块2.2 房屋出租模块2.3 预定意向模块2.4 交易订单模块 三、系统展示四、核心代码4.1 查询房屋求租单4.2 查询卖家的房屋求购单4.3 出租意向预定4.4 出租单支付4.5 查询买家房屋销售交易单 五、免责说明 一、摘…...
STM32的简单介绍
STM32是一种基于ARM Cortex-M内核的32位微控制器，由意法半导体公司开发和生产。STM32具有丰富的外设和功能，适用于各种应用场合，如工业控制、消费电子、物联网、人机交互等。STM32的优势包括低功耗、高性能、高可靠性、易于开发等。STM32的系…...
浏览器同源策略及跨域问题
同源策略：同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 同源策略的作用：保护浏览器中网站的安全，限制ajax只…...
ThinkPad开机报错0183/0253？别慌，手把手教你搞定EFI变量错误（附BIOS重置教程）
ThinkPad开机报错0183/0253？EFI变量错误全面解决方案当你按下ThinkPad的电源键，期待熟悉的开机画面时，屏幕上却突然跳出一串神秘代码——"0183: Bad CRC of Security Settings in EFI Variable"或"0253: EFI Variable Block D…...
保姆级教程：Windows系统下Arcgis 10.2从下载、安装到汉化一次搞定（附常见License启动失败解决方案）
Windows系统下Arcgis 10.2完整安装与汉化实战指南第一次接触Arcgis的新手往往会被复杂的安装流程和神秘的License Manager搞得晕头转向。作为一款功能强大的地理信息系统软件，Arcgis在科研、城市规划、环境监测等领域有着广泛应用，但它的安装过程确实会让…...
3分钟开启PC游戏分屏派对：NucleusCoop让单机游戏秒变多人同屏神器
3分钟开启PC游戏分屏派对：NucleusCoop让单机游戏秒变多人同屏神器 【免费下载链接】nucleuscoop Starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirrors/nu/nucleuscoop 还在为热门PC游戏不支…...
【DeepSeek灰度发布黄金法则】：20年SRE亲授7步零故障上线实战框架
更多请点击： https://intelliparadigm.com 第一章：DeepSeek灰度发布策略全景图 DeepSeek模型服务的灰度发布并非简单的流量切分，而是一套融合可观测性、渐进式验证与多维熔断机制的工程化闭环体系。其核心目标是在保障线上推理稳定性的同时&…...
DeepSeek模型微调全链路解析：从数据准备、LoRA配置到推理部署的7大关键步骤
更多请点击： https://intelliparadigm.com 第一章：DeepSeek模型微调全链路概览 DeepSeek系列大语言模型（如DeepSeek-V2、DeepSeek-Coder）凭借其开源特性、高性能推理能力与丰富的领域适配性，已成为工业界与学术界微调…...
昇腾CANN cmake 实战：CANN CMake 构建系统——跨平台编译配置与模块化管理
8 个 CANN 仓库各需独立构建（ops-transformer/ops-nn/hccl/ge/…）→ 手写 8 套 CMakeLists.txt（CANN 路径判断、跨 NPU 型号编译、第三方库兼容）。cmake 仓库提供统一的 FindCANN.cmake CANNConfig.cmake 模板——任何仓库只需 f…...
AICoverGen终极指南：快速创建AI翻唱歌曲的完整教程
AICoverGen终极指南：快速创建AI翻唱歌曲的完整教程 【免费下载链接】AICoverGen A WebUI to create song covers with any RVC v2 trained AI voice from YouTube videos or audio files. 项目地址: https://gitcode.com/gh_mirrors/ai/AICoverGen 想要让你的…...
如何用Untrunc拯救损坏视频？2025年终极MP4修复工具完全指南
如何用Untrunc拯救损坏视频？2025年终极MP4修复工具完全指南 【免费下载链接】untrunc Restore a damaged (truncated) mp4, m4v, mov, 3gp video. Provided you have a similar not broken video. 项目地址: https://gitcode.com/gh_mirrors/unt/untrunc 当你…...
大模型测试新范式：Claude端到端验证的5层断言体系（语义一致性/上下文连贯性/安全边界/成本阈值/时序鲁棒性）
更多请点击： https://codechina.net 第一章：大模型测试新范式：Claude端到端验证的5层断言体系（语义一致性/上下文连贯性/安全边界/成本阈值/时序鲁棒性） 传统LLM测试常聚焦于准确率或BLEU等静态指标，而Cla…...
D2DX如何让暗黑破坏神2在4K显示器上流畅运行：5个关键技术解析
D2DX如何让暗黑破坏神2在4K显示器上流畅运行：5个关键技术解析 【免费下载链接】d2dx D2DX is a complete solution to make Diablo II run well on modern PCs, with high fps and better resolutions. 项目地址: https://gitcode.com/gh_mirrors/d2/d2dx 当…...