手写实现一个倒计时

七崽爱吃小饼干2026/03/02阅读 0

我这里通过setCount的函数式写法，让setCount从hooks链上直接获取之前的count值。这里也可以用useRef获得一个稳定的引用来解决。

第二个点就是，因为是在严格模式下进行的，所以useEffect会执行两次，会创建两个interval。所以需要卸载interval。否则会出现count一次减2的情况。

第三点在于减到0的时候就需要停止倒计时，也就是需要清除定时器。我这里在precount变成0的时候进行清除。

jsx

import { useEffect, useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(3)
  useEffect(() => {
    const timer = setInterval(() => {
      setCount((preCount) => {
        if(preCount > 0){
          return preCount - 1
        }else{
          clearInterval(timer)
          return 0
        }
      })
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [])
  return (
    <>
      {count}
    </>
  )
}

export default App