核心区别
| 特性 | useCallback | useMemo |
|---|---|---|
| 返回值 | 缓存函数 | 缓存计算结果（任意值） |
| 主要用途 | 避免函数重新创建，优化子组件渲染 | 避免重复计算复杂值，优化性能 |
| 依赖项变化 | 依赖变化时返回新函数 | 依赖变化时重新计算值 |
| 典型场景 | 事件处理器、传递给子组件的回调函数 | 复杂计算、过滤/映射大型数组、派生状态 |
从定义中理解useCallback和useMemo的区别
useCallback(fn, dependencies)
fn：想要缓存的函数。此函数可以接受任何参数并且返回任何值。React将会在初次渲染而非调用时返回该函数。当进行下一次渲染时，如果 dependencies 相比于上一次渲染时没有改变，那么 React 将会返回相同的函数。否则，React 将返回在最新一次渲染中传入的函数，并且将其缓存以便之后使用。React 不会调用此函数，而是返回此函数。你可以自己决定何时调用以及是否调用。
useMemo(calculateValue, dependencies)
calculateValue：要缓存计算值的函数。它应该是一个没有任何参数的纯函数，并且可以返回任意类型。React将会在首次渲染时调用该函数；在之后的渲染中，如果 dependencies 没有发生变化，React 将直接返回相同值。否则，将会再次调用 calculateValue 并返回最新结果，然后缓存该结果以便下次重复使用。
- 从上述两者的定义可以看出useCallback中的第一个参数是函数，在React首次渲染时不会被调用，而是直接返回；useMemo的第一个参数也是函数，但是这个函数在React首次渲染时会被调用。这一点也是容易被忽略的区别！！！
本次记录重点
场景：当你有一个变量C需要根据响应式变量Mode的变化时而赋值为A函数，时而赋值为B函数，这种情况下使用usememo；因为：
useCallback缓存函数本身。不像useMemo，它不会调用你传入的函数。相反，它缓存此函数。useMemo缓存函数调用的结果
const C=useMemo(()=>{
if(mode==="A"){
return FuncA;
}else{
return FuncB
}
},[mode])
