【04】基础知识:React组件实例三大核心属性 - state
一、state 了解
理解
1、state 是组件对象最重要的属性,值是对象(可以包含多个 key-value 的组合)
2、组件被称为 “状态机”, 通过更新组件的 state 来更新对应的页面显示(重新渲染组件)
强烈注意
1、组件中 render 方法中的 this 为组件实例对象
2、组件自定义的方法中 this 为 undefined,如何解决?
a)、强制绑定 this:通过函数对象的 bind()
b)、自定义方法使用:赋值语句+箭头函数
3、状态数据,不能直接修改或更新,需要通过 setState 方法进行修改
二、案例
定义一个展示天气信息的组件,默认展示天气炎热 或 凉爽,点击文字切换天气
基础写法(了解)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>state</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">// let that // ********了解:定义变量,缓存this// 1、创建组件class Weather extends React.Component {// 构造器调用几次?———— 1次,实例化组件时调用constructor(props) { // props为组件三大属性二,后续学习console.log('constructor')super(props)// 初始化状态this.state = { isHot: false, wind: '微风' }// that = this // ********了解:赋值this给that// 解决changeWeather中this指向问题(获取原型上的changeWeather,修改this指向为实例对象,返回新函数,挂载在实例自身)this.changeWeather = this.changeWeather.bind(this)}// render调用几次?———— 1+n次,实例化组件时调用1次、n是状态更新的次数render() {console.log('render')const { isHot, wind } = this.statereturn <h2 onClick={ this.changeWeather }>今天天气很 { isHot ? '炎热' : '凉爽' }, { wind }</h2>// ********了解:定义changeWeather在类外部// return <h2 onClick={changeWeather}>今天天气很 { isHot ? '炎热' : '凉爽' }, { wind }</h2>}// changeWeather调用几次?———— 点几次调几次changeWeather() {// changeWeather放在哪里?———— Weather的原型对象上,供实例使用// console.log(this) // undefined// 由于changeWeather是作为onClick的回调,所以不是通过实例调用的,是直接调用// 类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefinedconsole.log('changeWeather')const { isHot } = this.state// 严重注意:状态必须通过setState进行更新,且更新是一种合并,不是替换。this.setState({ isHot: !isHot })// 严重注意:状态(state)不可直接更改// this.state.isHot = !isHot // 错误写法,React中值未改变}}// 2、渲染组件到页面ReactDOM.render(<Weather/>, document.getElementById('test'))// ********了解:定义在类外部,一般不这么写// function changeWeather() {// console.log(this) // this为undefined,因为babel会将jsx转换为严格模式,严格模式下自定义函数中this为undefined// console.log(that.state)// }</script>
</body>
</html>
简化写法(常用)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>state简写方式</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">// 1、创建组件class Weather extends React.Component {// constructor构造器不需要时可省略// 初始化状态:类中可以直接写赋值语句,如下代码的含义是:给Weather的实例对象添加一个属性statestate = { isHot: false, wind: '微风' }render() {const { isHot, wind } = this.statereturn <h2 onClick={ this.changeWeather }>今天天气很 { isHot ? '炎热' : '凉爽' }, { wind }</h2>}// 自定义方法:要用赋值语句的形式(将changeWeather放在实例对象上,而不是原型对象上)+ 箭头函数(箭头函数没有this,指向父级的this,为实例对象)changeWeather = () => {console.log(this)const { isHot } = this.statethis.setState({ isHot: !isHot })}}// 2、渲染组件到页面ReactDOM.render(<Weather/>, document.getElementById('test'))</script>
</body>
</html>
三、原生事件绑定方法
1、element.addEventListener(事件名, 方法)
2、element.onclick = 方法
3、直接在标签上绑定
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Document</title></head><body><button id="btn1">按钮1</button><button id="btn2">按钮2</button><button onclick="demo()">按钮3</button><script type="text/javascript">const btn1 = document.getElementById('btn1')btn1.addEventListener('click', () => {alert('按钮1被点击了')})const btn2 = document.getElementById('btn2')btn2.onclick = () => {alert('按钮2被点击了')}function demo(){alert('按钮3被点击了')}</script></body>
</html>
注意:
React 对原生 javascript 中所有的事件做了一层封装
比如,onclick 在 React 中需要写为 onClick
相关文章:
【04】基础知识:React组件实例三大核心属性 - state
一、state 了解 理解 1、state 是组件对象最重要的属性,值是对象(可以包含多个 key-value 的组合) 2、组件被称为 “状态机”, 通过更新组件的 state 来更新对应的页面显示(重新渲染组件) 强烈注意 1、…...
SpringBoot 过滤器filter当中的自定义异常捕获问题
需求描述:需要根据用户的请求路径拦截做权限控制: 但是这样做全局异常无法捕获 解决方案: 在filter当中引入HandlerExceptionResolver类,通过该类的resolveException方法抛出自定义异常: public class OpenInvokeFil…...
实验3:左右循环LED灯
获取流水灯工程: 方式一: keilproteus 完成最小系统,点亮led 灯实验_吴小凹的博客-CSDN博客 方式二: Flowing_led.zip - 蓝奏云直接下载。 原理图修改: 无须修改只需要使用流水灯的工程即可,解压到桌面…...
行业追踪,2023-10-13
自动复盘 2023-10-13 凡所有相,皆是虚妄。若见诸相非相,即见如来。 k 线图是最好的老师,每天持续发布板块的rps排名,追踪板块,板块来开仓,板块去清仓,丢弃自以为是的想法,板块去留让…...
【实用小工具】一键分离音频中的纯人声~
音分轨——能够一键分离出音频中的【人声】和【音乐】,并单独输出为新的音频文件。可以用来扒谱、提取人声、消除背景音等。 第一步:打开【音分轨】APP,进入首页点击【人声分离】 第二步:选择导入方式,上传需要提取伴…...
如何在虚幻引擎中渲染动画?
大家好,今天我将展示如何在虚幻引擎中渲染动画,以及虚幻引擎渲染动画怎么设置的方法步骤。 需要提前了解: 虚幻引擎本地运行慢、渲染慢、本地配置不够,如何解决? 渲云云渲染支持虚幻引擎离线渲染,可批量…...
Hadoop3教程(三):HDFS文件系统常用命令一览
文章目录 语法格式(44) HDFS的文件系统命令(开发重点)参考文献 语法格式 hdfs命令的完整形式: hdfs [options] subcommand [subcommand options]其中subcommand有三种形式: admin commandsclient comman…...
2023年中国手机回收量、手机回收价值及行业细分现状分析[图]
手机回收的主要去向包括再销售及环保降解两类。其中进行再交易的二手手机多为9成新及以上手机。二手手机最终去向主要为再销售及环保降解。 2016年以来,我国手机总体出货量持续下滑,2022年全年,国内市场手机总体出货量累计2.72亿部࿰…...
格式转换 ▏Python 实现Word转HTML
将Word转换为HTML能将文档内容发布在网页上,这样,用户就可以通过浏览器直接查看或阅读文档而无需安装特定的软件。Word转HTML对于在线发布信息、创建在线文档库以及构建交互式网页应用程序都非常有用。以下是用Python将Word转换为HTML网页的攻略…...
自己在家给电脑重装系统Win10教程
自己在家怎么给电脑重装系统Win10?Win10电脑系统如果操作时间特别长了,就可能出现卡顿、蓝屏等系统问题,这时候用户就想给电脑重装系统,却不知道重装具体的操作步骤,下面小编给大家详细介绍自己在家给电脑重装Win10系统…...
198、RabbitMQ 的核心概念 及 工作机制概述; Exchange 类型 及 该类型对应的路由规则;了解什么是JMS。
目录 JMS 讲解★ RabbitMQ的核心概念★ RabbitMQ工作机制★ Connection(连接) 与 Channel(通信信道)★ Exchange★ Exchange与Queue★ Exchange的类型(4种)及 该类型对应的路由规则 看RabbitMQ 之前&#x…...
怎样理解伦敦金交易的点差
不管大家做的是什么投资品种,只要过程中有中间商提供了一定的服务,那么就需要支付一定的费用,这也是十分合理的事情。在伦敦金的市场上,交易平台主要通过点差的形式,向客户征收一定的投资服务费用。 伦敦金买卖过程中的…...
mysql主从工作原理、搭建
目录 一、mysql为什么要用主从架构? 二、mysql数据库主从复制原理是什么? 详细的主从复制过程如下图: 主从复制过程概述: 三、mysql主从如何搭建? 本次安装的数据库版本为mysql5.7 1、准备两台服务器(…...
PHP实现赛邮【SUBMAIL】短信通知
接口文档地址:https://www.mysubmail.com/documents 实现短信通知实例: $url https://api-v4.mysubmail.com/sms/xsend;//接口地址 $appId XXX;//APPID $appkey XXX;//APPKEY $phone XXX;//发送手机号 $project XXX;//模板ID $data …...
完整的电商平台后端API开发总结
对于开发一个Web项目来说,无论是电商还是其他品类的项目,注册与登录模块都是必不可少的;注册登录功能也是我们在日常生活中最长接触的,对于这个业务场景的需求与逻辑大概是没有什么需要详细介绍的,市面上常见的邮箱注册…...
游戏中的随机——“动态平衡概率”算法
前言 众所周知计算机模拟的随机是伪随机,但在结果看来依然和现实中的随机差别不大。 例如掷硬币,连续掷很多很多次之后,总有连续七八十来次同一个面朝上的情况出现,计算机中一般的随机函数也能很好模拟这一点。 但在游戏中&…...
AUTOSAR汽车电子嵌入式编程精讲300篇-基于 FIFO 和优先级序列 CAN 总线系统(续)
目录 4.1.2 理想模型的 FIFO 序列分析 4.2 仅有一个缓冲区的模型的可调度性分析...
C# InformativeDrawings 生成素描画
效果 项目 下载 可执行程序exe下载 源码下载...
关于网络协议的若干问题(一)
1、当网络包到达一个网关的时候,可以通过路由表得到下一个网关的 IP 地址,直接通过 IP 地址找就可以了,为什么还要通过本地的 MAC 地址呢? 答:IP报文端到端的传输过程中,在没有NAT情况下,目的地…...
电脑重做系统---win10
电脑重做系统---win10 前言制作启动U盘材料方法打开网址下载启动盘制作工具参照官方说明进行制作使用U盘重做系统 常用软件官网地址 前言 记得最早学习装电脑还是04年左右,最为一个啥也不知道的大一傻白胖,花了几百大洋在电脑版把了个“电脑组装与维修”…...
HTML基础入门02
目录 1.格式化标签 2.图片标签: img 3.超链接标签: a 4.综合案例: 展示博客2 5.表格标签 5.1基本使用 5.2合并单元格 6.列表标签 1.格式化标签 加粗:strong标签和b标签 倾斜:em标签和i标签 删除线:del标签和s标签 下划线:i…...
【C++】如何使用RapidXML读取和创建XML文件
2023年10月11日,周三下午 目录 RapidXML的官网使用rapidXML读取XML文件中的元素的属性和值此次要读取的XML文件:ReadExample.xml用于读取此XML文件的C代码运行结果使用rapidXML创建XML文件用于创建XML文件的C代码 如果上面的代码无法运行运行结果编辑…...
《UnityShader入门精要》学习3
笛卡尔坐标系(Cartesian Coordinate System) 二维笛卡儿坐标系 一个二维的笛卡儿坐标系包含了两个部分的信息: 一个特殊的位置,即原点,它是整个坐标系的中心。两条过原点的互相垂直的矢量,即x轴和y轴。这…...
使用Python将MP4视频转换为图像
介绍: 在计算机视觉和机器学习领域,我们经常需要处理视频数据。有时候,我们可能需要将视频转换为图像序列,以便进行后续的分析和处理。本文将介绍如何使用Python和OpenCV库将MP4视频文件转换为图像序列。 步骤: 导入…...
【Vue Router 3】入门
简介 Vue Router让SPA(Single-page Application)的构建更加容易。 Vue Router的功能: 嵌套的路由/视图映射模块化的、基于组件的router配置route params, query, wildcards由Vue过渡系统支持的视图过渡效果细粒度(fine-grained…...
SpringMVC中@RequestMapping注解的详细说明
RequestMapping 是Spring MVC中一个用于映射HTTP请求和控制器方法之间关系的注解。它用于定义控制器方法如何响应特定的HTTP请求,包括GET、POST、PUT、DELETE等。以下是RequestMapping注解的详细说明: 基本用法: RequestMapping("/examp…...
Java - 发送 HTTP 请求的及其简单的方法模块 - hutool
目录 一、POST 传递简单的字符串内容 .body(params)二、POST 传递 Json 数据,以表单类型传递 .form(params)二、POST 传递 Json 数据,以表单类型传递 .form(params) 和 .body(params) 方法效果等效的思路四、传统接口带 token 验证的代码模板参考链接 一…...
Nie et al. 2010 提出的不等式定理
这里写自定义目录标题 定理 定理 For any vector a a a and b b b, we have ∥ a ∥ 2 − ∥ a ∥ 2 2 2 ∥ b ∥ 2 ≤ ∥ b ∥ 2 − ∥ b ∥ 2 2 2 ∥ b ∥ 2 \|a\|_{2} - \frac{\|a\|_{2}^{2}}{2\|b\|_{2}} \leq \|b\|_{2} - \frac{\|b\|_{2}^{2}}{2\|b\|_{2}} ∥a∥2−…...
chatGLM2-6B模型LoRA微调数据集实现大模型的分类任务
【TOC】 1.chatglm介绍 ChatGLM 模型是由清华大学开源的、支持中英双语问答的对话语言模型,并针对中文进行了优化。该模型基于 General Language Model(GLM)架构,具有 62 亿参数。结合模型量化技术,用户可以在消费级的显卡上进行本地部署。 ChatGLM 具备以下特点: 充…...
Elasticsearch6实践
目录 目录 一、需求 二、ES索引设计 三、页面搜索条件 四、ES的分页搜索DSL语句 五、其他 一、需求 公告列表,需要支持以下搜索 1、根据文本输入,模糊搜索公告标题和公告正文。 2、支持公告类型搜索,单选 3、支持根据公告所在省市区搜…...
云原生Kubernetes:K8S集群版本升级(v1.20.6 - v1.20.15)
目录 一、理论 1.K8S集群升级 2.集群概况 3.升级集群 4.验证集群 二、实验 1.升级集群 2.验证集群 三、问题 1.给node1节点打污点报错 一、理论 1.K8S集群升级 (1)概念 搭建K8S集群的方式有很多种,比如二进制,kubeadm…...
毅速丨3D打印随形水路模具日常如何保养
3D打印随形水路的蜿蜒曲折甚至细微水路,使得其容易发生堵塞并难以清洗,一旦堵塞将对生产带来不小的影响。事实上,堵塞的发生是逐步发展的,所以在生产过程中应注意监控,一旦发现冷却效果下降应及时检查。以下是一些防患…...
尚品甄选2023全新SpringBoot+SpringCloud企业级微服务项目
最适合新手入门的SpringBootSpringCloud企业级微服务项目来啦!如果你已经学习了Java基础、SSM框架、SpringBoot、SpringCloud,想找一个项目来实战练习;或者你刚刚入行,需要可以写到简历中的微服务架构项目! 项目采用前…...
204、RabbitMQ 之 使用 topic 类型的 Exchange 实现通配符路由
目录 ★ 使用topic实现通配符路由代码演示topic通配符类型的Exchange代码演示:ConstantUtilConnectionUtilProducerConsumer01执行结果生产者消费者01消费者02 完整代码:ConstantUtilConnectionUtilProducerConsumer01Consumer02pom.xml ★ 使用topic实现通配符路由…...
qq视频录制教程,让你的视频更加精彩
“qq视频可以录制吗?浏览qq的时候发现一段有趣的视频,点击下载却一直显示失败,朋友叫我把视频录制下来,但是我不知道怎么操作,想问问大家,有没有办法录制qq的视频。” 在信息化的时代,通过视频…...
(滑动窗口) 76. 最小覆盖子串 ——【Leetcode每日一题】
❓76. 最小覆盖子串 难度:困难 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串,则返回空字符串 "" 。 注意: 对于 t 中重复字符,我们寻找的子字符串…...
grep批量筛选指定目录下的所有日志并写入文件内
背景:在指定目录下,该目录下有上百个日志文件,这些文件以.log结尾 需求:遍历这些日志文件,对每个日志文件进行grep筛选,筛选出包含namexxx和 "server_port":"8088"的内容,并…...
JVM第三讲:JVM 基础-字节码的增强技术详解
JVM 基础-字节码的增强技术详解 本文是JVM第三讲,JVM 基础-字节码的增强技术。在上文中,着重介绍了字节码的结构,这为我们了解字节码增强技术的实现打下了基础。字节码增强技术就是一类对现有字节码进行修改或者动态生成全新字节码文件的技术…...
JWT前后端分离在项目中的应用
14天阅读挑战赛当你累了,要学会休息,而不是放弃! 目录 一、JWT简介 1.1 什么是JWT 1.2 为什么要使用JWT,与session的区别 1.3 JWT组成及工作原理和流程 二、JWT工具类解析 2.1 生成JWT 2.2 解析oldJwt 2.3 复制JWT并延时…...
系统架构师备考倒计时23天(每日知识点)Redis篇
Redis篇 1.Redis与Memcache能力对比 工作MemCacheRedis数据类型简单 key/value 结构丰富的数据结构持久性不支持支持分布式存储客户端哈希分片/一致性哈希多种方式,主从、Sentinel、Cluster 等多线程支持支持支持(Redis5.0及以前版本不支持)内存管理私有内存池/内…...
WIN11系统设置重启与睡眠唤醒后自动拨号
文章目录 1. win x快捷键后选择计算机管理2. 编辑名称3. 选择计算机启动时4. 启动程序5. 输入脚本6. 勾选选项7. 填写配置8. 新建触发器9. 设置触发器10. 确定之后完成创建 1. win x快捷键后选择计算机管理 在任务计划程序中创建基本任务 2. 编辑名称 3. 选择计算机启动时 4…...
【【萌新的SOC学习之AXI-DMA环路测试】】
萌新的SOC学习之AXI-DMA环路测试 AXI DMA环路测试 DMA(Direct Memory Access,直接存储器访问)是计算机科学中的一种内存访问技术。它允许某些计算机内部的硬件子系统可以独立地直接读写系统内存,而不需中央处理器(CPU)介入处理。…...
Lua教程
Lua教程(简单易懂)-CSDN博客 博客相关解释: 5、循环 a {"a", "b"}for i, v in ipairs(a) doprint(i, v)end 代码创建了一个名为 a 的数组,并使用 ipairs 迭代这个数组的元素。运行结果显示了每个元素的索引(下标&am…...
《Node.js+Express+MongoDB+Vue.js全栈开发实战》简介
今天介绍的这本书是《Node.jsExpressMongoDBVue.js全栈开发实战》。该书由清华大学出版社于2023年1月出版 外观 从书名故名思议,就是基于Node.jsExpressMongoDBVue.js来实现企业级应用全栈开发。 封面风格比较简约,插图是一张类似于罗马时代战车形象&…...
多输入多输出 | MATLAB实现CNN-BiGRU-Attention卷积神经网络-双向门控循环单元结合SE注意力机制的多输入多输出预测
多输入多输出 | MATLAB实现CNN-BiGRU-Attention卷积神经网络-双向门控循环单元结合SE注意力机制的多输入多输出预测 目录 多输入多输出 | MATLAB实现CNN-BiGRU-Attention卷积神经网络-双向门控循环单元结合SE注意力机制的多输入多输出预测预测效果基本介绍程序设计往期精彩参考…...
阿里云r7服务器内存型CPU采用
阿里云服务器ECS内存型r7实例是第七代内存型实例规格族,CPU采用第三代Intel Xeon可扩展处理器(Ice Lake),基频2.7 GHz,全核睿频3.5 GHz,计算性能稳定,CPU内存比1:8,2核16G起步&#…...
Godot2D角色导航-自动寻路教程(Godot设置导航代理的目标位置)
文章目录 创建导航NavigationAgent2D节点设置目标位置其他文章 创建导航 首先,创建一个基本的场景,下面的文章讲解了如何创建一个基本的导航场景,点击如下链接前往该文章: Godot2D角色导航-自动寻路教程 NavigationAgent2D节点 …...
R语言实现向量自回归和误差修正模型——附实战代码
大家好,我是带我去滑雪! 向量自回归(VAR)模型和误差修正模型(ECM)是时间序列分析中常用的两种模型,它们用于研究多个变量之间的动态关系。VAR 模型适用于研究多个相关变量之间的相互影响和动态关…...
原理:用UE5制作一个2D游戏
选中资产图片右键--Sprite Actions--Apply Paper2D Texture Settings 制作场景 把它丢到场景里,并把坐标归零 创建图块集tileset 打开新建的tile set,根据最小图块设置最小尺寸单元 选择需要的图块单元,add box 对新建的tile set右键创建til…...
【ARM 嵌入式 编译系列 11.3 -- GCC attribute packed noreturn constructor 介绍】
文章目录 GCC 的 __attribute__ 是一个编译器扩展特性,允许开发者在源代码中设置函数属性(function attributes)、变量属性(variable attributes)和类型属性(type attributes)。这些属性可以影响函数、变量或类型的行为。 以下是一些常见的 __attribute__ 属性: __at…...