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

【04】基础知识：React组件实例三大核心属性 - state

news 2025/9/14 16:46:52

一、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 是组件对象最重要的属性&#xff0c;值是对象&#xff08;可以包含多个 key-value 的组合&#xff09; 2、组件被称为 “状态机”&#xff0c; 通过更新组件的 state 来更新对应的页面显示&#xff08;重新渲染组件&#xff09; 强烈注意 1、…...

编程日记 2023/10/14 15:21:48

SpringBoot 过滤器filter当中的自定义异常捕获问题

需求描述&#xff1a;需要根据用户的请求路径拦截做权限控制&#xff1a; 但是这样做全局异常无法捕获 解决方案&#xff1a; 在filter当中引入HandlerExceptionResolver类&#xff0c;通过该类的resolveException方法抛出自定义异常&#xff1a; public class OpenInvokeFil…...

编程日记 2023/10/14 15:20:47

实验3：左右循环LED灯

获取流水灯工程&#xff1a; 方式一&#xff1a; keilproteus 完成最小系统&#xff0c;点亮led 灯实验_吴小凹的博客-CSDN博客 方式二&#xff1a; Flowing_led.zip - 蓝奏云直接下载。 原理图修改&#xff1a; 无须修改只需要使用流水灯的工程即可&#xff0c;解压到桌面…...

编程日记 2023/10/14 15:19:45

行业追踪，2023-10-13

自动复盘 2023-10-13 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…...

编程日记 2023/10/14 15:16:41

【实用小工具】一键分离音频中的纯人声～

音分轨——能够一键分离出音频中的【人声】和【音乐】&#xff0c;并单独输出为新的音频文件。可以用来扒谱、提取人声、消除背景音等。 第一步&#xff1a;打开【音分轨】APP&#xff0c;进入首页点击【人声分离】 第二步&#xff1a;选择导入方式&#xff0c;上传需要提取伴…...

编程日记 2023/10/14 15:15:40

如何在虚幻引擎中渲染动画？

大家好&#xff0c;今天我将展示如何在虚幻引擎中渲染动画&#xff0c;以及虚幻引擎渲染动画怎么设置的方法步骤。 需要提前了解&#xff1a; 虚幻引擎本地运行慢、渲染慢、本地配置不够&#xff0c;如何解决&#xff1f; 渲云云渲染支持虚幻引擎离线渲染&#xff0c;可批量…...

编程日记 2023/10/14 15:14:39

Hadoop3教程（三）：HDFS文件系统常用命令一览

文章目录 语法格式&#xff08;44&#xff09; HDFS的文件系统命令&#xff08;开发重点&#xff09;参考文献 语法格式 hdfs命令的完整形式&#xff1a; hdfs [options] subcommand [subcommand options]其中subcommand有三种形式&#xff1a; admin commandsclient comman…...

编程日记 2023/10/14 15:13:38

2023年中国手机回收量、手机回收价值及行业细分现状分析[图]

手机回收的主要去向包括再销售及环保降解两类。其中进行再交易的二手手机多为9成新及以上手机。二手手机最终去向主要为再销售及环保降解。 2016年以来&#xff0c;我国手机总体出货量持续下滑&#xff0c;2022年全年&#xff0c;国内市场手机总体出货量累计2.72亿部&#xff0…...

编程日记 2023/10/14 15:12:37

格式转换 ▏Python 实现Word转HTML

将Word转换为HTML能将文档内容发布在网页上&#xff0c;这样&#xff0c;用户就可以通过浏览器直接查看或阅读文档而无需安装特定的软件。Word转HTML对于在线发布信息、创建在线文档库以及构建交互式网页应用程序都非常有用。以下是用Python将Word转换为HTML网页的攻略&#xf…...

编程日记 2023/10/14 15:11:36

自己在家给电脑重装系统Win10教程

自己在家怎么给电脑重装系统Win10&#xff1f;Win10电脑系统如果操作时间特别长了&#xff0c;就可能出现卡顿、蓝屏等系统问题&#xff0c;这时候用户就想给电脑重装系统&#xff0c;却不知道重装具体的操作步骤&#xff0c;下面小编给大家详细介绍自己在家给电脑重装Win10系统…...

编程日记 2023/10/14 15:10:35

198、RabbitMQ 的核心概念 及 工作机制概述； Exchange 类型 及 该类型对应的路由规则；了解什么是JMS。

