其实上一篇已经，相对系统的回顾了一些写法上的变化。这篇的话讨论具体要不要优化的实际用例。

useMemo useCallback useEffect 是否改使用
不要过度使用！ * 记住这些缓存本身也是有内存开销和计算成本（对比依赖项）的。如果只是简单的计算（比如 $1 + 1$）或者组件结构很简单，直接渲染通常比维护这些 Hook 还要快。只有当你感觉到页面卡顿，或者有昂贵的组件在进行无谓的重复渲染时，再考虑用它们。

💡 给你的“黄金法则”
当你分不清该不该用时，遵循这个步骤：

先裸奔：不加 memo，不加 useMemo。如果页面流畅，代码越简单越好。

找凶手：如果发现点击某个按钮很卡，打开 Chrome 的 React DevTools，开启 "Highlight updates when components render"（组件渲染时高亮）。

看颜色：如果你发现由于父组件一个无关的 State 改变，导致下面一个巨大的子组件也跟着“闪烁”（重绘），这时给子组件套上 React.memo。

补引用：套上 memo 后发现子组件还在闪？那一定是传过去的 Props 引用变了。这时再去对应的参数上补 useMemo 或 useCallback。

也就是说并非一个简单的逻辑我一定要使用useCallback 和 React.memo
去进行优化。

useMemo、useCallback 和 React.memo

这三个的主要区别是什么

理解这三个概念最简单的方法，是先记住它们的核心目的：它们都是为了性能优化（减少不必要的渲染和计算），但关注的对象不同。

我们可以把它们比作“记忆芯片”：

useMemo：记住的是值（计算结果）。

useCallback：记住的是函数。

React.memo：记住的是组件渲染的结果。