React实现可暂停倒计时效果

import React from 'react'
import { Button } from 'antd'


export default function Test({time, onTime}){
  // 倒计时时间
  const [selfTime, setSelfTime] = React.useState(time)
  // 按钮状态
  const [stopState, setStopState] = React.useState(false)



  let myTimer = (function(){

    let timer = null

    // 打开倒计时
    function openTime (){
      timer = setTimeout(()=>{
        setSelfTime(selfTime - 1)
      },1000)
    }
    // 关闭倒计时
    function closeTime(){
      clearTimeout(timer)
    }
    return {
      openTime,
      closeTime
    }
  })()

  React.useEffect(()=>{
    (stopState || !selfTime) ? myTimer.closeTime() :  myTimer.openTime()
    return()=>{
      myTimer.closeTime()
    }
  })

  React.useEffect( ()=>{
    !selfTime && onTime && onTime()
  },[selfTime] )


  // 暂停/继续按钮点击
  function stopBtn(){
    setStopState(!stopState)
  }

  return(
    <div>
      <p>剩余秒数：{selfTime || 0}</p>
      <Button onClick={stopBtn}>{stopState ? '继续' : '暂停'}</Button>
    </div>
  )
}