React Native倒计时Hook每分钟丢失1秒问题排查求助

我来帮你拆解下这两个问题的根源，以及对应的修复办法：

核心问题1：倒计时跳秒/丢秒 #

你的代码里有两个关键错误导致了跳秒：

1. today 变量的生命周期错误：你在组件初始化时创建了 const today = new Date()，之后每次interval回调里用的都是这个固定的初始时间，而不是实时的当前时间。这会导致计算的差值越来越不准，甚至当interval重复创建时，多次计算的差值会出现跳变。
2. useEffect依赖错误导致重复创建interval：你把time作为useEffect的依赖，这意味着每次time更新，都会销毁旧的interval并创建新的。而setInterval本身不是精确的1000ms触发，加上组件更新的耗时，会导致多个interval同时运行，多次调用setTime，最终出现跳秒（比如一次减2秒）。

核心问题2：初始卡顿1秒 #

初始卡顿是因为useEffect在组件挂载后才会执行，初始state是基于组件挂载时的时间计算的，但第一次interval要等1秒才会更新状态，所以看起来像卡顿了1秒。你临时加1秒的做法只是掩盖了问题，不是根本解决方式。

修复后的完整代码 #

import { differenceInDays, differenceInHours, differenceInMinutes, differenceInSeconds, isBefore, parseISO, } from 'date-fns'
import { useEffect, useState } from 'react'

type CountdownResult = {
  days: number
  hours: number
  minutes: number
  seconds: number
}

const calculateDuration = (endDate: Date, currentDate: Date): CountdownResult => {
  if (isBefore(endDate, currentDate)) {
    return { days: 0, hours: 0, minutes: 0, seconds: 0 }
  }
  const days = differenceInDays(endDate, currentDate)
  const hours = differenceInHours(endDate, currentDate) % 24
  const minutes = differenceInMinutes(endDate, currentDate) % 60
  const seconds = differenceInSeconds(endDate, currentDate) % 60
  return { days, hours, minutes, seconds }
}

const useCountdown = (endDate: string): CountdownResult => {
  const formattedEndDate = parseISO(endDate)
  // 初始状态直接用当前实时时间计算
  const [time, setTime] = useState(() => calculateDuration(formattedEndDate, new Date()))

  useEffect(() => {
    // 提前判断是否已过期，避免创建无用的interval
    if (isBefore(formattedEndDate, new Date())) return

    const intervalId = setInterval(() => {
      // 每次回调都获取实时的当前时间
      setTime(calculateDuration(formattedEndDate, new Date()))
    }, 1000)

    // 组件卸载时清除interval
    return () => clearInterval(intervalId)
  }, [formattedEndDate]) // 只依赖endDate解析后的结果，避免不必要的重新渲染

  return time
}

export default useCountdown

关键修复点说明 #

• 实时计算当前时间：把currentDate作为参数传入calculateDuration，每次interval回调都创建新的new Date()，确保差值计算的准确性。
• 修正useEffect依赖：只依赖formattedEndDate，这样只有当endDate变化时才会重新创建interval，避免了重复创建多个interval的问题。
• 初始状态直接计算：使用useState的回调初始化方式，确保初始状态就是实时的差值，不需要额外加1秒解决卡顿问题。
• 统一过期判断：把过期判断整合到calculateDuration里，代码更简洁。

另外补充个小细节：如果倒计时结束后，useEffect开头的判断会直接跳过interval创建，不会有无效的定时器运行。

内容的提问来源于stack exchange，提问作者vitosorriso