react经验12:等待状态更新

应用场景:

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

已知问题

通常state的变化会引起dom的刷新,更新state一般使用setState,但这是个异步操作。

如果此时需要立即操作dom,得到的目标dom是刷新之前的样子。

应对方法

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

举例:

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

方法2 :

使用timeout,调用setState后,后续操作放在timeout中处理。

举例:

js 复制代码
const [count,setCount]=useState(0)
function handleChange(val:number){
	setCount(val)
	setTimeout(()=>{
		//后续操作放在这
	})
}
相关推荐
慧一居士3 分钟前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js
颜酱6 分钟前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法
木易 士心15 分钟前
Nginx 基本使用和高级用法详解
运维·javascript·nginx
蒙特卡洛的随机游走25 分钟前
Spark的宽依赖与窄依赖
大数据·前端·spark
共享家952732 分钟前
QT-常用控件(多元素控件)
开发语言·前端·qt
幸运小圣32 分钟前
Iterator迭代器 【ES6】
开发语言·javascript·es6
葱头的故事33 分钟前
将传给后端的数据转换为以formData的类型传递
开发语言·前端·javascript
中微子44 分钟前
🚀 2025前端面试必考:手把手教你搞定自定义右键菜单,告别复制失败的尴尬
javascript·面试
_23331 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·vue.js
jump6801 小时前
js中数组详解
前端·面试