文章预览
在 React 应用中, 实现定时器功能 通常需要使用 setInterval() 和 clearInterval() ,这可能会导致代码复杂和难以维护。 useInterval 钩子提供了一种声明式的方法来实现定时器功能,使得定时器的管理更加简单和直观。这个自定义钩子不仅简化了定时器的使用,还解决了一些常见的定时器相关问题。以下是如何实现和使用这个自定义钩子: 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, setSeco
………………………………