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(()=>{
		//后续操作放在这
	})
}
相关推荐
@小红花11 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵11 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲11 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年11 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒11 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku12 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing12 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_4569042712 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说12 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567012 小时前
学习日记-HTML-day51-9.9
前端·学习·html