目录 JMS 讲解★ RabbitMQ的核心概念★ RabbitMQ工作机制★ Connection&#xff08;连接&#xff09; 与 Channel&#xff08;通信信道&#xff09;★ Exchange★ Exchange与Queue★ Exchange的类型&#xff08;4种&#xff09;及 该类型对应的路由规则 看RabbitMQ 之前&#x…...

编程日记 2023/10/14 15:09:34

怎样理解伦敦金交易的点差

不管大家做的是什么投资品种&#xff0c;只要过程中有中间商提供了一定的服务&#xff0c;那么就需要支付一定的费用&#xff0c;这也是十分合理的事情。在伦敦金的市场上&#xff0c;交易平台主要通过点差的形式&#xff0c;向客户征收一定的投资服务费用。 伦敦金买卖过程中的…...

编程日记 2023/10/14 15:08:32

mysql主从工作原理、搭建

目录 一、mysql为什么要用主从架构&#xff1f; 二、mysql数据库主从复制原理是什么&#xff1f; 详细的主从复制过程如下图&#xff1a; 主从复制过程概述&#xff1a; 三、mysql主从如何搭建&#xff1f; 本次安装的数据库版本为mysql5.7 1、准备两台服务器&#xff08…...

编程日记 2023/10/14 15:07:31

PHP实现赛邮【SUBMAIL】短信通知

接口文档地址&#xff1a;h​​​​​​ttps://www.mysubmail.com/documents 实现短信通知实例&#xff1a; $url https://api-v4.mysubmail.com/sms/xsend;//接口地址 $appId XXX;//APPID $appkey XXX;//APPKEY $phone XXX;//发送手机号 $project XXX;//模板ID $data …...

编程日记 2023/10/14 15:05:28

完整的电商平台后端API开发总结

对于开发一个Web项目来说&#xff0c;无论是电商还是其他品类的项目&#xff0c;注册与登录模块都是必不可少的&#xff1b;注册登录功能也是我们在日常生活中最长接触的&#xff0c;对于这个业务场景的需求与逻辑大概是没有什么需要详细介绍的&#xff0c;市面上常见的邮箱注册…...

编程日记 2023/10/14 15:04:27

游戏中的随机——“动态平衡概率”算法

前言 众所周知计算机模拟的随机是伪随机&#xff0c;但在结果看来依然和现实中的随机差别不大。 例如掷硬币&#xff0c;连续掷很多很多次之后&#xff0c;总有连续七八十来次同一个面朝上的情况出现&#xff0c;计算机中一般的随机函数也能很好模拟这一点。 但在游戏中&…...

编程日记 2023/10/14 15:03:26

AUTOSAR汽车电子嵌入式编程精讲300篇-基于 FIFO 和优先级序列 CAN 总线系统（续）

目录 4.1.2 理想模型的 FIFO 序列分析 4.2 仅有一个缓冲区的模型的可调度性分析...

编程日记 2023/10/14 15:02:25

C# InformativeDrawings 生成素描画

效果 项目 下载 可执行程序exe下载 源码下载...

编程日记 2023/10/14 15:01:24

关于网络协议的若干问题(一)

1、当网络包到达一个网关的时候&#xff0c;可以通过路由表得到下一个网关的 IP 地址&#xff0c;直接通过 IP 地址找就可以了&#xff0c;为什么还要通过本地的 MAC 地址呢&#xff1f; 答&#xff1a;IP报文端到端的传输过程中&#xff0c;在没有NAT情况下&#xff0c;目的地…...

编程日记 2023/10/14 15:00:23

电脑重做系统---win10

电脑重做系统---win10 前言制作启动U盘材料方法打开网址下载启动盘制作工具参照官方说明进行制作使用U盘重做系统 常用软件官网地址 前言 记得最早学习装电脑还是04年左右&#xff0c;最为一个啥也不知道的大一傻白胖&#xff0c;花了几百大洋在电脑版把了个“电脑组装与维修”…...

编程日记 2023/10/14 14:59:22

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/9/7 3:46:41

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/6/17 10:46:36

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/8/30 19:47:38

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/8 23:32:56

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/8/25 20:08:49

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/7/9 4:55:48

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/9/6 0:16:50

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/8/11 22:22:05

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

编程新知 2025/8/19 9:45:25

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/7/9 21:13:22