自定义React Hooks(超时):useTimeout

时间:2022-07-02 17:51:15

使用useTimeout Hook,我们可以使用声明式方法来实现setTimeout。 

  1. 创建一个带有回调callback和延迟的Hook。 
  2. 使用useRef为callback创建一个ref。
  3. 两次使用useEffect。 一次用于记住最后一个回调,一次用于设置超时和清除。

示例:

const useTimeout = (callback, delay) => {
const savedCallback = React.useRef();
React.useEffect(() => {
function tick() {
savedCallback.current();
}
if(delay != null) {
let id = setTimeout(tick, delay);
return () => clearTimeout(id);
}
},[delay])
}

使用示例:

const ExampleTimerFiveSeconds = props => {
const [seconds, setSeconds] = React.useState(0);
useTimeout(() => {
setSeconds(seconds+1);
}, 5000);
return <p>{seconds}</p>
}
ReactDOM.render(<ExampleTimerFiveSeconds />, document.getElementById("root"));