useCallback vs useMemo：这俩到底有什么区别？一个煮鸡蛋的故事

故事的开始：你妈叫你煮鸡蛋

话说有一天你妈让你煮鸡蛋。你第一次煮，查教程、烧水、下锅、计时、过凉水，忙活半天终于煮好了。第二天你妈又让你煮鸡蛋，你又重复了一遍全部流程。这就是 useCallback 和 useMemo 要解决的问题——别重复造轮子。

useMemo：记住煮好的鸡蛋

useMemo 好比你把煮好的鸡蛋放冰箱里。下次你妈喜煮鸡蛋，你直接打开冰箱拿出来就行，不用再从烧水开始。

const cookedEgg = useMemo(() => {
  return boilEgg(water, egg, 8);
}, [water, egg]);

useCallback：记住怎么煮鸡蛋

useCallback 缓存的是煮鸡蛋这个方法，不是鸡蛋本身。

const boilEggCallback = useCallback(() => {
  return boilEgg(water, egg, 8);
}, [water, egg]);

核心区别

• useMemo 缓存计算结果 → 返回的是值（鸡蛋）
• useCallback 缓存函数本身 → 返回的是函数（煮鸡蛋的方法）

记住口诀：useMemo 存结果，useCallback 存操作；如果你不确定，那就先别用。

毕竟，程序员界有句老话："过早优化是万恶之源"。你妈叫你煮鸡蛋，你先煮了再说，别先把厨房改造成自动化煮蛋流水线。