react-hook浅谈

[cg669]

很久之前react面试都会问道class组件跟function组件有什么区别，很多人都会首先讲到，function组件没有生命周期函数，没有state。

当然由于这两个特别重要的特性，导致了react使用者使用的最多的还是class组件，但是这与作者或者设计者的思想还是有点出入，官方是很推荐使用function组件的。

经过官方不懈努力，以及突发奇想的妙计，在16.8.0版本以后，我们终于可以使用hook了。（hook官方介绍）

具体的api，本人建议还是直接去查阅，首先要通读每一个，搞清楚每一个的使用场景，然后实际项目时候，刚开始还是要仔细阅读一遍。

原因如下：

        1、第一次仔细通篇阅读，理解意思，这样将来项目中遇到某个场景的时候，知道是有这个api的，不会自己只用那几个自己懂的。

        2、百炼锤金，没看一次，也许收获会不一样。

        3、官方文档几乎交代了常用的应用场景。

为什么我会一发不可收拾的爱上hook？

首先，除了给与function组件一些神奇的react特性以外，我们还会发现，在以往的class组件，很多包含自己的状态，然后随之产生的逻辑，几乎难以复用，高阶组件以及render props的解决方案，又会使代码难以理解，以及后期维护成本的增加。

那么hook就有这么神奇的魔力么？是的！

我们可以自定义很多通用的逻辑，然后当成自定义hook。

1、例如：我想实现一个hook，可以满足，用来判断一个元素是否被hover

import { useState, useRef } from 'react'export function useHover() {
  const [value, setValue] = useState(false)

  const ref = useRef(null)

  const handleMouseOver = () => setValue(true)
  const handleMouseOut = () => setValue(false)

  useEffect(
    () => {
      const node = ref.current
      if (node) {
        node.addEventListener("mouseover", handleMouseOver)
        node.addEventListener("mouseout", handleMouseOut)

        return () => {
          node.removeEventListener("mouseover", handleMouseOver)
          node.removeEventListener("mouseout", handleMouseOut)
        }
      }
    },
    [] // Recall only if ref changes
  )

  return [ref, value]
}

这样，当我们要对任意函数式组件里某个元素hover状态监听时，只要引用useHover，将返回的ref挂到要监听的元素上，就能实时获取到当前组件的hover状态。

2、又或者我们像对一系列可能同级，可能跨级的组件，都想使用同一个方法，或者组件。以前我们会第一个想到context，或者挂到顶层prop，无限传。

hook可以有个超能力。来个demo

const visibleContext = createContext()

function useProviderVisible() {
  const [visible, setVisible] = useState(false)

  const [list, setList] = useState(null)

  const close = () => {
    setList(null)
    setVisible(false)
  }

  return {
    visible,
    setVisible,
    close
  }
}

export function VisibleProvider({ children }) {
  const viVal = useProviderVisible()
  return (
    <visibleContext.Provider value={viVal}>{children}</visibleContext.Provider>
  )
}

export function useVisible() {
  return useContext(visibleContext)
}

这样在我们就有了个visible是否显示的小壳子，哪里需要包哪里，我们还暴露出了，想给外部用户得到的方法跟状态。是不是超棒！

3、useRef组合也很棒，hook本身的api并不是很神奇，重要的是发现他们的深处，组合他们，会发现一个完美而又神奇的新世界！冲鸭！

贴几个常用的：

export function useWindowSize() {
  const isClient = typeof window === "object"

  const getSize = useCallback(() => {
    return {
      width: isClient ? window.innerWidth : undefined,
      height: isClient ? window.innerHeight : undefined
    }
  }, [isClient])

  const [windowSize, setWindowSize] = useState(getSize)

  useEffect(() => {
    if (!isClient) {
      return false
    }

    function handleResize() {
      setWindowSize(getSize())
    }

    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [getSize, isClient]) // Empty array ensures that effect is only run on mount and unmount

  return windowSize
}

export function usePrevious(value) {
  
  const ref = useRef()

  useEffect(() => {
    ref.current = value
  }, [value]) // Only re-run if value changes

  return ref.current
}

//  倒计时
export default function useCountDown() {
    const ref = useRef();
    const [num, setNum] = useState(0);
    const stop = () => {
        if (ref.current) {
            clearTimeout(ref.current);
        }
    };
    const start = targetNum => {
        setNum(targetNum);
    };
    const reStart = targetNum => {
        if (ref.current) {
            clearTimeout(ref.current);
            setNum(targetNum);
        }
    };
    const reset = () => {
        if (ref.current) {
            clearTimeout(ref.current);
            setNum(0);
        }
    };
    useEffect(() => {
        if (num > 0) {
            const newNum = num - 1
            const iTimer = setTimeout(() => setNum(newNum), 1000);
            ref.current = iTimer;
        }
        return () => {
            if (ref.current) {
                clearTimeout(ref.current);
            }
        };
    }, [num]);
    return {
        stop,
        start,
        reStart,
        reset,
        isRunning: num > 0,
        num
    };
}

const FormContext = createContext(null)

function useFormProvider() {
    const [telForm, setTelForm] = useState(null)
    const [psdForm, setPsdForm] = useState(null)
    const [state, setState] = useState('tel')
    return { telForm, setTelForm, psdForm, setPsdForm, state, setState }
}

export function useForm() {
    return useContext(FormContext)
}

export function FormProvider({ children }) {
    const formValues = useFormProvider()
    return <FormContext.Provider value={formValues}>{children}</FormContext.Provider>
}

嘿嘿，还有好多，不贴了，自己去组合吧！