useCallback
使用useCallback可以避免组件重复渲染，提升性能，以下是一个使用useCallback的例子：
import { useCallback } from 'react';
const App = () => {
const [counter, setCounter] = useState(0);
const incrementCounter = useCallback(
() => setCounter(prevCounter => prevCounter + 1),
[setCounter]
);
return (
<div>
<h1>{counter}</h1>
<button onClick={incrementCounter}>Increment Counter</button>
</div>
);
};
在上面的例子中，我们使用useCallback来包装incrementCounter函数，这样每次incrementCounter函数被调用时，它的引用就不会发生改变，从而避免了组件的重复渲染。
useMemo
useMemo 可以帮助我们优化 React 应用的性能，它接受一个函数和一个可选的数组作为参数，当数组中的值发生变化时，函数才会重新执行，否则函数不会重新执行，从而避免了不必要的重新渲染。
举例说明：
const App = () => {
const [num, setNum] = useState(0);
const [name] = useState('Nick');
// 使用 useMemo 优化处理
const doubleNum = useMemo(() => num * 2, [num]);
return (
<div>
<p>{`${name}'s number is ${doubleNum}`}</p>
<button onClick={() => setNum(num + 1)}>+1</button>
</div>
);
};
useCallback 和 useMemo 的区别
useCallback是一个 Hook，它会返回一个 memoized （记忆化的）回调函数，其中的dependencies将被用来决定它是否需要重新计算。useMemo也是一个 Hook，它会返回一个 memoized 值，其中的dependencies将被用来决定它是否需要重新计算。它接受一个函数作为第一个参数，它将在dependencies发生变化时被调用，并且返回一个 memoized 的值。
