发布于 3年前

自定义React Hooks(超时):useTimeout

使用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"));
©2020 edoou.com   京ICP备16001874号-3