在 React 应用中，延迟执行某些操作是一个常见需求。传统的 setTimeout 在函数组件中使用可能会导致一些问题，如闭包陷阱或难以正确清理。useTimeout 钩子提供了一种声明式的方法来实现延迟执行，使得定时器的管理更加简单和可靠。这个自定义钩子不仅简化了定时器的使用，还解决了一些常见的定时器相关问题。以下是如何实现和使用这个自定义钩子：
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 />
);这个技巧的关键点包括：
使用
useRef创建一个引用来存储最新的回调函数。
