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(()=>{
		//后续操作放在这
	})
}
相关推荐
勘察加熊人16 分钟前
vue猜词游戏
前端·vue.js·游戏
且心16 分钟前
【问题处理】webpack4升webpack5,报错Uncaught ReferrnceError: process is not defined
前端·webpack5·process·uncaught·referrnceerror
美美打不死18 分钟前
webpack js 逆向 --- 个人记录
开发语言·javascript·webpack
我是哈哈hh39 分钟前
【Vue】 核心特性实战解析:computed、watch、条件渲染与列表渲染
前端·javascript·vue.js·前端框架·vue·语法基础
龙在天1 小时前
“手速太快,分页翻车?”,前端分页竞态问题,看这一篇就够了
前端
前端Hardy1 小时前
HTML&CSS:超好看的收缩展开菜单
javascript·css·html
Riesenzahn1 小时前
你使用过css3的:root吗?说说你对它的理解
前端·javascript
前端Hardy1 小时前
HTML&CSS:哇塞!Three.js 打造的 3D 交互平面,鼠标滑动纹理如梦幻般变形!
javascript·css·html
Riesenzahn1 小时前
在js中undefined和undeclared有什么区别?
前端·javascript
打野赵怀真1 小时前
平时有经常用到nextTick吗?谈谈你对nextTick的理解。
前端·javascript