react经验12:等待状态更新

embedded/2024/9/22 23:30:49/

应用场景:

等待react组件内的state发生变更后进行后续操作。

已知问题

通常state的变化会引起dom的刷新,更新state一般使用setState,但这是个异步操作。
如果此时需要立即操作dom,得到的目标dom是刷新之前的样子。

应对方法

方法1:使用useEffect监听state,当监听的state发生变化时会触发回调,此时的dom也刷新完毕。
举例:

const [count,setCount]=useState(0)
useEffect(()=>{
//这里是state的监听回调
},[count])

方法2:
使用timeout,调用setState后,后续操作放在timeout中处理。
举例:

const [count,setCount]=useState(0)
function handleChange(val:number){setCount(val)setTimeout(()=>{//后续操作放在这})
}

http://www.ppmy.cn/embedded/9096.html

相关文章

登录的几种方式

一、session 1、客户端发送请求,服务器将登录信息存储在 Session 中,Session 依赖于 Cookie(cookie指的就是在浏览器里面存储的一种数据,仅仅是浏览器实现的一种数据存储功能。Cookie实际上是一小段的文本信息。)&…

MySQL学习笔记1(MySQL基础)

1.MySQL基础 1.数据库相关概念 ​ *数据库:存储数据的仓库,数据是有组织的进行存储 DtaBase(DB) ​ *数据管理系统:操纵和管理数据库的大型软件 DataBase Management System (DBMS) ​ *SQL:操作关系型数据库的编程语言&#…

Linux-延迟任务and定时任务

一.在系统中设定延迟任务要求如下 在系统中建立easylee用户,设定其密码为easylee 延迟任务由root用户建立 要求在5小时后备份系统中的用户信息文件到/backup中 确保延迟任务是使用非交互模式建立 确保系统中只有root用户和easylee用户可以执行延迟任务的设定 二.在…

Debezium分享系列之:部署Debezium采集Oracle数据库的详细步骤

Debezium分享系列之:部署Debezium采集Oracle数据库的详细步骤 一、部署Debezium Oracle连接器二、Debezium Oracle 连接器配置三、添加连接器配置四、可插拔数据库与不可插拔数据库一、部署Debezium Oracle连接器 部署的详细步骤可以参考博主这篇技术文章: Debezium系列之:…

基于飞浆paddle的Mv3驾驶员行为识别

“其实一开始并没有想学深度学习” ! pip install --upgrade pip ! pip install paddlex ! pip install --user --upgrade pyarrow11.0.0 # 配置环境 train_list格式(test同理):图片路径\t标签 newLabels格式:标签 训练代码 impo…

Redis之路系列(3)纸上得来终觉浅(下)

03 纸上得来终觉浅(下) 基于Redis6,本章节主要介绍了Rdis的一些主要应用场景,包含了:大数据的过滤,分布式锁设计,并讲解了有趣的布隆过滤器原理,HyperLogLog 原理,二进制位数与存储大小计算的常…

首字母大写

从一个文件中读取一篇英文文章,请将文章中所有单词首字母大写并存入另一个文件中。“单词”是指一串连续的字母。 函数接口定义: void CapitalizeTheFirstLetter(FILE *in, FILE *out); 说明:参数 in 和 out 为指示两个文件的指针。函数从…

databricks spark基本使用方法和讲解

databricks spark基本使用方法 文章目录 databricks spark基本使用方法spark dataframe和pandas dataframe区别概念小例子:感受下语法差异! 基本使用生成序列数据显示数据查看rdd的分区数和作用对列进行操作 spark dataframe和pandas dataframe区别 概念…