react学习之useState和useEffect

 useState

useState 可以使函数组件像类组件一样拥有 state,函数组件通过 useState 可以让组件重新渲染,更新视图。

实际使用

 setstate()中回调函数的返回值将会成为新的state值回调函数执行时,
  React会将最新的state值作为参数传递

const AddLess = ()=>{const [num,setNum]  = useState(1)
const add = ()=>{setNum((pre)=>{return pre+1} )console.log('num',num)}const less =()=>{/*** 当前例子就是 less方法是 拿到返回的值减一 成为新的数 赋给num*/setNum((pre)=>pre-1)console.log('num',num)}return <div className="addLessBox"><p className="num">{num}</p><div><button onClick={add}>+</button><button onClick={less}>-</button></div><div>{/* 不允许直接渲染 对象 直接写写{userinfo}会报错 */}<p ref={refele} className='user'>{userinfo.name} --- {userinfo.age}</p><button onClick={handleInfo}>修改</button><button onClick={handleRef}>ref修改</button></div></div>
}

 当state的值是一个对象时,修改时是使用新的对象去替换已有对象

   -setState()会触发组件的重新消染,它是异步的

            所以当调用setstate()需要用旧state的值时,一定要注意有可能出现计算错误的情况

            为了避免这种情况,可以通过为setState()传递回调函数的形式来修改

const AddLess = ()=>{
const [userinfo,setuser] = useState({name:'react',age:18})
const handleInfo = ()=>{setuser({...userinfo,name:'react18'})}return <div className="addLessBox"><p className="num">{num}</p><div><button onClick={add}>+</button><button onClick={less}>-</button></div><div>{/* 不允许直接渲染 对象 直接写写{userinfo}会报错 */}<p ref={refele} className='user'>{userinfo.name} --- {userinfo.age}</p><button onClick={handleInfo}>修改</button></div></div>
}

 当state的值是一个数组时,如何向数组里添加数据

