react经验12:等待状态更新

应用场景:

等待react组件内的state发生变更后进行后续操作。

已知问题

通常state的变化会引起dom的刷新，更新state一般使用setState，但这是个异步操作。
如果此时需要立即操作dom，得到的目标dom是刷新之前的样子。

应对方法

方法1:使用useEffect监听state，当监听的state发生变化时会触发回调，此时的dom也刷新完毕。
举例:

const [count,setCount]=useState(0)
useEffect(()=>{
//这里是state的监听回调
},[count])
1
2
3
4

方法2:
使用timeout，调用setState后，后续操作放在timeout中处理。
举例:

const [count,setCount]=useState(0)
function handleChange(val:number){
	setCount(val)
	setTimeout(()=>{
		//后续操作放在这
	})
}
1
2
3
4
5
6
7