前言：我们大部分 React 类组件可以保存状态，而函数组件不能？ 并且类组件具有生命周期，而函数组件却不能？React 16.8 新出来的Hook可以让React 函数组件具有状态，并提供类似 componentDidMount和componentDidUpdate等生命周期方法。

• React Hooks 的意思是: 组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。

useEffect

作用 （因函数组件中没有生命周期，故可以实现刚创建组件时的一个生命周期）

• 可以看作是react的componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

用法

import React, {useRef, useEffect, useState} from "react";

function Ref (){
    const [count, setCount] = useState<number>(0)
    useEffect(() => {
      setInterval(() => {
        setCount(c => c + 1)
     }, 1000)
    }， 第二个参数)

    接收两个参数，
    第一个参数为函数，
    第二个参数：
          1. 不传，组件里面每一个状态（count）发生改变，就会执行
          2. 传[]，组件创建时执行，只执行一次，状态发生改变不会执行
          3. 传[count, count],里面状态发生就会去执行

    return (
        <>
            <div>计数：{count}</div>
        </>
    )
}
export default Ref;

• useEffect还可以实现销毁，实现例如vue的destroyed周期，这里使用useEffect回调函数的return，组件被销毁时才会执行

 useEffect(() => {
      setInterval(() => {
        setCount(c => c + 1)
     }, 1000)
     return () = {
        这里可以在组件销毁时用来销毁setInterval定时器
     }
 }， 第二个参数)

useRef

作用（缓存值，比如缓存读取取消定时器前的值）

• 用来获取DOM元素对象保存数据（使用属性current取值）

用法

import React, {useRef, useEffect, useState} from "react";

function Ref (){
    let timer = useRef<any>();
    const [count, setCount] = useState<number>(0)

    const start = () => {
      if (!timer) {
          timer.current = setInterval(() => {
            setCount(c => c + 1)
        }, 1000)
      }
    }

    const stop = () => {
       if (timer.current) {
          clearInterval(timerId.current);
          timer.current = null
       }
    }
    return (
        <div>
            <div>计数：{count}</div>
            <button onClick={start}>启动</button>
            <button onClick={stop}>停止</button>
        </div>
    )
}
export default Ref;

• useRef不会因为组件的更新而丢失数据，虽然组件进行了更新，但是通过useRef保存的数据是不会丢失的，这里通过useRef中的current来进行保存（官方要求的写法）

useCallback

作用（缓存回调函数）

• 因为本地变量每次变化，函数会每次创建，故造成性能浪费，所以使用react的hook里面的useCallback可缓存函数

用法

const start = useCallback(() => {
      if (!timer) {
          timer.current = setInterval(() => {
            setCount(c => c + 1)
        }, 1000)
      }
}, [])

两个参数（回调函数，参数列表），第二个参数用法同useEffect

useMemo (使用范围比useCallback更广)

作用（缓存回调函数的return值，可以是对象，函数，简单值）

• useCallback是useMemo改造版

用法

const start = useMemo(() => {
      return () => {
         if (!timer) {
            timer.current = setInterval(() => {
              setCount(c => c + 1)
          }, 1000)
        }
     }
}, [])