在 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创建一个引用来存储最新的回调函数。
