useInterval Hook 使用说明

功能概述

useInterval 是一个 React Hook，用于实现 setInterval 的声明式管理，提供更安全、可控的定时器功能。

基础用法

import { useInterval } from './useInterval';

function TimerComponent() {
    const [count, setCount] = useState(0);

    const { start, clear, isRunning } = useInterval(
        () => setCount(c => c + 1),
        1000,
        true, // 立即执行
    );

    return (
        <div>
            <p>计数: {count}</p>
            <button onClick={start} disabled={isRunning}>
                开始
            </button>
            <button onClick={clear}>停止</button>
        </div>
    );
}

API 说明

输入参数

参数	类型	必填	默认值	说明
callback	() => void	是	-	定时执行的回调函数
delay	number \| null	是	-	间隔时间(ms)，设为 null 停止计时
immediate	boolean	否	false	是否立即执行一次回调

返回值

属性	类型	说明
start	() => void	启动定时器
clear	() => void	清除定时器
isRunning	boolean	当前是否正在运行

高级用法

动态调整间隔

const [delay, setDelay] = useState(1000);

useInterval(() => {
    console.log(`每 ${delay}ms 执行`);
}, delay);

条件执行

useInterval(
    fetchData,
    shouldPoll ? 5000 : null, // 条件停止
);

组合控制

const { start, clear } = useInterval(callback, 1000);

useEffect(() => {
    start();
    return clear; // 组件卸载时自动清理
}, []);