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(()=>{
		//后续操作放在这
	})
}
相关推荐
IT_陈寒12 分钟前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只29 分钟前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience34 分钟前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹35 分钟前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo36 分钟前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse36 分钟前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye41 分钟前
前端架构师,是架构什么
前端·架构
全马必破三44 分钟前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库1 小时前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库
一枚前端小能手1 小时前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript