Hook 是 React 16.8 的新增特性，是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。

内置Hook

1. useState

首先 useState 初始化有两种全部都是异步的 (react事件原生 addeventListener ajax 生命周期)

    //第一种 
      const [x, setX] = useState(值)
    //第二种
      const [Y, setY] = useState(() => {
        //逻辑
        //return 值
      })

  //获取异步的值
  setX(preValue => {
    preValue //上一次的值
    return 值
  })

2.useEffect

给函数组件增加了操作副作用(数据获取、订阅或者手动修改DOM)的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。

    // componentDidMount 只执行一次
      useEffect(() => {

      },[])

   // componentDidUpdata 更新完成
      useEffect(() => {

      },[依赖1, 依赖2, ...])

   // 卸载完成： 组件更新 || 组件销毁 (路由跳转)
      useEffect(() => {
        return () => {

        }
      },[依赖1, 依赖2, ...])

3. useMemo

useMemo是一个React Hook，可以在重新渲染之间缓存计算结果。

    useMemo(() => {
        // 立即执行
        // 必须有 return 
        // 缓存 return 出来的值
    }, [])

在组件的顶层调用useMemo以在重新渲染之间缓存计算：

    import { useMemo } from 'react';  

    export default function Home(props) {
       const [x, setX] = useState(10000);

   /*
      useMemo 依赖为空 只在首次渲染执行一次
      第一次 fn = 49995000
      第二次 直接拿出缓存的值， 49995000 给 fn
  */
    const fn = useMemo(() => {
        let num = 0;
        for (let i = 0; i < x; i++) {
          9;
          num += i;
        }
        return num;
    }, [x]);
    return (
       <>
         <h2>X: {x}</h2>
       </>
    );
  }

3.useCallback

useCallback是一个React Hook，它允许您在重新渲染之间缓存函数定义。

    useCallback
    // 他是缓存一个函数
    // 防止子组件重复渲染
    const fn = useCallback(() => {

    }, [])

在组件的顶层调用useCallback，在重新渲染之间缓存函数定义：

    import { useCallback } from 'react';  

    export default function ProductPage({ productId, referrer, theme }) {  

        const fn = useCallback((orderDetails) => {  

            post('/product/' + productId + '/buy', {  
                referrer,  
                orderDetails,  
        });  
    }, [productId, referrer]);

React中的 Hook

内置Hook

1. useState

2.useEffect

3. useMemo

3.useCallback