@hemyn/utils-web

hm-utils

跨项目通用工具整理。

package

yarn build

useCountDown

在hooks中使用setInterval自动计时，由于在setInterval中无法顺利的读取useState的值，因此在setInterval中直接调用setState是无效的。解决办法是使用useRef，直接更新target.current，但是这样又会出现一个问题是：虽然target.current的值是实时更新的，但是却无法出发组件的re-render的操作。因此有了这种解决办法，在setInterval中setState的值依赖的不再是state，改为了target.current。具体细节看代码，示例如下：

import { useCountDown } from '@hemyn/utils'

const SomeComponent = () => {
  const {
    current: countDownCurrent,  // 实时读取最新的值
    start: countDownStart,  // 开始即时，同一时刻只能有一个计时器
    stop: countDownStop     // 手动停止计时
  } = useCountDown();

  ...
      countDownStart(10, 1000, afterCountToZeroRun)
  ...
      countDownStop()

  return (...<div>{countDownCurrent}</div>...)

}