自定义定时器hook(推荐阅读)

1. 通过useRef，useEffect定义一个定时器hook

 

import { useRef, useEffect } from 'react';

export default function useInterval(callback, delay) {
    const latestCallback = useRef(() => {});

    useEffect(() => {
        latestCallback.current = callback;
    });

    useEffect(() => {
        if (delay !== null) {
            const interval = setInterval(() => latestCallback.current(), delay || 0);
            return () => clearInterval(interval);
        }
        return undefined;
    }, [delay]);
}

2. 使用

 

import { useInterval } from 'utils'
const test = props => {
    const [count, setCount] = useState(5);
    useInterval(() => {
        setCount(count - 1);
    }, 1000);
    return (
        <View>
            {count < 1 ? (
                <Button {...resendBtn} press={() => setCount(5)} />
            ) : (
                <Text style={{ margin: 5, color: 'gray', fontSize: 12 }}>{count}s后重新发送</Text>
            )}
        </View>
    );
};

作者：无言无意
链接：https://www.jianshu.com/p/ddfc4e53602f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。