最近在从0-1阅读Ahooks源码,有兴趣的可以一起来。
你们在开发中是不是有这种需求,比如做了一些操作需要强制刷新组件,但是你又没有依赖的State,是不是很苦恼?
接下来的hooks就可以满足你的要求。
代码如下:
import { useCallback, useState } from 'react';
const useUpdate = () => {
const [, setState] = useState({});
// 使用usecallback缓存
// 因为setState({}) 的对象和原来的state原来的对象引用地址是不同的所以肯定会刷新组件
return useCallback(() => setState({}), []);
};
export default useUpdate;
使用如下:
export default () => {
const update = useUpdate();
return (
<>
<div>Time: {Date.now()}</div>
<button type="button" onClick={update} style={{ marginTop: 8 }}>
update
</button>
</>
);
};