const App = ()=>{
const [data,setData] = useState([{id:'001',date:'七',title:'学习',content:'react'},{id:'002',date:'七',title:'学习',content:'nuxt'},])//接收子组件传来的值const handleData = (sondata)=>{console.log("data",sondata)sondata.id = Date.now() + ''setData([sondata,...data])}return <div><LogForm onhandleData={handleData}/></div>}

上面的例子都是setState的操作都是放在具体的方法中,没有直接在函数体中调用。那可不可以在函数体里直接调用setState呢?答案是不可以

为什么呢?

当我们直接在函数体中调用setState时,就会触发错误  ---  too many re-renders

 

 

那必须在函数体里直接使用 setState,那就要用到useEffect


useEffect

解决代码中的副作用 例如上面提到的在函数体里直接操作setState

 语法

useEffect(()=>{return destory
},dep)

 useEffect()是一个钩子函数,需要一个函数作为第一个参数

        这个作为参数的函数,将会在组件渲染完毕后执行

         默认情况下,useEffect()中的函数,会在组件渲染完成后调用,并且是每次渲染完成后都会调用

 在 useEffect()可以传递第二个参数

        第二个参数是一个数组,在数组中可以指定effect的依赖项

        指定后,只有当依赖发生变化时,effect才会被触发

        如果依赖项设置一个空数组,则意味Effect只会在组件初始化触发一次,后面都不会触发了;不设置第二个参数,那么每次组件渲染effect也跟着渲染

function App() {const [count,setCount] = useState(0)const [count2,setCount2] = useState(0)const changeCount = ()=>{setCount(1)}useEffect(()=>{console.log("effect执行")setCount2(pre=>++pre)},[count])return (<div><p>count:{count}</p><p>count2:{count2}</p><button onClick={changeCount}>修改count</button></div>);
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/52829.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux基础 -- 网络工具之curl使用

curl 使用手册 curl 是一个强大的命令行工具&#xff0c;用于与服务器进行HTTP请求。本文档将介绍常见的请求方法和一些高级用法。 基础用法 1. GET 请求 GET 请求用于从服务器获取数据。 curl -X GET "http://example.com/api/resource"2. POST 请求 POST 请求…

【HarmonyOS 4.0】@BuilderParam 装饰器

1. BuilderParam 装饰器 BuilderParam 装饰器用于装饰自定义组件(struct)中的属性&#xff0c;其装饰的属性可作为一个UI结构的占位符&#xff0c;待创建该组件时&#xff0c;可通过参数为其传入具体的内容。参数必须满足俩个条件&#xff1a; 2.1 参数类型必须是个函数&#x…

windows安全软件之火绒杀毒的密码忘记后处理

一、问题描述 某次&#xff0c;想升级系统补丁&#xff0c;但多次尝试后都失败&#xff0c;排查杀毒软件影响过程中&#xff0c;发现火绒杀毒配置了密码保护&#xff0c;但因时间太久&#xff0c;密码已无从考证&#xff0c;那我们应该怎样处理这种情况呢&#xff1f; 二、处…

鸿蒙XComponent组件的认识

概述&#xff1a; XComponent组件作为一种渲染组件&#xff0c;通常用于满足开发者较为复杂的自定义渲染需求&#xff0c;例如相机预览流的显示、游戏画面的渲染、自定义视频播放器等等。其中Native API是其核心内容&#xff01; 其可通过指定其type字段来实现不同的功能&…

jenkins安装k8s插件发布服务

1、安装k8s插件 登录 Jenkins&#xff0c;系统管理→ 插件管理 → 搜索 kubernetes&#xff0c;选择第二个 Kubernetes&#xff0c;点击 安装&#xff0c;安装完成后重启 Jenkins 。 2、对接k8s集群、申请k8s凭据 因为 Jenkins 服务器在 kubernetes 集群之外&#xff0c;所以…

解决huggingface下载时Username/Password Authentication Failed.问题

项目场景&#xff1a; 使用huggingface 下载数据集。 问题描述 运行命令&#xff1a; wget https://huggingface.co/datasets/yangtaointernship/RealEstate10K-subset/resolve/main/google_scanned_objects.zip?downloadtrue 完整报错如下&#xff1a; --2024-08-30 15:…

Windows通过网线连接开发板共享网络

Windows端 打开更开适配器选项右键WLAN–属性–共享 右键以太网–属性–Internet协议版本4(TCP/IPv4) 记住IP地址 开发板端 查看网卡 ifconfig设置IP在同一网段 ifconfig eth0 192.168.137.2 netmask 255.255.255.0设置网关 route add default gw 192.168.137.1配置DNS su…

哪个牌子的电容笔好用又实惠?西圣、绿联、摩米士电容笔实测大比拼

​现在市面上的电容笔很多&#xff0c;在选择时会让人感到很纠结。那么多的选择&#xff0c;究竟哪个牌子的电容笔好用又实惠呢&#xff1f;一款优质的电容笔应考虑握持舒适度、笔尖材质、电池续航能力以及书写流畅度等因素。作为一位多年的数码爱好者&#xff0c;我今天将针对…

Python中的列表:掌握数据操作的艺术

引言 列表是一种可变序列&#xff0c;它可以存储任意数量的不同类型的对象&#xff0c;并且支持添加、删除等操作。在实际开发中&#xff0c;列表被广泛应用于数据存储、临时计算结果保存、数据传输等多个场景。例如&#xff0c;在Web开发中&#xff0c;我们可以使用列表来存储…

atc 经典dp 26题 题型总结

题目链接 稍微记录下吧。主要想发现他 这个题单主人 是怎么去分类dp的类型的。借鉴 题目不一定要多难。但是题型的分类总结 感觉很重要。 某种dp的处理方式。。他是相似的。。 A B 数组 前面往i1 &#xff0c;i2.。。这样的推 。 C 限制只能 交叉继承。。不能继承pre一样位置的…

CSS3动画——飞行的小精灵

CSS3动画——飞行的小精灵 今天的这段代码通过多层结构、渐变色、圆角、多种动画效果以及细节处理&#xff0c;成功地创造了一个充满活力和趣味性的飞行小精灵动画效果。 效果如下&#xff1a; 飞行的小精灵 源代码如下&#xff1a; <!DOCTYPE html> <html lang&quo…

探索Edge-TTS与WebSocket集成:打造实时语音交互系统

本文为实现 WebSocket 将文本转换为语音并返回 Base64 数据给 Vue 客户端【干货】 在本文中&#xff0c;我们将构建一个简单的系统&#xff0c;该系统能够接收文本输入&#xff0c;通过 Microsoft Edge 的文本到语音服务&#xff08;Edge TTS&#xff09;转换为语音&#xff0c…

【第十三届蓝桥杯单片机国赛满分代码】

其他相关文章&#xff1a; 【提分必看&#xff01;】蓝桥杯单片机提分技巧&#xff08;国一经验分享&#xff09; 【国一超全代码分享&#xff01;】蓝桥杯单片机各模块代码整合 【蓝桥杯单片机客观题知识点汇总】 本代码经过编译后生成的hex文件经过了4T测试平台的满分测试。读…

python从入门到精通:文件操作

目录 1、文件编码 2、文件的读取 open( )打开函数 3、文件的写入 4、文件的追加 5、文件的操作&#xff08;综合案例&#xff09; 1、文件编码 因为计算机只能识别0和1&#xff0c;所以我们是通过编码技术&#xff08;密码本&#xff09;将内容翻译成0和1存入&#xff0…

Clock skew

时钟偏差(有时称为时序偏差)是同步数字电路系统(如计算机系统)中的一种现象,其中由于门电路或更先进的半导体技术中导线信号传播延迟,源自同一源的时钟信号会在不同时间到达不同组件。任何两个时钟读数之间的瞬时差异被称为它们的偏差。 大多数数字电路的操作由一个周期…

C#——扩展方法

扩展方法 定义 扩展方法&#xff08;Extension Methods&#xff09;是C#中一种特殊的静态方法&#xff0c;它定义在一个静态类中&#xff0c;但是可以像实例方法一样被调用&#xff0c;使得代码更加简洁、易读。 设计目的 是为了给已有的类型添加新的行为&#xff0c;而不需要…

数学建模学习(124):使用Python实现模糊ARAS方法从原理到实战

文章目录 1. 引言2. 模糊ARAS方法原理2.1 模糊数的表示3. 案例分析:设备采购决策3.1 数据来源3.2 权重设定3.3 数据集3.4 Python实现模糊ARAS方法3.5 结果分析3.6 模糊ARAS的优势3.7 应用场景4. 总结参考文献1. 引言 在复杂的决策场景中,决策者往往面对的不仅仅是多个选择(…

Android APK打包脚本

build.gradle版本 同目录创建config.gradle文件写入需要的信息入 config.gradle文件内容 ext { /*** 自定义APP运行环境* dev: 开发* test: 测试* pro: 生产*/ env "pro" /*** 动态参数配置&#xff0c;根据自己需要添加参数* APP_ID: 包名* VERSION_CODE: 版本号…

【C++】奇异递归模板模式CRTP——静态多态

奇异递归模板模式&#xff08;Curiously Recurring Template Pattern&#xff0c;CRTP&#xff09;是C模板编程时的一种惯用法&#xff08;idiom&#xff09;&#xff1a;把派生类作为基类的模板参数。更一般地被称作F-bound polymorphism。CRTP在C中主要有两种用途&#xff1a…

在高质量视频生成文本、图像生成文本的GLM-4V-Plus技术加持下医疗未来的方向

人工智能的进步为医疗领域带来了巨大的变革&#xff0c;尤其是视频生成文字、图片生成文字和医学统计数据生成文字等技术的应用。这些技术使得我们能够更全面地利用大数据来辅助诊断&#xff0c;为患者提供更加精确和个性化的医疗服务。以下是一些可能的应用场景和优势&#xf…