【React Hooks原理 - useCallback、useMemo】

useMemo用于缓存计算结果，它只在依赖项发生变化时重新计算

原理：

依赖项检查：useMemo接收2个参数，一个“创建”函数和一个依赖项数组。依赖项数组中的值在每次渲染时都会被比较，以决定是否需要重新计算

缓存机制：如果依赖项没有发生变化，useMemo会返回上一次计算的结果，而不是重新执行“创建”函数，避免了在组件每次渲染时都进行昂贵的计算

优化渲染：减少了组件的渲染次数

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

useCallback:用于缓存函数定义。确保依赖项不变的情况下，不会重新创建函数

原理：

依赖项检查：useCallback接收一个函数和一个依赖项数组，如果依赖项没变化，会返回缓存的函数引用，而不是创建一个新的函数

避免不必要的渲染：在React中，父组件的重新渲染会导致其所有子组件也重新渲染，除非这些子组件的props没有改变，从而避免子组件不必要的渲染

总结：

• useMemo 用于缓存计算结果，避免在每次渲染时重复计算。

• useCallback 用于缓存函数定义，避免在每次渲染时创建新的函数实例。