如何在React函数式组件中使用react-idle-timer v5的IdleTimer

IdleTimer v5 版本完成了从零到一的重构，使用逻辑和旧版本差异较大，官方提供的旧模式兼容示例基于类组件编写，以下是适配函数式组件的可直接落地的实现方案，能力完全对齐原类组件写法。

1. 封装函数式版本的IdleTimer通用组件 #

原类组件的封装逻辑核心是透传children和ref，函数式组件借助forwardRef实现ref透传即可，不需要写类结构：

import { forwardRef } from 'react'
import { withIdleTimer } from 'react-idle-timer'

const IdleTimerInner = forwardRef((props, ref) => {
  return props.children
})

export const IdleTimer = withIdleTimer(IdleTimerInner)

2. 业务组件中接入使用 #

函数式组件通过useRef持有IdleTimer实例，事件回调建议用useCallback缓存引用，避免重复绑定导致的异常触发：

import { useRef, useCallback, useEffect } from 'react'
import HomePage from './HomePage'
// 引入上面封装好的IdleTimer组件
import { IdleTimer } from './components/IdleTimer'

export default function Layout() {
  const idleTimerRef = useRef(null)

  // 触发闲置提示时的逻辑：比如弹出「你已经长时间未操作，即将退出登录」的弹窗
  const onPrompt = useCallback(() => {
    // 自定义业务逻辑
  }, [])

  // 达到超时时间、判定为闲置状态的逻辑：比如清空登录态、跳转登录页
  const onIdle = useCallback(() => {
    // 自定义业务逻辑
  }, [])

  // 监听到用户任意操作时的触发逻辑：可用于活跃状态埋点
  const onAction = useCallback(() => {
    // 自定义业务逻辑
  }, [])

  // 用户从闲置/提示状态恢复为活跃状态的逻辑：比如关闭闲置提示弹窗
  const onActive = useCallback(() => {
    // 自定义业务逻辑
  }, [])

  // 配置了startManually属性时，需要手动调用start方法启动计时器
  useEffect(() => {
    // 比如等用户信息加载完成、登录成功后再启动计时
    idleTimerRef.current?.start()
  }, [])

  return (
    <>
      <IdleTimer
        ref={idleTimerRef}
        timeout={1000 * 60 * 15} // 15分钟无操作判定为待提示状态
        promptTimeout={1000 * 30} // 提示弹出后30秒无操作判定为闲置
        onPrompt={onPrompt}
        onIdle={onIdle}
        onAction={onAction}
        onActive={onActive}
        startManually
      />
      <HomePage />
    </>
  )
}

使用注意事项 #

• 所有传入IdleTimer的事件回调必须用useCallback包裹缓存，如果直接写内联函数，每次组件重渲染都会生成新的函数引用，会导致组件内部重复解绑、绑定事件，出现回调重复触发、计时不准的问题
• 配置startManually属性后，不会在组件挂载时自动启动计时，必须通过ref实例调用start()方法手动启动，适合需要等登录态、用户权限加载完成后再开启闲置检测的场景
• 拿到ref实例后，可以直接调用IdleTimer提供的所有原生实例方法，比如reset()重置计时、pause()暂停计时、getRemainingTime()获取距离超时的剩余时间，调用方式和类组件完全一致

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