当我们使用react中useState这个hook时候,如下
const [page, setPage] = useState(1);
const handlerClick = (e)=>{
setPage(e.current);
console.log(page);
}
当我打印page时候,此时page还是1,因为useState的更新是异步的,这和react的机制有关,要解决这个可以这样做
1.使用useState的返回值
setPage(e.current);
setPage(prevFoo => {
console.log('page===========',prevFoo);//page=========== 2
return prevFoo;
});
2.自定义hook(第一种方式)
const useSyncCallback = callback => {
const [proxyState, setProxyState] = useState({ current: false });
const Func = useCallback(() => {
setProxyState({ current: true });
}, [proxyState]);
useEffect(() => {
if (proxyState.current === true) {
setProxyState({ current: false });
}
}, [proxyState]);
useEffect(() => {
proxyState.current && callback();
});
return Func;
};
const funcqq = useSyncCallback(() => {
console.log('page===========',page);//page=========== 2
});
//调用
setPage(e.current);
funcqq()
自定义hook(第二种方式)
function useCurrentValue(value) {
const ref = useRef(value);
useEffect(() => {
ref.current = value;
}, [value]);
return ref;
}
//调用
const log = () => {
setCount(count + 1);
setTimeout(() => {
console.log(currentCount.current);
}, 3000);
};
3.使用useRef替代useState,第三种方式在自定义hook第二种方式里面已经体现了
4.使用useEffect,在自定义hook第二种方式里面已经体现了