react hooks中使用setInterval

let int = useRef()

创建定时器

int.current = setInterval(() => {
    // 这里写业务
}, 200);

清除定时器

clearInterval(int.current)

需要注意的是假如每次增加1，setNum(num+1)是无法生效的，要使用回调

setNum(pre => {
    return pre + 1;
});

这样每次拿到的就是上次更新之后的结果  然后+1

完整代码：

const TestInt = () => {

    let int = useRef()

    const [num, setNum] = useState(0)

    useEffect(() => {
        setNum(0)
    }, [])

    const startClick = () => {
        int.current = setInterval(() => {
            setNum(pre => {
                return pre + 1;
            });
        }, 200);
    }

    const stopClick = () => {
        clearInterval(int.current)
    }

    return (
        <div className="main">
            <div className="mesMain" >
                <div> {num} </div>
                <div>
                    <Button type="primary" onClick={startClick}>开始</Button>
                    <Button style={{ marginLeft: 10 }} onClick={stopClick}>停</Button>
                </div>
            </div>
        </div>
    )
}