useMemo和useCallback

useMemo和useCallback是React中的两个优化性能的钩子（Hooks）。它们都可以用来缓存计算结果，避免在每次渲染时都重新执行耗时的操作。然而，它们的主要区别在于缓存的内容和使用场景。

useMemo useMemo用于缓存那些计算成本较高的值。它接收两个参数：一个回调函数和一个依赖数组。当依赖数组中的任何一个值发生变化时，useMemo会重新执行回调函数并返回新的结果。如果依赖数组中的值没有变化，则直接返回之前缓存的结果。这可以有效地避免在每个渲染周期中重复进行昂贵的计算。

const memoizedValue = useMemo(() => {
  // 这是一个耗费大量计算的函数
  return calculateExpensiveValue(a, b);
}, [a, b]);

useCallback useCallback的作用类似于useMemo，但它主要用于缓存函数而不是值。当你有一个需要频繁创建的函数，并且该函数作为props传递给子组件时，你可以使用useCallback来确保只有当依赖项改变时才创建新的函数引用。这样可以避免不必要的子组件更新。

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

总结：

• useMemo用于缓存计算得到的值。
• useCallback用于缓存函数，特别是那些作为props传递给子组件的函数。

同时使用这两个Hook可以提高React应用的性能，减少不必要的计算和组件更新。