嘿，兄弟，今天咱们聊聊 React 的两大缓存神器——useMemo 和 useCallback。 你有没有想过它们到底是啥？它们到底该咋用？别急，我这边一会儿给你讲清楚。

先说说用什么场景Neng用到它们

React 的函数式组件每次渲染dou会跑一遍所有代码。 Ru果你在 render 时Zuo了大量计算或者写了hen多回调函数， 那就会导致性Neng吃紧。

于是 React 给我们提供了两个 Hook：useMemo 用来缓存值， useCallback 用来缓存函数。

useMemo 是干嘛的？

简单说它帮你把一个耗时计算的结果存起来 只要依赖没变就直接拿老值，不再重新算。

const total = useMemo => {
  // 假装这一步hen慢
  return price * count;
}, );

上面这段代码里Ru果 price 或者 count 没变， 下次渲染时就不会 执行乘法，而是直接返回上一次的 total。

useCallback 是干嘛的？

它跟 useMemo hen像，只不过返回的是一个函数对象。 当依赖没变时你得到的就是同一个函数引用。

const handleClick = useCallback => {
  console.log;
}, );

这样子，传给子组件的 onClick 就不会因为父组件重新渲染而“换新”—— 子组件Neng通过 React.memo 判断 props 是否真的改变，从而跳过一次渲染。

差异大揭秘：缓存的是值还是函数？

这就是Zui核心的区别：

useMemo 缓存的是“值”——你在回调里手动返回的东西；

useCallback 缓存的是“函数”本身——返回的是一个闭包；

举个例子：

// 想缓存一个计算好的对象
const obj = useMemo =>  }), );
// 想缓存一个事件处理器
const fn = useCallback => doSomething, );

Ru果你把两者搞混，会导致性Neng问题甚至 bug。例如把需要多次调用的大数计算放在普通回调里 每次渲染dou会重新跑一遍，这可不是我们想要的。

我记得一句话：不要把无意义的东西dou放进 memo！

"小东西不用管，大事才记住"

为什么百度不收录这个文章？

"哈哈，我也不知道啊，那可Neng是因为内容太短、关键词不到位、或者是算法觉得这篇文章对搜索用户价值太低。" 说实话，有时候爬虫根本不会抓取到我们的博客，尤其是在没有足够外链或流量的时候。 所以Ru果你想让百度索引你的技术博客，一定要有足够质量的内容和外部链接。毕竟算法会优先抓取被广泛引用和高质量的页面。

什么时候用哪个geng合适？

"咱就是说当你需要在 render 中Zuo复杂计算，而且这些计算只跟几个状态有关，就用 useMemo。"

"而当你有一个回调传给子组件，而且这个子组件使用了 React.memo 或者依赖于 props 的引用比较性时就用 useCallback 来避免无意义重渲染。"

"记住一句话：不要为了优化而优化，只要真的有性Neng瓶颈，再去考虑是否使用它们。"

"比如 filter 列表、排序、分页这些常见操作往往Yi经被内部Zuo了hen好的优化，你Ke以先跑跑kan性Neng再决定是否加 memo。"

"另外Ru果你的回调hen简单，那么加 callback 并不Neng提升性Neng，也没有必要。"

"情况 A：props 改变时子组件不需要重新渲染 → 用 callback 保持同一引用；"

"情况 B：仅需缓存一次性结果 → 用 memo 返回值；"

"情况 C：同时又想保持函数引用与某些状态同步 → 两个一起用！"

示例：Child 接收 memoized 回调避免重渲染

function Parent {
  const  = React.useState;
  const handleIncrement = useCallback => setCount, );
  return (
    

      
计数：{count}
      
    
  );
}
const Child = React.memo => {
  console.log;
  return +1;
});

Vue 与 React 的区别简述一下

"Vue 有 computed 属性，它相当于 react 的 memo 化值；"

"Vue 的 watch Ke以监听变化并执行逻辑，但不像 callback 那样专门为传递给子组件Zuo防抖；"

"React geng强调纯粹的数据驱动与 Hooks，让我们Ke以灵活组合这些记忆化工具。";

";"

"Ru果你从 Vue 转来用 react.memo 就好比 vue.extend 的 pureComponent；";

";"