React useTimeout钩子
以声明式的方式实现setTimeout()
。
- 创建一个自定义钩子,接受一个
callback
和一个delay
参数。 - 使用
useRef()
钩子为回调函数创建一个ref
。 - 使用
useEffect()
钩子来记住最新的回调函数。 - 使用
useEffect()
钩子来设置定时器并进行清理。
const useTimeout = (callback, delay) => {
const savedCallback = React.useRef();
React.useEffect(() => {
savedCallback.current = callback;
}, [callback]);
React.useEffect(() => {
const tick = () => {
savedCallback.current();
}
if (delay !== null) {
let id = setTimeout(tick, delay);
return () => clearTimeout(id);
}
}, [delay]);
};
const OneSecondTimer = props => {
const [seconds, setSeconds] = React.useState(0);
useTimeout(() => {
setSeconds(seconds + 1);
}, 1000);
return <p>{seconds}</p>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<OneSecondTimer />
);