能不能把useTimeout升级一下?
npmstudy opened this issue · comments
npmstudy commented
用法示意
import { useTimeout } from 'ahooks/useTimeout';
export default () => {
const [counter, setCounter] = useState(0)
const [start, clear, isActive] = useTimeout(() => setCounter(counter + 1), 0, false);
return (
<div className="App" onClick={() => start()}>
<h1 style={{border:'1px dashed'}}>点击开启定时器 {counter}</h1>
</div>
);
};
如果需要,我把pr和测试提上来。
云泥 commented
其实目前已经满足你这个使用场景了:
文档里有提到:useTimeout 的时间设置为 undefined 时会停止定时器
import React, { useState } from 'react';
import { useInterval } from 'ahooks';
export default () => {
const [count, setCount] = useState(0);
const [delay, setDelay] = useState<number | undefined>(1000);
const isActive = delay !== undefined;
const start = () => setDelay(1000);
const pause = () => setDelay(undefined);
const clear = useInterval(() => {
setCount(count + 1);
}, delay);
return (
<div>
<button onClick={start}>start</button>
<button onClick={pause}>pause</button>
<button onClick={clear}>clear</button>
<div>isActive: {`${isActive}`}</div>
<div>count: {count}</div>
</div>
);
};
不过比较麻烦一些。可以考虑升级一下
云泥 commented
旧 API:
const clear = useTimeout(fn, delay);
新 API:
const {
start,
pause,
clear,
isActive,
} = useTimeout(fn, delay, {
defaultActive: false
})
start
:(delay?: number) => void
pause
:() => void
clear
:() => void
isActive
:boolean
会引入 breaking change。看看大家的意见~
另外,@npmstudy 要不分享下你的使用场景?
pgg commented
目前useTimeout(fn, delay); 返回的仅仅是一个 clear 函数,如果要为以后迭代更丰富的功能,确实应该返回成对象,方便扩展。
是不是应该放到4.x去做这件事@liuyib
云泥 commented
目前useTimeout(fn, delay); 返回的仅仅是一个 clear 函数,如果要为以后迭代更丰富的功能,确实应该返回成对象,方便扩展。
是不是应该放到4.x去做这件事@liuyib
是的,破坏性更改。需要 v4 做
npmstudy commented
好的,这周搞定
npmstudy commented
还有一些新增修改,比如start方法,需要把参数透传给具体fn。
npmstudy commented
补充写法
function fn(x:number) {
setCounter(counter + x)
}
const [start, clear, isActive] = useTimeout(fn, 0, false);
cdxcdx commented
完全没有必要做
cdxcdx commented
会让useTimeout更难理解