React-state响应式内部数据(类组件Hook两种方式整理)

ops/2025/3/18 12:14:22/

类组件

在类组件中要定义内部数据,由两种方案

  1. 构造器里面定义state属性,在这个对象中定义你需要的数据
constructor(){super()this.state = {count:1}}
  1. 在类的下面直接定义一个属性state(推荐)
state = {count:10}

页面要使用state数据

<p>{this.state.count}</p>

建议大家在React中使用内部state数据的时候,使用解构的方式将内容解构出来

const {count} = this.state
return (<div><p>{count}</p><button onClick={this.increment}>+</button>
</div>
)

内部数据修改方式

  1. 修改基本数据类型
this.setState({count:20
})


调用setState这个函数,React才能检测到数据发生变化,再次调用render渲染页面内容

  1. 对象合并
    在调用setState的时候,我们传递一个新的对象给函数,将函数里面要修改的内容和原来的内容进行合并,不会产生替换覆盖。
  1. 修改对象的时候
    如果提供了一个新对象,将新对象地址覆盖原来对象的地址。
    如果要修改数组里指定的内容
    尽量将state的数据解构出来,修改完成过后在替换原来的state里面的对象。
    不要频繁操作state,频繁操作state会带来额外的性能开销。
  1. 强制更新页面
this.forceUpdate()


这个函数是父组件提供的一个函数,用于React组件强制更新。
在开发过程中尽量不要使用。比较消耗性能

关于setState特点

setState这个函数在修改数据的时候,默认是异步函数。

你在修改数据的时候,不想影响代码的执行。

立即获取到修改过后的值,无法实现。

this.setState({count:20
},()=>{console.log(this.state.count);
})

提供一个回调函数,可以在回调函数里面获取到修改过后的值。

修改数据也可以提供一个回调

this.setState(()=>{// 执行一些代码,记录日志return {count:20}})

这种方式修改数据后,也可以通过回调获取到结果

this.setState(()=>{// 执行一些代码,记录日志return {count:20}},()=>{console.log(this.state.count);})

setState不总是异步的。。。

如果setState这个函数是放在定时器或者延时器中使用,立即变成同步任务

setTimeout(() => {this.setState({count: 10})console.log(this.state.count);}, 2000);

计算属性

在React中没有像Vue中提供了专门computed来计算属性,类组件中采用get、set存取器的方式来完成计算属性功能

get total(){return this.state.cartList.reduce((sum,next)=>{return sum+=next.price * next.num},0)ttotal}

使用total属性的时候,不要把他当成函数来用

{this.total}

HOOK内部响应式数据

基本语法

const [count,setCount] = useState(0)

修改函数的函数名字可以自己定义,但是一般约定熟成的规范使用set开发,驼峰命令的方式来进行修改

修改基本类型

const [count,setCount] = useState(0)
const [username,setUsername] = useState("xiaowang")const changeState = ()=>{// setCount就是用于修改count的函数setCount(1)}

修改引用类型

const [user,setUser] = useState({id:1,name:"xiaowang"})const changeUsername = ()=>{setUser({...user,name:"小张"})}
  1. 修改用户数据的时候,需要返回一个user对象,不能直接修改之前user,更新state的数据
  2. 修改的时候,会用你传递进去的对象覆盖原来的对象,不会合并对象.
  3. setState可以合并对象

修改数据的时候还可以使用函数的方式

setCount(()=>{// 执行验证return 10})
异步数据修改

调用修改函数对state进行数据赋值,默认情况下异步的.

setCount(10)console.log(count) 0

传递函数进去,修改数据同步的方式来执行.

setCount(()=>{return 10
})
console.log(count) 10

http://www.ppmy.cn/ops/166758.html

相关文章

OSPF-5 3类LSA SummaryLSA

上一期我们介绍了2类LSA Network LSA的内容信息以及怎样从2类LSA中的信息描绘出一张具体的拓扑信息以及网段信息 这一期我们将介绍3类LSA Summary LSA区域间的LSA看看3类LSA是怎样把域间的路由信息传递到别的区域的 一、概述 由于3类LSA是用来描述我们域间的路由信息所以它是…

API自动化测试实战:Postman + Newman/Pytest的深度解析

引言 在数字化时代&#xff0c;API&#xff08;应用程序编程接口&#xff09;已成为系统间交互的核心纽带。无论是电商、金融、IoT还是云服务&#xff0c;API的稳定性、性能和安全性直接决定了产品的用户体验和业务连续性。然而&#xff0c;随着API复杂度的提升和迭代速度的加…

[GESP 202412 一级 T2] 奇数和偶数

描述 小杨有nn个正整数&#xff0c;他想知道其中的奇数有多少个&#xff0c;偶数有多少个。 输入描述 第一行包含一个正整数 nn&#xff0c;代表正整数个数。之后几行&#xff0c;每行包含一个正整数。 输出描述 输出两个正整数&#xff08;用英文空格间隔&#xff09;&am…

嵌入式硬件篇---龙芯GPIO控制

文章目录 前言1. 头文件引入作用 2. 导出GPIO引脚 export_gpio功能示例注意 3. 设置GPIO方向 set_gpio_direction功能示例 4. 设置GPIO值 set_gpio_value功能示例 5. 初始化函数 gpio_init功能 6.龙芯2K1000适配说明6.1 GPIO编号映射6.2 性能优化建议优点错误处理 6.3 权限问题…

TI的Doppler-Azimuth架构(TI文档)

TI在AWR2944平台上推出新的算法架构&#xff0c;原先的处理方式是做完二维FFT后在RD图上做CFAR检测&#xff0c;然后提取各个通道数据做测角。 Doppler-Azimuth架构则是做完二维FFT后&#xff0c;再做角度维FFT&#xff0c;生成Doppler-Azimuth频谱图&#xff0c;然后在该频谱图…

w259交通管理在线服务系统设计与实现

&#x1f64a;作者简介&#xff1a;多年一线开发工作经验&#xff0c;原创团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339;赠送计算机毕业设计600个选题excel文…

0CTF 2016 piapiapia 1

#源码泄露 #代码审计 #反序列化字符逃逸 #strlen长度过滤数组绕过 www.zip 得到源码 看到这里有flag &#xff0c;猜测服务端docker的主机里&#xff0c;$flag变量应该存的就是我们要的flag。 于是&#xff0c;我们的目的就是读取config.php 利用思路 这里存在 任意文件读取…

深入解析Hosts文件:从原理到实战应用(文末附Qwins下载)

深入解析Hosts文件&#xff1a;从原理到实战应用 在网络世界中&#xff0c;一个看似普通的系统文件——Hosts文件&#xff0c;却隐藏着操控域名解析的“上帝权限”。无论是开发者的本地测试、网络安全防护&#xff0c;还是普通用户屏蔽广告&#xff0c;都离不开它的身影。本文将…