feat(react): 新增 useInterval

src/react/index.ts

@@ -8,7 +8,7 @@
 
 export * from 'react-use'
 
-// @index(['./**/*.ts', '!./**/*.{test,taro}.*', '!./{useToggle,createGlobalState,useTitle}.*'], f => `export * from '${f.path}'`)
+// @index(['./**/*.ts', '!./**/*.{test,taro}.*', '!./{useToggle,createGlobalState,useTitle,useInterval}.*'], f => `export * from '${f.path}'`)
 export * from './useClassName'
 export * from './useLoadMore'
 export * from './useReachBottom'
@@ -26,3 +26,4 @@ export {
   CreateGlobalStateState,
 } from './createGlobalState'
 export { useTitle } from './useTitle'
+export { useInterval, UseIntervalResult } from './useInterval'

src/react/useInterval.test.ts

@@ -0,0 +1,20 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { useInterval } from './useInterval'
+import { wait } from '../utils'
+
+describe('useInterval', () => {
+  test('表现正常', async () => {
+    let i = 0
+    const { result } = renderHook(() => useInterval(() => i++, 20))
+    expect(result.current[0]).toBe(0)
+    await wait(20)
+    expect(result.current[0]).toBe(1)
+    result.current[1].stop()
+    await wait(40)
+    expect(result.current[0]).toBe(1)
+    result.current[1].start()
+    expect(result.current[0]).toBe(2)
+    await wait(20)
+    expect(result.current[0]).toBe(3)
+  })
+})

src/react/useInterval.ts

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useLatest } from 'react-use'
+
+export type UseIntervalResult<TResult> = [
+  TResult,
+  {
+    start: () => void
+    stop: () => void
+  },
+]
+
+export function useInterval<TResult>(
+  callback: () => TResult,
+  delay: number,
+): UseIntervalResult<TResult> {
+  const [result, setResult] = useState<TResult>(callback)
+  const latestCallback = useLatest(callback)
+  const latestDelay = useLatest(delay)
+  const interval = useRef<any>()
+  const isFirst = useRef<boolean>(true)
+
+  const stop = useCallback(() => {
+    if (interval.current) {
+      clearInterval(interval.current)
+    }
+  }, [])
+
+  const start = useCallback(() => {
+    stop()
+    if (!isFirst.current) {
+      setResult(latestCallback.current())
+    }
+    interval.current = setInterval(() => {
+      setResult(latestCallback.current())
+    }, latestDelay.current)
+  }, [])
+
+  useEffect(() => {
+    start()
+    return stop
+  }, [delay])
+
+  useEffect(() => {
+    isFirst.current = false
+    return () => {
+      isFirst.current = true
+    }
+  }, [])
+
+  return [result, { start, stop }]
+}