React useMemo 性能优化

学习使用 useMemo 缓存计算结果，避免在每次渲染时进行昂贵的计算。 · 难度：入门 · +15XP

useMemo 的作用

useMemo 是一个 React Hook，它仅在依赖项发生变化时才重新计算缓存值。这有助于避免在每次渲染时都进行高开销的计算。注意，useMemo 是性能优化手段，不应依赖它来保证逻辑正确性。

1. 基本用法

const cachedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

第一个参数是创建值的函数，第二个参数是依赖项数组。只有当依赖项变化时，函数才会重新执行。

2. 何时使用

• 计算量很大，且依赖项变化不频繁
• 引用类型（如对象、数组）作为 props 传递给子组件时，避免不必要的重新渲染

3. 示例：过滤列表

假设有一个大型列表和一个搜索关键词，使用 useMemo 可以避免每次输入都重新过滤。

练习提示

在下方代码中，修改 filteredList 的依赖项，观察当不相关状态变化时，过滤函数是否重新执行（可以在控制台查看日志）。