react+TS——hook初体验

  学完了react，还有ts，开始了react和ts的学习，刚开始学的是类式组件，现在都是用函数式组件，在学习的过程中也是愈发体会到hook的可玩性和重要性，这里就来稍微总结一下常见hook的用法。

一、useState

  const [count, setCount] = useState(0);
/*
count的值是0
setCount是改变值的方法
*/

二、useEffect

//第一个参数接收一个回调函数，第二个参数接收要监视的值（可以是一个数组）
useEffect(callback,[])

useEffect需要注意的事

1. 如果回调函数返回一个函数，该返回的函数的执行时机是下一次执行该effect函数之前执行
2. 如果监视一个非useState生成的引用类型的数据，可以会造成死循环(原因是在执行的比较的时候只会单纯的比较对象的地址值，并不会像useState生成的引用数据类型数据那样比较)

三、使用useEffect实现mounted和unmounted钩子函数

const useMount = (callback: () => void, unmountedCallback: () => void) => {
  useEffect(() => {
    callback()
    return unmountedCallback
    //这里依赖是一个空数组会在组件渲染返回一个函数会在组件卸载的时候执行
  }, [])
}

四、使用useEffect和useState实现防抖

const useDebounce = <V>(value: V, delay?: number): V => {
  const [debounceValue, setDebouncedValue] = useState(value)
  useEffect(() => {
    // 每次在value变化以后设置一个定时器
    const timeout = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)
    // 每次在上一个useEffect处理完以后再运行(这里返回的一个函数会执行当前 effect 之前对上一个 effect 进行清除)
    return () => clearTimeout(timeout)
  }, [value, delay])
  return debounceValue
}

这次就先简单分享这么多吧，hook的用法挺多的，不过我感觉我现在理解的并且常用的目前只有这些，之后再学习的多一点再来个大总结。