useInterval

作用

一个可以处理 setInterval 的 Hook, 用于代替 setInterval。

原理

通过 useEffect 来对 setInterval 进行封装

源码

import { useCallback, useEffect, useRef } from 'react'

// 持久化缓存目标函数，保证函数的地址不变
import useMemoizedFn from '../useMemoizedFn'

// 判断是否是数字的工具函数
import { isNumber } from '../utils'

const useInterval = (fn: () => void, delay?: number, options: { immediate?: boolean } = {}) => {
  // 持久化需要执行的函数
  const timerCallback = useMemoizedFn(fn)
  // 缓存定时器的引用
  const timerRef = useRef<NodeJS.Timer | null>(null)

  // 清除定时器的函数
  const clear = useCallback(() => {
    if (timerRef.current) {
      clearInterval(timerRef.current)
    }
  }, [])

  useEffect(() => {
    if (!isNumber(delay) || delay < 0) {
      return
    }
    // 如果设置了 immediate 为 true，则立即执行一次
    if (options.immediate) {
      timerCallback()
    }
    // 设置定时器
    timerRef.current = setInterval(timerCallback, delay)

    // 组件卸载时清除定时器
    return clear
  }, [delay, options.immediate])

  // 返回清除定时器的函数
  return clear
}

export default useInterval

区别

• 与 setInterval 不同的是，useInterval 会在组件卸载时自动清除定时器，避免内存泄漏。
• delay 依赖变化的时候会自动清除定时器，重新设置定时器。
• immediate 为 true 时，会立即执行一次。