react-use 库 (opens new window)

react-use 库文档(很好的文档) (opens new window)

定时器

• 封装

//useInterval.js
import { useEffect, useRef } from 'react'

const useInterval = (callback, delay) => {
  const savedCallback = useRef(() => {})

  useEffect(() => {
    savedCallback.current = callback
  })

  useEffect(() => {
    if (delay !== null) {
      const interval = setInterval(() => savedCallback.current(), delay || 0)
      return () => clearInterval(interval)
    }
    return undefined
  }, [delay])
}

export default useInterval

• 使用

import useInterval from './useInterval'

...
useInterval(()=>{
  ...
},1000)
...

布尔值

import { useCallback, useState } from 'react'

const useToggle = (initialValue) => {
  const [value, setValue] = useState(initialValue)

  const toggle = useCallback(
    (nextValue) => {
      if (typeof nextValue === 'boolean') {
        setValue(nextValue)
      } else {
        setValue((currentValue) => !currentValue)
      }
    },
    [setValue]
  )

  return [value, toggle]
}

export default useToggle

• 使用

...
const [flag,toggle] =useToggle(false)
...
flag // false
toggle(false) //传参指定boolean值
toggle() //不传参取反

获取 state 改变前的值

import { useEffect, useRef } from 'react'

const usePrevious = (state) => {
  const ref = useRef()

  useEffect(() => {
    ref.current = state
  })

  return ref.current
}

export default usePrevious