记录react 使用 useCallback, useEffect，useMemo

useCallback：接收一个内联回调函数和一个依赖数组，返回一个记忆版本的回调函数。如果第二个参数没有指定改变值的情况，它只会在第一次时进行该值闭包缓存，不再更新

import React, {
      useState, useCallback } from 'react';

const [getImageUrl, setImageUrl] = useState<string>("");

const [getUrlLoading, setUrlLoading] = useState<boolean>(false);

const handleChange: (info: UploadChangeParam<any>) => void = useCallback(info => {
     
            if (info.file.status === "uploading") {
     
                setUrlLoading(true);
                return;
            }
            if (info.file.status === "done") {
     
                getBase64(info.file.originFileObj, (imageUrl: any) => {
     
                    setImageUrl(imageUrl);
                    setUrlLoading(false);
                });
            }
    }, [setImageUrl, setUrlLoading]);

useMemo：当依赖没有发生变化时，不执行计算，直接返回缓存结果（有点像 vue 的计算属性）。使用useMemo，然后给她传递第二个参数，参数匹配成功，才会执行

import React, {
      useState, useMemo } from 'react';
const [count, setCount] = useState(0);

  //第一个参数是要执行的函数
  //第二个参数是执行函数依赖的变量组成的数据
  //这里只有count发生变化double才会重新计算
  const double = useMemo(() => {
     
    return count * 2;
  }, [count])
  // 下面为第二个参数满足条件再执行
const double = useMemo(() => {
     
    return count * 2;
  }, [count===3])

useEffect：可以把 useEffect 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

function Example() {
     
  const [count, setCount] = useState(0);

  useEffect(() => {
     
    const id = setInterval(() => {
     
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{
     count}</h1>
}

注释：useEffect使用中，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可，如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。