react-basics-hooks

React Hooks 规范

本规则由 @react-basics 引用

自定义 Hooks 设计模式

useLocalStorage

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key)
      return item ? JSON.parse(item) : initialValue
    } catch { return initialValue }
  })

  const setValue = (value) => {
    const valueToStore = value instanceof Function ? value(storedValue) : value
    setStoredValue(valueToStore)
    window.localStorage.setItem(key, JSON.stringify(valueToStore))
  }
  return [storedValue, setValue]
}

useDebounce

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay)
    return () => clearTimeout(handler)
  }, [value, delay])
  return debouncedValue
}

useAsync

function useAsync(asyncFunction, immediate = true) {
  const [status, setStatus] = useState('idle')
  const [value, setValue] = useState(null)
  const [error, setError] = useState(null)
  const execute = useCallback(() => {
    setStatus('pending')
    return asyncFunction()
      .then(res => { setValue(res); setStatus('success'); return res })
      .catch(err => { setError(err); setStatus('error'); throw err })
  }, [asyncFunction])
  useEffect(() => { if (immediate) execute() }, [execute, immediate])
  return { execute, status, value, error }
}

useIntersectionObserver

function useIntersectionObserver(options = {}) {
  const [isIntersecting, setIsIntersecting] = useState(false)
  const ref = useRef()
  useEffect(() => {
    const el = ref.current
    if (!el) return
    const observer = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting)
    }, options)
    observer.observe(el)
    return () => observer.unobserve(el)
  }, [options])
  return [ref, isIntersecting]
}

useForm 模式