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(()=>{
		//后续操作放在这
	})
}
相关推荐
brzhang1 分钟前
实时通信的那些事儿:短轮询、长轮询、SSE 和 WebSocket 到底怎么选?
前端·后端·架构
玄魂6 分钟前
开源之夏2025-VisActor 社区题目及参赛者选/培介绍
前端·开源·资讯
浪裡遊7 分钟前
TypeScript中的函数类型定义与类型约束
javascript·ubuntu·typescript
camellia8 分钟前
SpringBoot(二十四)SpringBoot集成redis哨兵集群
java·前端·后端
YH丶浩10 分钟前
React 实现爱心花园动画
前端·react.js·前端框架
啵啵学习18 分钟前
浏览器插件,提示:此扩展程序未遵循 Chrome 扩展程序的最佳实践,因此已无法再使用
前端·chrome·浏览器·插件·破解
Mintopia24 分钟前
# 使用 Three.js 实现带随机障碍物的小车行驶模拟
前端·javascript·three.js
Mintopia24 分钟前
图形学与坐标系入门教学
前端·javascript·计算机图形学
独立开阀者_FwtCoder40 分钟前
8年磨一剑,Koa 3.0 正式发布!看看带来了哪些新功能
前端·javascript·后端
Frankabcdefgh1 小时前
初中级前端面试全攻略:自我介绍模板、项目讲解套路与常见问答
前端·面试·职场和发展