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

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

类组件

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

  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.mrgr.cn/news/94771.html

相关文章:

  • 华为OD机试 - 查找重复代码 - 动态规划(Python/JS/C/C++ 2025 A卷 100分)
  • 深入浅出:Java实现斐波那契数列的七种武器与性能调优指南
  • Redis如何实现持久化
  • 判断字符串是否为回文(信息学奥赛一本通-1146)
  • 4张图,9个方法,搞定 “信贷风控策略调优”
  • 正则表达式:贪婪匹配与非贪婪匹配
  • 2025.3.17总结
  • 【系统架构设计师】操作系统 - 文件管理 ③ ( 树形目录结构 | 文件属性 | 绝对路径 与 相对路径 )
  • Docker命令解析:加速你的容器化之旅(以Nginx为例)
  • dfs(十三)206. 反转链表
  • VLLM:虚拟大型语言模型(Virtual Large Language Model)
  • Hoppscotch 开源API 开发工具
  • Deepseek API+Python测试用例一键生成与导出-V1.0.2【实现需求文档图片识别与用例生成自动化】
  • 机器学习——深入浅出理解朴素贝叶斯算法
  • win10 c++ VsCode 配置PCL open3d并显示
  • Couldn‘t install PSEXESVC service: 拒绝访问。
  • Function 原型 原型链 继承的实现
  • Oracle检索数据
  • SpringBoot 启动过程
  • 蓝桥杯每日一题——Acwing 5438. 密接牛追踪2