关于useMemo和useCallback异同的一些理解

基于React官网给出的文档Hook API 索引 – React (docschina.org)我们可以大致了解useMemo与useCallback都可以用来控制组件的状态更新来达到性能优化的作用，具体使用方法如下：

useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

由官方文档给出

 useMemo返回一个 memoized 值。

 useCallBack返回一个 memoized 回调函数。

不同于useEffect在组件第一次渲染后和每次更新后执行，由于传入useMemo的函数会在组件渲染期间执行，即在组件还未渲染完成时useMemo就会被调用，所以不能用其来执行与渲染无关的操作，当useMemo被直接声明在组件内时，不需要调用其便能够在组件渲染期间以及其依赖改变时执行：

const Test=()=>{
  const [count, SetCount] = useState(0);
  const [num, SetNum] = useState(10);
  useMemo(() => {
    SetNum(num=>num-1)
    console.log(num)
  },[count]
  )
return (
<>
<h1>{count}</h1>
<button onClick={()=>SetCount(count=>count+1)}>按钮</button>
</>
)
}

而当直接声明useCallback时，若不调用其声明函数，即使当其依赖改变时，其也不会执行，由于useCallback返回一个回调函数，所以其可以当作函数来声明和使用：

const Test=()=>{
  const [count, SetCount] = useState(0);
  const [num, SetNum] = useState(10);
  const onChange = useCallback(()=>{
    SetNum(num=>num-1)
    SetCount(count=>count+1)
    console.log(num)
  },[count])
return (
<>
<h1>{count}</h1>
<button onClick={onChange}>按钮</button>
</>
)
}

而若如此使用useMemo时，浏览器报错