前端面试复习系列之react-hooks

监听深度依赖的值变化

import { isEqual } from 'lodash';
function useDeepCompareEffect(fn, deps){
    const comparisons = useRef(0);
    const prevDeps = useRef(deps);
    if(!isEqual(prevDeps.current, deps)){
    	comparisons.current++;
    }
    prevDeps.current = deps;
    return useEffect(fn, [comparisons.current]);
}

自动取消api请求

export function useFetch = (config, deps) => {
  const abortController = new AbortController()
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState()

  useEffect(() => {
    setLoading(true)
    fetch({
      ...config,
      signal: abortController.signal
    })
      .then((res) => setResult(res))
      .finally(() => setLoading(false))
  }, deps)

  useEffect(() => {
    return () => abortController.abort()
  }, [])

  return { result, loading }
}

setState过后立即获取新值

export const useRefState = <T>(
  initialValue: T
): [React.MutableRefObject<T>, React.Dispatch<React.SetStateAction<T>>, T] => {
  const [state, setState] = useState<T>(initialValue);
  const refState = useRef(state);
  useEffect(() => {
    refState.current = state;
  }, [state]);
  return [refState, setState, state];
}

定时器

export const useTimeout = useCallback((callback: any, timeout: number = 3000) => {
  let callbackRef = useRef<any>();
  useEffect(() => {
    callbackRef.current = callback;
  });
  useEffect(() => {
    let id = setTimeout(() => callbackRef.current && callbackRef.current(), timeout);
    return () => clearTimeout(id);
  }, [timeout])
}, [])

当自己尝试写过几个自定义的hook之后，想必都能感受到hook给开发者带来的便利，这种感觉就像写了一个逻辑层面的jsx一样，脏活累活都包装了起来，外部只需要优雅的调用，不用过多关心细节，你卯足了劲撸代码就完事儿?

参考资料：

• www.lodashjs.com/docs/lodash…
• developer.mozilla.org/en-US/docs/…
• developer.mozilla.org/en-US/docs/…
• react.docschina.org/docs/hooks-…