为什么需要 useMemo？

React 组件重新渲染时，里面的所有代码都会再跑一遍。如果有一个很慢的计算（比如处理大数组），每次渲染都重算，就会拖慢页面。但很多时候，计算依赖的数据根本没变，重算是白费力气。

useMemo 是什么？

useMemo 是一个 React 钩子，它能记住（缓存）某个计算结果。只有当依赖项变化时，它才重新计算；否则直接返回上次的结果。就像计算器上的“记忆”按钮——算过一次，下次直接取结果。

怎么用？

假设你有一个列表和搜索框，过滤操作需要时间：

• 用 useMemo 包裹过滤函数：const filteredList = useMemo(() => filter(list, search), [list, search])。
• 第二个参数是依赖数组，告诉 React 只有 list 或 search 变化时才重新过滤。
• 点击无关按钮时，search 没变，过滤不会执行——页面流畅。

什么时候不用？

简单计算（比如 2+2）不需要 useMemo，因为钩子本身有开销，反而更慢。只在觉得卡顿、明确是重计算导致的性能问题时再用。过早优化是万恶之源。

下一步可以做什么？

• 在你的项目中找一个过滤或排序大数组的地方，试试加上 useMemo。
• 打开浏览器的“性能”面板，对比加之前和之后的渲染时间。