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