React-Idle-Timer如何实现剩余时间逐秒静态倒计时展示

完全可以实现无需用户操作触发的逐秒剩余时间倒计时展示。

官方示例只在事件回调中读取剩余时间，本质是因为回调触发时才会执行对应逻辑，只要添加定时轮询逻辑持续读取剩余时间、更新组件状态，就能实现页面静态区域的逐秒刷新倒计时。

实现步骤 #

• 新增组件本地状态存储实时剩余时间
• 组件挂载后启动1秒间隔的定时器，每秒调用一次getRemainingTime()获取最新值更新状态
• 在组件卸载、用户进入空闲状态时清除定时器，避免内存泄漏和无效计算
• 对拿到的毫秒级剩余时间做格式化，直接渲染到页面对应位置即可

完整可运行代码 #

import React, { useState, useEffect, useRef } from 'react'
import { useIdleTimer } from 'react-idle-timer'
import App from './App'

export default function (props) {
  const [remainingTime, setRemainingTime] = useState(0)
  const timerRef = useRef(null)

  const handleOnIdle = event => {
    console.log('user is idle', event)
    console.log('last active', getLastActiveTime())
    // 进入空闲状态后停止倒计时更新
    if (timerRef.current) clearInterval(timerRef.current)
  }

  const handleOnActive = event => {
    console.log('user is active', event)
    // 用户回到活跃状态时重启倒计时
    startCountdown()
  }

  const handleOnAction = event => {
    console.log('user did something', event)
  }

  const { getRemainingTime, getLastActiveTime } = useIdleTimer({
    timeout: 1000 * 60 * 15,
    onIdle: handleOnIdle,
    onActive: handleOnActive,
    onAction: handleOnAction,
    debounce: 500
  })

  const startCountdown = () => {
    // 先清除已有定时器，避免重复创建
    if (timerRef.current) clearInterval(timerRef.current)
    // 初始化时立刻同步一次剩余时间
    setRemainingTime(getRemainingTime())
    // 启动每秒更新
    timerRef.current = setInterval(() => {
      setRemainingTime(getRemainingTime())
    }, 1000)
  }

  useEffect(() => {
    startCountdown()
    // 组件卸载时清理定时器
    return () => {
      if (timerRef.current) clearInterval(timerRef.current)
    }
  }, [])

  // 格式化时间为 分:秒 格式，可按需调整为小时/天等单位
  const formatRemainingTime = (ms) => {
    const totalSec = Math.floor(ms / 1000)
    const minutes = Math.floor(totalSec / 60)
    const seconds = totalSec % 60
    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
  }

  return (
    <div>
      {/* 逐秒刷新的倒计时展示位 */}
      <p>距离超时自动空闲剩余：{formatRemainingTime(remainingTime)}</p>
      <App />
    </div>
  )
}

简化写法（适用于v5.0及以上版本） #

如果你使用的是5.0以上版本的react-idle-timer，钩子本身已经内置了响应式的剩余时间返回值，不需要自行编写定时器逻辑，直接解构使用即可：

const { remainingTime } = useIdleTimer({
  timeout: 1000 * 60 * 15,
  onIdle: handleOnIdle,
  onActive: handleOnActive,
  onAction: handleOnAction,
  debounce: 500
})
// 直接在JSX中使用remainingTime，值会自动逐秒更新

内容的提问来源于stack exchange，提问作者gene b.