useMemo和useCallback, 你懂了啵？

useMemo 和 useCallback 都是 React 中用于优化性能的 Hook，它们的作用是避免不必要的计算和渲染，提高应用程序的性能和用户体验。

useMemo

useMemo 的作用是用于缓存计算结果，只有在依赖项发生变化时才会重新计算。它的语法如下：

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

其中，第一个参数是一个函数，用于计算需要缓存的值；第二个参数是一个数组，用于指定依赖项，只有当依赖项发生变化时才会重新计算。

举个例子，假设有一个计算阶乘的函数 factorial，我们可以使用 useMemo 来缓存计算结果：

import { useMemo } from 'react';

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

function MyComponent({ n }) {
  const result = useMemo(() => factorial(n), [n]);
  return <div>{result}</div>;
}

在上面的代码中，factorial 函数用于计算阶乘，MyComponent 组件使用 useMemo 缓存计算结果，只有当 n 发生变化时才会重新计算。

useCallback

useCallback 的作用是用于缓存函数，只有在依赖项发生变化时才会重新创建函数。它的语法如下：

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

其中，第一个参数是一个函数，用于缓存的函数；第二个参数是一个数组，用于指定依赖项，只有当依赖项发生变化时才会重新创建函数。

举个例子，假设有一个组件 MyButton，在点击时需要执行一个耗时的操作 doSomething，我们可以使用 useCallback 来缓存函数：

import { useCallback } from 'react';

function MyButton({ onClick }) {
  const handleClick = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);

  return <button onClick={handleClick}>Click me</button>;
}

总之，useMemo 和 useCallback 都是用于优化性能的 Hook，它们的作用是避免不必要的计算和渲染。useMemo 用于缓存计算结果，useCallback 用于缓存函数，它们的区别在于 useMemo 缓存的是值，而 useCallback 缓存的是函数。