react 使用自定义hooks封装不会反复创建的定时器（setInterval）

react 需要通过useRef来创建定时器，否则清不干净，每次去写太麻烦，简单封装一下，直接代码

自定义hooks

import { useRef, useState } from 'react';

const useTimer = (step = 1) => {
  const timer = useRef(null)
  const [ num, setNum ] = useState(0)
  const start = () => {
    const timeout = setInterval(() => {
      setNum((num) => num + 1) // 不能写为setNum(num + 1)；就不会更新num 的值
    }, step * 1000)
    timer.current = timeout
  }
  const clear = () => {
    setNum(0)
    clearInterval(timer.current)
  }
  return {
    num,
    start,
    clear
  }
}
export default useTimer

在组件中使用

import React, { useEffect, useState } from 'react';
import { Steps } from 'antd';
import useTimer from '@/hooks/timer'
const { Step } = Steps;
export default function Home() {
  const [current, setcurrent] = useState(0);
  const { num, start, clear } = useTimer(2)
  useEffect(() => {
	start() // 启动定时器
  }, []);
  const changeStep = (num: number) => {
    setcurrent(num)
    clear() // 清除定时器
    start() // 重新启动
  }
  return (
   <div className='container'>
     <div className="box">
        <div className="time-box">
          已浏览当前模块：{num}秒
        </div>
        <Steps className='steps' size="small" current={current} direction="vertical">
          <Step onClick={ () => {changeStep(0)} } title="广交会" />
          <Step onClick={ () => {changeStep(1)} } title="天津智能大会" />
          <Step onClick={ () => {changeStep(2)} } title="游密云" />
        </Steps>
     </div>
   </div>
  );
}