react经验12:等待状态更新

淘人居士2024-04-20 11:02

应用场景:

等待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(()=>{
		//后续操作放在这
	})
}